CSS盒子模型

CSS盒子模型

  • CSS三大特性

    • 优先级的介绍

      • 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

      • 优先级公式：

        • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

      • 注意点：

        • 1、!important写在属性值的后面，分号的前面！

        • 2、!important不能提升继承的优先级，只要是继承优先级最低！

        • 3、实际开发中不建议使用 !important 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id {
            color: orange;
        }
​
        .box {
            color: blue;
        }
​
        div {
            color: green !important;
        }
​
        /* !important不要给继承的添加，自己有样式无法继承父级样式 */
        body {
            color: red;
        }
​
    </style>
</head>
<body>
    <!-- 意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 -->
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

  • 权重叠加计算

    • 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

    • 权重叠加计算公式：（每一级之间不存在进位）

    • 比较规则：

      • 1、先比较第一级数字，如果比较出来了，之后的统统不看

      • 2、如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

      • 3、......

      • 4、如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）

    • 注意点：!important如果不是继承，则权重最高，天下第一！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* #one {
      color: red;
    }
​
    .son {
      color: blue;
    }
​
    p {
      color: green;
    } */
​
    /* (行内, id, 类, 标签) */
​
    /* (0, 1, 0, 1) */
     div #one {
      color: orange;
    }
​
    /* (0, 0, 2, 0) */
    .father .son {
      color: skyblue;
    }
​
    /* 0, 0, 1, 1 */
    .father p {
      color: purple;
    }
    
    /* 0, 0, 0, 2 */
    div p {
      color: pink;
    } 
    
  </style>
</head>
<body>
  <div class="father">
    <p class="son" id="one">我是一个标签</p>
  </div>
</body>
</html>

  • 计算题走起

    • 第1题

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>第1题：普通题</title>
        <style>
            /* (行内, id, 类, 标签) */
            /* !important 最高 */
            /* 继承: 最低 */
    ​
            /* (0, 2, 0, 0) */
            #father #son {
                color:blue; 
            } 
            
            /* (0, 1, 1, 1) */
            #father p.c2 {
                color:black;
            } 
            
            /* (0, 0, 2, 2) */
            div.c1 p.c2 {
                color:red;
            } 
    ​
            /* 继承, 最低 */
            #father { 
                color:green !important;
            } 
    ​
            /* 继承, 最低 */
            div#father.c1 {
                color: yellow ;
            } 
    ​
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p id="son" class="c2">
                这行文本是什么颜色的？ 
            </p>
        </div>
    </body>
    </html>

    • 第2题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第2题: 标签选择器选择一类</title>
        <style>
            /* (行内, id, 类, 标签) */
            /* !important 最高 */
            /* 继承: 最低 */
        
            /* (0，0, 0， 2) */
          div div {
                color: skyblue;
            } 
    ​
            /* (0， 0， 0， 1)  */
            div {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    这行文本是什么颜色？
                </div>
            </div>
        </div>
    </body>
    </html>

    • 第3题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第3题: 权重叠加每位不存在进制</title>
        <style>
            /* (行内, id, 类, 标签) */
            /* (0, 0, 0, 12) */
            div div div div div div div div div div div div {  
                color: red;
            }
            
            /* (0, 0, 1, 0) */
            .one { 
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div class="one">这行文字是什么颜色的？</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    • 第4题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第4题：权重相同此时比较层叠性</title>
        <style>
            /* (0, 0, 2, 1) */
            .c1 .c2 div { 
                color: blue;
            }
            
            /* (0, 1, 0, 1) */
            div #box3 {
                color:green;
            }
            
            /* (0, 1, 0, 1) */
            #box1 div {
                color:yellow;
            }
            /* 一样的话，谁在后面谁生效 */
        </style>
    </head>
    <body>
        <div id="box1" class="c1">
            <div id="box2" class="c2">
                <div id="box3" class="c3">
                    这行文本是什么颜色的？
                </div>
            </div>
        </div>
    </body>
    </html>

    • 第5题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第5题: 全是继承的特殊情况</title>
        <style>
            /* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
    ​
            /* 继承 */
            div p {
                color:red;
            } 
    ​
            /* 继承 */
            .father {
                color:blue;
            } 
        </style>
    </head>
    <body>
        <div class="father">
            <p class="son"> 
                <!-- span第一继承p然后才是继承father -->
                <span>文字</span>
            </p>
        </div>
    </body>
    </html>

