CSS核心样式-02-盒模型属性及扩展应用

三、盒模型属性

常见盒模型区域

盒模型图

盒模型五大属性

1. 宽度 width

2. 高度 height

3. 内边距 padding

四值法

三值法

二值法

单值法

案例

4. 边框 border

按照属性值的类型划分为三个单一属性

①线宽 border-width

②线型 border-style

③边框颜色 border-color

根据边框的方向划分为四个单一属性

根据方向和类型综合划分

5. 外边距 margin

四个单一属性

复合属性的四种值的写法

四、盒模型扩展应用

1. 清除默认样式

①清除盒模型的内外边距

标签选择器的并集方式

通配符方式

②清除 ul 和 ol 两种列表的默认前缀

③清除 a 标签默认样式

④清除默认加粗效果

⑤设置初始化的公共样式

2. height 应用

情况一：必须设置高度

溢出盒子

overflow解决溢出问题

情况二：必须不设置高度

3. 居中

① 文本水平居中

② 文本垂直居中

单行文本垂直居中

多行文本垂直居中

③ 元素垂直居中

④ 元素水平居中

4. 父子盒模型

父元素的width ≥ 所有子元素width + padding + border + margin

特殊情况：盒模型自动内减

5. margin 塌陷现象

同级元素塌陷

父子元素塌陷

解决 margin 塌陷问题的方法

同级元素

父子元素

三、盒模型属性

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：

• 书写元素内容区域：width+height

• 盒子可以实体化的区域（也就是可以添加颜色显示出来的区域）：width+height+padding+border

• 盒子实际占位的位置：width+height+padding+border+margin

盒模型图

学习过程中，学会查看浏览器控制台（右侧 computed 部分）中的盒模型图：

盒模型五大属性

盒模型五大属性分别是：

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

1. 宽度 width

作用：设置可以添加元素内容的区域的宽度。
属性值：

<!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>
        .box {
            width: 300px;
            background-color: red;
        }
        p {
            width: 50%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这是一段文字</p>
    </div>
</body>
</html>

p 的父级是 box，box 的父级是 body，p 的宽度就是 box 宽度的50%。

• 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 div 、p 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 100%区域，如果是 span 元素等不需要独占一行的，其 width 属性的值是根据内部元素内容自动撑开的宽度。

• body 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

2. 高度 height

作用：设置可以添加元素内容的区域的高度。
属性值：

与宽度 width 的属性值设置非常类似。

• 如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

3. 内边距 padding

作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用 px 为单位的数值。
如果设置 padding: 50px; 则上下左右四个方向的内边距都是 50px 。

padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左。

有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。

padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。

根据四个方向属性值不同，padding 有多种值的书写表示方法。

根据 padding 的属性值的个数不同，区分了四种表示法：

四值法

设置四个属性值，分配方向上、右、下、左。

三值法

设置三个值分配给上、左右、下。

二值法

设置两个值，分配给上下、左右。

单值法

设置属性值只有一个，分配方向上右下左，四边的值相同。

案例

制作三边内边距相同，一边不同。

方法①：使用四值法（10px 10px 10px 20px）、三值法（10px 10px 20px），进行属性值设置。

方法②（推荐使用）：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分。

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 10px;
            padding-right: 20px;
        }
        p {
            background-color: yellow;
        }
    </style>

让单一属性层叠掉综合属性中的某一个。案例中先写综合属性 padding: 10px; 使得四个方向内边距都是 10px ，然后想让哪个边不同就写哪个边，比如想让右边不同就写 padding-right: 20px; 即可实现，并且减少出错。

其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分。

4. 边框 border

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。

属性值：由三个值组成，分别为线的宽度、线的形状、线的颜色 。

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid green;
        }
    </style>

border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。

按照属性值的类型划分为三个单一属性

划分为：

线宽：border-width

线型：border-style

颜色：border-color

①线宽 border-width

作用：设置边框线的宽度。
属性值：常用 px 形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法，即单值法二值法三值法四值法。

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
        }
    </style>

②线型 border-style

作用：设置边框的线条形状。
属性值：形状的单词，总体也是类似 padding 的综合属性写法，也有单值法二值法三值法四值法的写法。
属性值的单词可能性：

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
            border-style: dashed solid groove inset;
        }
    </style>

③边框颜色 border-color

作用：设置边框的颜色。

