1.两种盒模型
盒子模型（Box Modle）可以用来对元素进行布局，一个页面由多个盒子组成，每个盒子的内容都不相同。
盒子模型的组成：content内容、padding内边距、border边框、margin外边。
1.1 标准盒模型
在标准浏览器中的盒子默认都是标准盒模型。
content-box(内容盒):内容就是盒子的边界
box-sizing: content-box;//width不含padding、border，只是指内容物
在标准盒模型中，为盒子设置的width、height属性为content内容的宽度和高度，因此盒子模型的总宽度和总高度为：
总宽度 = width + 2 * padding + 2 * border + 2 * margin
总高度 = height + 2 * padding + 2 * border + 2 * margin
1.2 怪异盒模型
在怪异盒模型中，盒子的width、height属性为content内容+padding内边距+border边框的宽度和高度，因此盒子模型的总宽度和总高度为：
总宽度 = width + 2*margin
总高度 = height + 2*margin
2.块级盒子和内联盒子
不论是标准盒模型还是怪异盒模型，我们都广泛地使用两种“盒子” ——块级盒子和内联盒子。这两种盒子会在页面流和元素之间的关系方面表现出不同的行为。
块级的（block）盒子会表现出以下行为：
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
- width和height属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
- 除非特殊指定，诸如标题(
<h1>等)和段落(<p>)默认情况下都是块级的盒子。
内联的（inline）盒子会出现以下行为：
- 盒子不会产生换行。
- width和height属性将不起作用。
- 垂直方向的内边距、外边距以及边框会被应用,但是不会把其他处于inline状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
- 用做链接的
<a>元素、<span>以及<strong>都是默认处于inline状态的。
3.盒子模型的相关属性
3.1 边框属性border
| 属性 | 描述 |
|---|---|
| border-style | 边框线样式。常用的取值有none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线。 |
| border-width | 边框线宽度，不支持百分比值，支持数值与关键字：thin、medium、thick |
| border-color | 边框线颜色 |
| border | 综合设置，可以按照四边宽度 四边样式 四边颜色的格式设置，宽度、样式、颜色顺序任意，不分先后 |
| border-radius | 设置圆角边框，可以设置水平半径参数 / 垂直半径参数 |
| border-image | 设置图片边框，可以按照图片路径 裁切方式/边框宽度/边框扩展距离 重复方式的格式设置 |
以上三个属性都可以按照属性: 上边 右边 下边 左边(顺时针);的格式依次为border设置属性值，当然属性值有时并不需要全部都设置，例如：
/* 当只设置一个属性值solid，表示四条边均为实线 */
border-style: solid;
/* 当设置了两个属性值20px、10px，表示边框的上下宽度为20px，左右宽度为10px */
border-width: 20px 10px;
/* 当设置了三个属性值，表示上边框颜色为red，左右边框颜色为blue，下边框颜色为pink */
border-color: red blue pink;
注意:
- 在设置边框宽度时，必须同时设置边框样式
border-style，如果未设置样式或设置为none（默认值），则不论宽度设置为多少都无效。 - CSS在原边框颜色属性（
border-color）的基础上派生了4个边框颜色属性：border-top-color（上边颜色）、border-right-color（右边颜色）、border-bottom-color（下边颜色）、border-left-color（左边颜色）。 - 在边框综合属性（
border）的基础上有四个边框属性：border-top：上边框宽度 样式 颜色、border-right：右边框宽度 样式 颜色、border-bottom：下边框宽度 样式 颜色、border-left：左边框宽度 样式 颜色。
border-image属性必须和边框样式border-style同时使用，否则不会显示，设置时可以搭配border-width，可以让显示的图片更大。
3.2 内边距属性padding
| 属性 | 含义 |
|---|---|
| padding-top | 上边距 |
| padding-right | 右边距 |
| padding-bottom | 下边距 |
| padding-left | 左边距 |
| padding | 按照上 右 下 左设置 |
对于padding的属性值，有这么两点需要注意:
- padding不支持负值
- padding支持百分比值，padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的。
3.2.1 块级元素的内边距
<style>
.box{
width: 300px;
height: 300px;
background-color: #e6a23c;
}
.child {
width: 100px;
height: 100px;
padding: 25%;
background-color: #409eff;
}，
</style>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
界面如下:
child盒子展示出来的蓝色区域是250px*250px。因为250=100+(25%*300)*2
3.2.2 内联元素的内边距
内联元素，就会有下面这样的表现：
- 同样相对于宽度计算
- 默认的高度和宽度细节有差异
- padding会断行
<style>
.box{
width: 300px;
height: 300px;
background-color: #409eff;
}
span {
padding: 50%;
background-color: orange;
}
</style>
<body>
<div class="box">
<span>橘猫吃不胖</span>
</div>
</body>
我们可以看到，在上面的效果图中，有一些奇怪的地方，比如说“橘”字不见了，文字是居右显示的，背景区域并非是一个矩形，而且宽度和外部容器宽度不一致等。
对于内联元素，其padding是会断行的，也就是说padding区域是跟着内联盒模型中的行框盒子走的。
上面的例子由于文字比较多，一行显示不了，于是“胖”字换到了下一行，于是，原本的padding区域也跟着一起掉下来了，根据后来居上的层叠规则，“橘”字正好被覆盖了；同时，规则的矩形区域因为换行，也变成了五条边；至于宽度和外部容器盒子不一样宽，是因为文字内容将宽度撑大了。
3.3 外边距属性margin
| 属性 | 含义 |
|---|---|
| margin | 四边外边距 |
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
当使用margin来设置外边距时，也遵循属性: 上 右 下 左;的设置方式，例如：
/* 当只设置一个属性值时，表示四个外边距相同，都是10px */
margin: 10px;
/* 当设置了两个属性值时，表示上下外边距10px，左右外边距20px */
margin: 10px 20px;
/* 当设置了3个值时，表示上外边距10px，左右外边距20px，下外边距30px */
margin: 10px 20px 30px;
/* 当设置了4个值时，表示上右下左分别是10px、20px、30px、40px */
margin: 10px 20px 30px 40px;
3.4 背景属性background
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图像 |
| background-repeat | 背景图像的平铺属性，值可以取：repeat：默认值，表示沿水平、垂直方向平铺；no-repeat：不平铺，只显示一张图片；repeat-x：沿水平方向平铺；repeat-y：沿垂直方向平铺 |
| background-position | 背景图像的位置属性，位置属性取值可以为单位数值（例如background-position: 20px 20px;）、预定义的关键字（right、top等）或者百分比（0%, 0%：图像左上角与元素左上角对齐；100%, 100%：图像右下角与元素的右下角对齐） |
| background-attachment | 背景图像的固定属性，scroll：默认值，背景图像会随内容一起滚动；fixed：背景图像位置固定不动 |
| background | 综合设置背景色 url(“图像”) 平铺 定位 固定 |
3.5 阴影属性box-shadow
格式为：
box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset;
4.边距折叠问题
内边距不会折叠!!!
4.1 两种外边距折叠
4.1.1 兄弟元素外边距合并(对开发有利)
注意:垂直方向才会有
- 一正一负
取二者之和 - 两正
取二者值大者 - 两负
取二者绝对值较大者。
下面举个例子:
.div1{
margin-bottom: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
.div2{
margin-top: 20px;
width: 100px;
height: 100px;
background-color: #aaaa;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
示例效果：
4.1.2 父子元素外边距塌陷(对开发有害，必须解决)
父子元素外边距折叠发生的前提条件是：二者垂直外边距之间没有padding、border，开发中常见body的儿子元素设置margin-top会导致body下移。文档流中父元素的第一个子元素的margin-top会向上寻找padding或者border,如果找不到会把自己的margin-top给父元素。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.box1{
border: 1px solid pink;
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
}
.box3{
margin-top: 10px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
效果示例：
4.2 解决父子元素外边距折叠问题
解决办法如下:
- 父子合并用padding/border(透明边框)挡住
- 给父元素添加overflow:hidden(开启BFC)
- 给父元素设置浮动；给父元素设置固定定位、绝对定位;(开启BFC)
- 父元素和第一个子元素或者最后一个子元素之间添加内联元素进行分隔。
4.2.1 父子合并用padding/border(透明边框)挡住
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.box1{
border: 1px solid pink;
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
//高度：100-1
width: 99px;
height: 99px;
background-color: yellow;
//设置透明边框
border: 1px solid transparent;
}
.box3{
margin-top: 10px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
4.2.2 给父元素添加overflow:hidden(开启BFC)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.box1{
border: 1px solid pink;
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
//给父元素添加overflow:hidden(开启BFC)
overflow: hidden;
}
.box3{
margin-top: 10px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
4.2.3 给父元素设置浮动；给父元素设置固定定位、绝对定位;(开启BFC)
这个不用多说，本质其实也是开启BFC。BFC详细内容可见我写的文章中的3.3.2。也可以自己在网上搜索一下是啥。
扫一扫
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