盒子模型

  • 盒子模型的介绍

    • 盒子的概念

      • 1、页面中的每一个标签，都可看做是一个"盒子"，通过盒子的视角更方便的进行布局

      • 2、浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

    • 盒子模型

      • CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型

    • 记忆：可以联想现实中的包装盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 纸箱子、填充泡沫 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 === 纸箱子 */
            border: 1px solid #000;
            /* 内边距 == 填充泡沫 ： 出现在内容和盒子边缘之间 */
            padding: 20px;
​
            /* 外边距 ： 出现在两个盒子之间，出现在盒子的外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

  • 内容的宽度和高度

    • 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小

    • 属性：width / height

    • 常见取值：数字+px

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>文字</div>
    ​
    </body>
    </html>

  • 边框（border）- 连写形式

    • 属性名：border

    • 属性值：单个取值的连写，取值之间以空格隔开

      • 如：border : 10px solid red;

      • 不分先后

    • 快捷键：bd + tab

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* 粗细1像素 实线 黑色 */
                border: 1px solid #000;
                /* solid 实线； dashed 虚线； dotted 点线 */
                border: 5px dashed #000;
                border: 5px dotted #000;
            }
        </style>
    </head>
    <body>
        <div>内容</div>
    </body>
    </html>

  • 边框（border）- 单方向设置

    • 场景：只给盒子的某个方向单独设置边框

    • 属性名：border - 方位名词

    • 属性值：连写的取值

    <style>
        div {
            /* 只想要左边 */
            border-left: 5px dotted #000;
            /* border-right: 5px dotted #000;
            border-top: 5px dotted #000;
            border-bottom: 5px dotted #000; */
        }
    </style>

  • 盒子实际大小初级计算公式

    • 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？

      • 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！

    • 盒子实际大小初级计算公式：

      • 盒子宽度 = 左边框 + 内容宽度 + 右边框

      • 盒子高度 = 上边框 + 内容高度 + 下边框

    • 解决：当盒子被border撑大后，如何满足需求？

      • 解决：计算多余大小，手动在内容中减去（手动内减）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                /* border会撑大盒子尺寸 */
                /* 盒子尺寸= width/height + 边框线=400+10*2=420 */
                /* 如果只想要400*400尺寸 */
                /* width: 400px; */
                width: 380px;
                /* height: 400px; */
                height: 380px;
                background-color: green;
                border: 10px solid #000;
            }
        </style>
    </head>
    <body>
        <div>div</div>
    </body>
    </html>

  • 综合案例-新浪导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
​
        /* 后代: box里面的a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /*  */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
​
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
​
    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

  • 内边距（padding）- 取值

    • 作用：设置 边框 与 内容区域 之间的距离

    • 属性名：padding

    • 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            padding: 50px;
​
            /* padding 可以当作复合属性使用 ，表示单独设置某个方向的内边距*/
            /* padding 最多取4个值 上右下左 */
            padding: 10px 20px 30px 40px;
​
            /* 三个值 ：上 左右 下*/
            padding: 10px 40px 80px;
​
            /* 两个值 ： 上下 左右 */
            padding: 10px 80px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

 

  • 盒子实际大小终极计算公式

    • 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

      • 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子

    • 解决：当盒子被border和padding撑大后，如何满足需求？

    • 自己计算多余大小，手动在内容中减去（手动内减）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 撑大盒子的都有啥？border+padding */
            width: 240px;
            height: 240px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

     

  • （案例） 新浪导航的优化

    • 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航213456789</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

  • （拓展）不会撑大盒子的特殊情况

    • 不会撑大盒子的特殊情况（块级元素）

      • 1、如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

      • 2、此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

  • CSS3盒模型（自动内减）

    • 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

    • 解决方法 ② ：自动内减

      • 操作：给盒子设置属性 box-sizing : border-box ; 即可

      • 优点：浏览器会自动计算多余大小，自动在内容中减去

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 变成CSS3的盒子模型，好处：加了border和padding不需要手动减去 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

  • 外边距

    • 用法同内边距，只是一个是内，一个是外

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

  • 清除默认内外边距

    • 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置

    • 解决方法：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>ppppp</p>
    <p>ppppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

  • 版心居中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心：网页的有效内容 -->
    <!-- 版心一般100%水平居中 -->
    <div>版心</div>
