目录
父元素的width ≥ 所有子元素width + padding + border + 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 。
5. margin 塌陷现象
margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离（中间没有padding 或者border将两个元素隔开），导致两个属性相遇，发生margin 塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
解决 margin 塌陷问题的方法
同级元素
同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
想让上面盒子与下面盒子之间有50px间距时，没必要将50拆成20和30，只需要将50给其中任何一个元素即可。
父子元素
父子元素：
让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；
更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。（一般不用子元素的magin，而是使用父级的padding）
另外注意：水平方向的 margin 没有塌陷现象。