属性值：颜色名或颜色值，整体类似 padding 综合属性写法，也有单值法二值法三值法四值法的写法。

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
            border-style: dashed solid groove inset;
            border-color: red green yellow blue;
        }
    </style>

根据边框的方向划分为四个单一属性

划分为：

上边框：border-top

右边框：border-right

下边框：border-bottom

左边框：border-left

每个单一属性都必须与复合属性 border 一致，设置三个属性值。

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-top: 10px solid green;
        }
    </style>

根据方向和类型综合划分

类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分。

单一属性写法：border-方向-类型。

注意：细分时必须先写方向划分再写类型划分，否则属性名错误。

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-top-color: green;
        }
    </style>

5. 外边距 margin

作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样。

四个单一属性

上 margin‐top: 20px;

右 margin‐right: 20px;

下 margin‐bottom: 10px;

左 margin‐left: 20px;

复合属性的四种值的写法

四值法 margin: 10px 20px 30px 40px;

三值法 margin: 10px 20px 30px;

二值法 margin: 10px 20px;

单值法 margin: 10px;

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 10px 20px 30px 40px;
        }

四、盒模型扩展应用

虽然我们了解了盒模型的五个属性的基本语法，但是在实际工作中还有更多的方法和技巧需要掌握，因此，我们需要扩展对盒模型的应用知识。

1. 清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

①清除盒模型的内外边距

盒模型（例如 body、div、p 等）属性中的内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符全部清除。

本来设计图没有边距，但是这里都有默认边距，所以要清除默认样式：

标签选择器的并集方式

 <style>
       /* 标签选择器并集方式清除默认样式（可以提前考虑到还没写的标签） */
       body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li {
        margin: 0;
        padding: 0;
       }
 </style>

通配符方式

也可以使用这种简便方法，但仅仅适合一些小的案例

    <style>
       /* 通配符方式清除默认样式（通配符选中所有标签） */
       * {
        margin: 0;
        padding: 0;
       }
    </style>

通配符会选择所有，而标签选择器的并集方式会有针对性的进行选择，所以标签选择器的并集方式的效率要高一些。

在实际项目中，一般用标签选择器的并集方式，如果是一些小案例，为了简化代码量可以使用通配符的方式。

②清除 ul 和 ol 两种列表的默认前缀

<ul> 和 <ol> 两种列表有默认的列表前缀，清除方式：使用 list-style 属性。

    <style>
       /* 清除 ul 和 ol 两种列表的默认前缀 */
       ul,ol {
        list-style: none;
       }
    </style>

③清除 a 标签默认样式

清除<a> 标签的默认样式，顺带设置页面中常用的 a 的公共样式：设置 color 和 text-decoration（可以通过设置color 使得a标签跟其他字体颜色一致，text-decoration设置清除下划线，主要就是想让a标签跟其他字体看起来一样，如果想让有的a标签不这样可以单独设置属性覆盖掉这个）。

    <style>
       /* 清除 a 标签默认属性 */
       a {
        color: blueviolet;
        text-decoration: none;
       }
    </style>
</head>
<body>
    <a href="">这是一个a标签</a>
</body>

④清除默认加粗效果

一些标签默认带加粗效果，比如h1-h6，b，strong，

清除默认加粗效果：设置font-weight。

    <style>
       /* 清除默认加粗效果 */
       h1,h2,h3,h4,h5,h6,b,strong {
        font-weight: normal;
       }
    </style>

⑤设置初始化的公共样式

一般除了清除默认样式之外，做项目时还会设置初始化的公共样式。

可以给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承（body里面的所有标签都可以继承，注意h1-h6标题，他们也继承，但是他们有自己的font-size，所以继承的body的就被层叠掉了，所以他们的字体还是自己原来的样式）。

    <style>
       /* 设置初始化的公共样式 */
       body {
        color: blue;
        font-size: 20px;
        font-family: Arial, "宋体";
       }
    </style>

2. height 应用

根据不同的需求，高度属性可以设置也可以不设置。
• 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着在后面加载。
• 如果不设置高度：会根据标签内部内容高度自动撑开。

以 <div> 标签为例，根据情况不同选择是否设置高度：

情况一：必须设置高度

设计图中盒子高度占位是固定的，后面同级元素在高度下面加载，这时候就必须设置高度。

溢出盒子

设置高度会产生一种情况：自身盒子内部内容过多会溢出盒子区域

盒子内部内容过多，但是盒子只有200px的高度，设置了高度后即使盒子装不下这些内容但是盒子也不会被撑开，这就是设置高度之后产生的效果。

