search

博客列表 >盒模型，伪类与媒体查询

盒模型，伪类与媒体查询

手机用户1631860753
手机用户1631860753原创
2021年09月26日 01:49:51426浏览

一.盒模型样式

1. 盒模型

  • 盒模型的属性

    width 宽
    height 高
    border 边框
    padding 内边距
    margin 外边距

  • 行元素：都在一行，排不下后默认换行；

  • 块元素：默认占据一行宽度，一行只有它，两边都没有其他元素；
  • currentColor 默认成文本元素
  • backgeound-clip：content-box 把背景限定在内容区；
  • 通过box-sizing来指定内容区的边界在哪里；
  • 在页面内收缩原来的内容区大小，来保证盒子在页面占据的空间不变；
  • 盒模型的四个方向都可以独立设置：四个方向由顺时针方向来表示：上，右，下，左

    四值：上，右，下，左
    三值：上，左右，下
    二值：上下，左右
    单值：四个方向用于

  • padding，margin是透明的，所以只能设置宽度
  • border不是透明的，除了宽度，还能设置样式和前景色
  • border-top 设置上边框
  • border-bottom 设置下边框
    1.1 盒模型样式

  • 输入：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>盒模型</title>
    8. </head>
    9. <body>
    10.   <div class="box"></div>
    11.   <style>
    12.      .box {
    13.       /* 宽 */
    14.       width: 200px;
    15.       /* 高 */
    16.       height: 200px;
    17.       /* 边框大小，虚线，颜色 */
    18.       border: 10px dashed violet;
    19.       /* 盒子背景色 */
    20.       background-color: turquoise;
    21.       /* 内边距 */
    22.       padding: 20px;
    23.       /* 把盒子背景色限制在内容区 */
    24.       background-clip: content-box;
    26.       /* 收缩原来内容区大小 */
    27.       box-sizing: border-box;
    28.     }
    29.   </style>
    30. </body>
    31. </html>
  • 输出：
1.2 盒模型独立设置（四边）
  • 输入：
    1. .box {
    2.       padding: 10px 15px 20px 25px;
    3.       /* 设置上边框 */
    4.       border-top: 20px dashed violet;
    5.       /* 设置下边框 */
    6.       border-bottom: 10px solid violet;
    7.     }
  • 输出：

二.伪类选择器与参数计算

1.伪类选择器

  • 伪类：伪是形容类的，类是class指定它的权益；
  • nth-of-type（）匹配元素，在匹配之前会先根据元素进行分组再匹配，（）里面是选中的元素；

    比如：nth-of-type（1）就是选中第一个元素；

  • first-of-type是选中所有元素中的第一个元素；
  • last-of-type是选中所有元素中的最后一个元素；
  • not（）是去掉所有选中元素中的某些元素；
  • nth-last-of-type（）是倒数选择器，（）里面的内容代表选中倒数那个内容；

原样式

  • 代码：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>伪类选择</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.     <li>demo1</li>
    12.     <li>demo2</li>
    13.     <li>demo3</li>
    14.     <li>
    15.       demo4
    16.       <ul>
    17.         <li>demo4-1</li>
    18.         <li>demo4-2</li>
    19.         <li>demo4-3</li>
    20.       </ul>
    21.     </li>
    22.     <li>demo5</li>
    23.     <li>demo6</li>
    24.     <li>demo7</li>
    25.     <li>demo8</li>
    26.     <p>item1</p>
    27.     <p>item2</p>
    28.     <p>item3</p>
    29.   </ul>
    30. </body>
    31. </html>

  • 样式：

1.1 选中所有子元素中的第三个元素，不包括后代元素
  • 输入：
    1. <style>
    2.     .list > :nth-of-type(3) {
    3.       background-color: cornflowerblue;
    4.     }
    5. </style>
  • 输出：