</body>
</html>

  • （案例）网页新闻列表案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                /* 所有的标签都可能添加内边距或border, 都內减模式 */
                box-sizing: border-box;
            }
    ​
            .news {
                width: 500px;
                height: 400px;
                border: 1px solid #ccc;
                margin: 50px auto;
                padding: 42px 30px 0;
            }
    ​
            .news h2 {
                border-bottom: 1px solid #ccc;
                font-size: 30px;
    ​
                /* 行高是1倍, 就是字号的大小 */
                line-height: 1;
                padding-bottom: 9px;
            }
    ​
            /* 去掉列表的符号 */
            ul {
                list-style: none;
            }
    ​
            /* li {} */
            .news li {
                height: 50px;
                border-bottom: 1px dashed #ccc;
                padding-left: 28px;
                line-height: 50px;
            }
    ​
            .news a {
                text-decoration: none;
                color: #666;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <!-- 从外到内 -->
        <div class="news">
            <h2>最新文章/New Articles</h2>
            <ul>
                <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
                <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
                <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
                <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
                <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            </ul>
        </div>
    </body>
    </html>

  • 外边距折叠现象 – ① 合并现象

    • 场景：垂直布局 的 块级元素，上下的margin会合并

    • 结果：最终两者距离为margin的最大值

    • 解决方法：避免就好

      • 只给其中一个盒子设置margin即可

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
    ​
            .one {
                /* margin-bottom: 50px; */
                margin-bottom: 60px;
            }
    ​
            .two {
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <div class="one">11</div>
        <div class="two">22</div>
    </body>
    </html>

  • 外边距折叠现象 – ② 塌陷现象

    • 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

    • 结果：导致父元素一起往下移动

    • 解决方法：

      • 1、给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

      • 2、给父元素设置overflow：hidden

      • 3、转换成行内块元素

      • 4、设置浮动

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              .father {
                  width: 300px;
                  height: 300px;
                  background-color: pink;
      ​
                  /*padding-top: 50px;*/  /*son往下挪啦，但我就想用外边距来解决问题*/
      ​
                  /* 如果设计稿没有border，就不能使用这个解决办法 */
                  /* border: 1px solid #000; */
      ​
                  /* 完美 */
                  overflow: hidden;
      ​
      ​
              }
      ​
              .son {
                  width: 100px;
                  height: 100px;
                  background-color: skyblue;
      ​
                  margin-top: 50px;
      ​
                  /* display: inline-block; */
              }
          </style>
      </head>
      <body>
          <div class="father">
              <div class="son">son</div>
          </div>
      </body>
      </html>

 

  • 行内元素的margin和padding无效情况

    • 场景：给行内元素设置margin和padding时

    • 结果：

      • 1、水平方向的margin和padding布局中有效！

      • 2、垂直方向的margin和padding布局中无效！

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            span {
                /* margin: 100px; */     /* 上下有问题 */
                /* padding: 100px;     上下有问题 */
                line-height: 100px;     /* 解决方案*/
            }
        </style>
    </head>
    <body>
        <!-- 行内元素   内外边距    margin  padding -->
    ​
        <!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
        <!-- 行内标签的margin-top和bottom 不生效 -->
        <!-- 行内标签的padding-top和bottom 不生效 -->
        <span>span</span>
        <span>span</span>
    </body>
    </html>

     

posted @   守漠待花开  阅读(78)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS基础
·  CSS进阶
·  No.1.5
·  CSS03-盒子模型
·  CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况）
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示