而span没有被挤走，还是在盒子下方。

overflow解决溢出问题

对于这个问题，可以使用overflow 溢出属性进行解决。

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

visible跟上面出现的情况一样

hidden是经常使用的（溢出隐藏）

scroll在水平和竖直方向各出现一个滚动条，溢出方向出现滑块

auto，类似于文本域textarea，无溢出就正常显示，有溢出就出现滚动条。

auto是哪个方向溢出就哪个方向出现滚动条，不溢出的不会出现；而scroll是无论是否溢出两个方向都会出现滚动条，而只有溢出的才会出现滑块进行滑动。

情况二：必须不设置高度

设计图要求盒子高度必须自适应内部内容的高度，这是就不能设置高度。

比如一些新闻下面有评论区，有的新闻长有的短，新闻设置自适应，新闻内容有多少盒子就自动撑高多少，评论区就在新闻下面。
这时可以选择不设置高度，或者设置height的属性值是自动的，二者效果相同。

    <style>
       /* 设置高度为自动 */
       div {
        width: 200px;
        height: auto;
        border: 1px solid black;    
       }
    </style>

3. 居中

在网页中经常见到元素或者文字居中的效果。

① 文本水平居中

水平居中：text-align属性。（不论单行或多行都用这一条属性可以设置）

    <style>
       /* 设置文本水平居中 */
       p {
        width: 200px;
        height: auto;
        border: 1px solid black; 
        text-align: center;   
       }
    </style>

② 文本垂直居中

单行文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height

（因为文字在自己的行高中是垂直居中的，所以让文字行高等于盒子高度，那么文字就可以在盒子垂直居中了）。

    <style>
       /* 设置文本水平居中 */
       p {
        width: 200px;
        height: 200px;
        border: 1px solid black; 
        text-align: center;   
        line-height: 200px;
       }
    </style>

多行文本垂直居中

多行文本垂直居中：让存放文本的元素高度自适应或者设置元素内边距上下值相同。

不设置元素高度：

设置元素内边距上下值相同：

    <style>
       /* 设置文本垂直居中--设置元素内边距上下相同 */
       p {
        width: 200px;
        border: 1px solid black; 
        text-align: center;  
        padding: 20px 0; 
       }
    </style>

③ 元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

    <style>
       /* 设置元素垂直居中 */
       /* 不给父元素设置高度让其自适应，但设置内边距上下相同 */
       .box {
        width: 200px;
        border: 2px solid greenyellow;
        padding: 20px 10px;
       }
       .demo {
        width: 100px;
        height: 100px;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo"></div>
    </div>
</body>

④ 元素水平居中

针对类似 <div> <p>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。（父子都是独占一行的盒子）
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

    <style>
       /* 设置元素水平居中 */
       /* 父元素设置不变，子元素设置magin左右都为auto */
       .box {
        width: 200px;
        border: 2px solid greenyellow;
        padding: 20px 10px;
       }
       .demo {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 0 auto;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo"></div>
    </div>
</body>

4. 父子盒模型

父元素的width ≥ 所有子元素width + padding + border + margin

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来，不能在一排，要么溢出父元素

（float: left;浮动属性，添加后就可以让本来独占一行的四个<p>标签排成一排）

    <style>
        /* 首先清除一下默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
       .box1 {
        width: 1000px;
        height: 100px;
        border: 1px solid green;
       }
       .box1 p {
        float: left;
        width: 200px;
        height: 100px;
        background-color: blue;
        margin-right: 10px;
       }
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>

否则，比如将子盒子的magin-right的值改为60px，子盒子就会掉下来：

magin-right的值极限是50px，子盒子刚好排成一排；51px都不可以。

另一种情况：父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。他不会出现上述那种掉下去的情况，但是他会出现溢出的情况。

父盒子是200×200，但是子盒子是（200+20）×（200+20），子盒子溢出。

经过上述两种情况：

所以，后续做项目时，计算或量取尺寸时一定要计算准确，一像素都不能偏差。

特殊情况：盒模型自动内减

对于上面第二种，即父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的，有一种特殊的解决方式，即盒模型自动内减的方式。

解决方式：不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。

如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减（像上面那种，要想子盒子不超出父盒子，width要变成180，加上border的20才能刚好是200，不需要手动减，如果不设置子元素的 width 属性运行程序会自动将width变成180），子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。