1.2 选中li元素中的第一个子元素
  • 输入：
    1. <style>
    2.     .list > li:nth-of-type(1) {
    3.       background-color: cyan;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > li:first-of-type {
    3.       background-color: cyan;
    4.     }
    5.   </style>
  • 输出：
1.3 选中li中最后一个元素
  • 输入：
    1. <style>
    2.     .list > li:nth-of-type(8){
    3.         background-color: violet;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > li:last-of-type {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 输出：
1.4 选中li中倒数第二个元素
  • 输入：
    1. <style>
    2.     .list > li:nth-last-of-type(2) {
    3.       background-color: darkorange;
    4.     }
    5.   </style>
  • 输出：

2.伪类选择器参数

  • nth-of-type() （）括号里面是代表参数；
  • 参数 = an+b a：是系数 n:是计数器 b：是偏移量；
  • 1乘以任何数都等于任何数，所有不用写
  • 获取指定参数就直接（b）；
  • 获取指定数的后几个就直接（n + b）
  • 获取指定数的前几个就直接（-n + b）
  • 获取全部偶数直接（even/2n） even代表偶数
  • 获取全部奇数直接（odd/2n+1） odd代表奇数

原样式

  • 输入：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>伪类选择器参数</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.     <li>demo1</li>
    12.     <li>demo2</li>
    13.     <li>demo3</li>
    14.     <li>demo4</li>
    15.     <li>demo5</li>
    16.     <li>demo6</li>
    17.     <li>demo7</li>
    18.     <li>demo8</li>
    19.   </ul>
    20. </body>
    21. </html>
  • 输出：
2.1 从第三个开始选中后面所有元素
  • 输入:
    1. <style>
    2. .list > :nth-of-type(n + 3) {
    3. background-color: cyan;
    4.     }
    5. </style>
  • 输出：
2.2 选中前三个元素
  • 输入：
    1. <style>
    2.     .list > :nth-of-type(-n + 3) {
    3.       background-color: chartreuse;
    4.     }
    5.   </style>
  • 输出：
2.3 选中后三个元素
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(-n + 3) {
    3.       background-color: chartreuse;
    4.     }
    5.   </style>
  • 输出：
2.4 选中所有偶数
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(even) {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > :nth-last-of-type(2n) {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 输出：
2.5 选中所有奇数
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(odd) {
    3.       background-color: yellow;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > :nth-last-of-type(2n+1) {
    3.       background-color: yellow;
    4.     }
    5.   </style>
  • 输出：

三.媒体查询

1. 常用单位

常用单位有：px，em，rem，vh,vw

  • 绝对单位：px，是像素，与设备有关，一英寸有96px

  • 相对单位：

    1.em，rem，与字号相关 font-size
    2.vh,vw,与视口相关（可视窗口大小）

  • 单位关系：

    1em=16px 1rem=10px

  • em永远和当前或者父级的font-size大小绑定

  • rem 可以用来引用html中的font-size

  • vw,vh：是将可视窗口看成100份，每一份就是一个vw,vh；

2.媒体查询

  • opacity 设置透明度
  • transittion 让效果呈现慢一点
  • 只要动态的改变rem的大小，也相当于改变html中font-size大小，就可以动态调整按钮大小

    2.1 实例看单位的运用

    原样式
  • 输入：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>媒体查询</title>
    8. </head>
    9. <body>
    10.   <button class="btn small">按钮1</button>
    11.   <button class="btn middle">按钮2</button>
    12.   <button class="btn large">按钮3</button>
    13. </body>
    14. </html>
  • 输出：
2.1.1 设置按钮样式和效果
  • 输入：
    1. <style>
    2.     .btn {
    3.       background-color: cornflowerblue;
    4.       color: white;
    5.       border: none;
    6.       outline: none;
    7.     }
    8.     .btn:hover {
    9.       cursor: pointer;
    10.       opacity: 0.9;
    11.       transition: 0.6s;
    12.     }
    13.   </style>
  • 输出：
2.1.2 从移动端小屏幕开始
  • 输入：
    1. <style>
    2.       html {
    3.           font-size: 10px;
    4.       }
    5.     .btn {
    6.       background-color: cornflowerblue;
    7.       color: white;
    8.       border: none;
    9.       outline: none;
    10.     }
    11.     .btn:hover {
    12.       cursor: pointer;
    13.       opacity: 0.9;
    14.       transition: 0.6s;
    15.     }
    16.     .btn.small {
    17.       font-size: 1.2rem;
    18.       padding: 0.4rem 0.8rem;
    19.     }
    20.     .btn.middle {
    21.       font-size: 1.4rem;
    22.       padding: 0.4rem 0.8rem;
    23.     }
    24.     .btn.large {
    25.       font-size: 1.6rem;
    26.       padding: 0.4rem 0.8rem;
    27.     }
    28.     @media (min-width: 480px) {
    29.       html {
    30.         font-size: 10px;
    31.       }
    32.       @media (min-width: 640px) {
    33.       html {
    34.         font-size: 14px;
    35.       }
    36.       @media (min-width: 720px) {
    37.       html {
    38.         font-size: 16px;
    39.       }
    40.   </style>
  • 输出：
2.1.3 pc端，从大屏到小屏
  • 输入：
    1. <style>
    2.     html {
    3.       font-size: 10px;
    4.     }
    5.     .btn {
    6.       background-color: cornflowerblue;
    7.       color: white;
    8.       border: none;
    9.       outline: none;
    10.     }
    11.     .btn:hover {
    12.       cursor: pointer;
    13.       opacity: 0.9;
    14.       transition: 0.6s;
    15.     }
    16.     .btn.small {
    17.       font-size: 1.2rem;
    18.       padding: 0.4rem 0.8rem;
    19.     }
    20.     .btn.middle {
    21.       font-size: 1.4rem;
    22.       padding: 0.4rem 0.8rem;
    23.     }
    24.     .btn.large {
    25.       font-size: 1.6rem;
    26.       padding: 0.4rem 0.8rem;
    27.     }
    28.     @media (max-width: 720px) {
    29.       html {
    30.         font-size: 16px;
    31.       }
    32.     }
    33.     @media (max-width: 640px) {
    34.       html {
    35.         font-size: 14px;
    36.       }
    37.     }
    38.     @media (max-width: 480px) {
    39.       html {
    40.         font-size: 10px;
    41.       }
    42.     }
    43.     @media (min-width: 720px) {
    44.       html {
    45.         font-size: 16px;
    46.       }
    47.     }
    48.     @media (min-width: 480px) and (max-width: 640px) {
    49.       body {
    50.         background-color: cyan;
    51.       }
    52.     }
    53.   </style>
  • 输出：
上一条：研招网崩了？网络崩溃的原因有哪些？怎么维护网站？下一条：HTML表单、选择器学习与应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议