盒子模型
盒子模型是一整套布局规范，它可以帮助我们更深入的去了解页面中元素的结构，可以很清淅的展示HTML元素与CSS结合以后的特点
网页当中的每一个元素我们都可以把它看成是一个盒子， 通过这些盒子我们可以拼出我们想要的所有布局形式。所以对于盒子模型的学习其实就是对网页布局规范的学习
如果想查看元素的盒子模型 ，我们可以在页面上面打开调试工具栏（不同的浏览器打开方式不一样，chrome浏览器可以通过按键盘F12或Ctrl+Shift+I去打开），打开工具栏以后，我们看到如下的图
通过上面的图片，我们可以看出盒子模型里面最初的4层，分别是margin（外边距）---->border（边框）---->padding（内边距）---->content（内容）
margin外边距
margin指的是元素的外部间距，它可以设置1~4个属性值，值的个数不同，表示的意义也不相同
- 如果margin只设置一个值，则代表四个方向都相同
- 如果margin设置了两个值，第一个值代表上边，第二个值代表右边，剩下没有值的则参照对边
- 如果margin设置了三个值，第一个值代表上边，第二个值代表右边，第三个值代表下边，剩下没有赋值的参照对边
- 如果margin设置了四个值，则按照上右下左的顺序一边一个
综合所述，margin在赋值的时候，有值就给值，没值就参照下面的顺序来进行。并且它的赋值顺序是顺时针进行的
同时这margin的四个值也可以分开来设置它分别对应的是下面四个属性
margin-top上边距margin-bottom下边距margin-left左边距margin-right右边距
margin可以设置普通的像素为单位，同时它还有一个特殊的属性值auto
第一步
.div1{
margin-left:auto;
}
这个时候我们会披到盒子跑到了屏幕的右边
第二步：我们现在给它加上一个margin-right:auto
.div1{
margin-left:auto;
margin-right:auto;
}
这个时候我们会看到盒子跑到了屏幕的正中间
第三步：根据上面的赋值语法，代码可以简写成如下格式
.div1{
margin:0px auto;
}
第四步：盒子的上面边距里面默认情况下就是0，所以在上下的方向的margin上面0与auto是相等的,这个时候的代码就可以写成margin:auto auto，最终演变成如下所示
.div1{
margin:auto;
}
margin折叠（margin穿透）问题
说明：当两个盒子进行嵌套的时候，内部盒子的上下外边距体现在了外部盒子的上面，这种现象我们就叫margin的穿透折叠现象。具体请看下面代码
<style type="text/css">
body{
margin: 0;
}
.div1{
width: 200px;
height: 200px;
background-color: lightskyblue;
}
.div2{
width: 100px;
height: 100px;
background-color: red;
margin-top: 70px;
}
</style>
<div class="div1">
<div class="div2">
小盒子
</div>
</div>
这个时候我们可以看到，红色盒子的外边距体现在了外部蓝色盒子上面
本质原因：因为外边的盒子没有border边框，导致不是能够包含内部盒子的margin外边距
解决方案：
-
在外部的元素上面添加一个透明外边框
border:1px solid transparent;这种方式可以解决这个问题，但是我不推荐，因为这样会改变元素本身的大小
-
使用
BFC方案去解决
padding内边距
padding指的是盒子模型里面的元素内边距，它与margin非常相似，也可以设置1~4个值
一个盒子的内边距其实也可以理解成另一个盒子的外边距。
当我们去设置盒子的内边距的时候，我们会发现一个特点，盒子的大小发生了改变，如下图所示
.div1 {
border: 1px solid black;
width: 200px;
height: 100px;
padding-left: 48px;
}
| 效果图 | 盒子模型图 |
|---|---|
 |  |
之前的时候，在没有添加内边距padding的时候，整个盒子模型的大小就是200宽度+两边的边框2px=202px
但是在设置了padding值以后，整个盒子模型的大小就变成了200宽度+两边的边框2px+48px的padding=250px
针对上面的现象就导致我们在使用padding的时候非常麻烦，不能够固定盒子模型的大小。所以W3C在CSS3里面就出了一个新的属性专门用于规范盒子模型的这种大小问题，这个属性就是box-sizing
box-sizing属性
它是的CSS3的属性，用于规范盒子模型的大小，用于规定width/height的设置范围，它有两个属性值content-box与border-box
content-box
它是box-sizing属性的默认值，这个时候代表当前CSS里面的width/height以盒子里面的content为标准来设置的，无论我们再更改盒子的border或者padding都不会影响content的大小，但是整个盒子模型的大小会发生改变，如下所示
<style type="text/css">
.div1{
background-color: pink;
/* 默认值 */
box-sizing: content-box;
width: 200px;
height: 100px;
border: 5px solid black;
padding-left: 40px;
}
</style>
<div class="div1">
这是第一个盒子
</div>
通过上面的图，我们可以很清楚的看到content的大小是200*100,边框的宽度是5px，左边的内边距是40px，整个盒子模型的大小就是200+5+5+40=250。这个时候我虽然设置的width:200px，但是整个盒子模型的大小已经变成了250px了
border-box
它代表的是这个元素上面的width/height以盒子模型里面的border为标准，固定了盒子模型的大小，而content则可以改变，这样无论怎么设置border与padding整个盒子模型的大小都不会发生改变
<style>
.div2{
background-color: lightskyblue;
box-sizing: border-box;
width: 200px;
height: 100px;
border: 5px solid black;
padding-left: 40px;
}
</style>
<div class="div2">
这是第二个盒子
</div>
| 效果图 | 盒子模型图 |
|---|---|
 |  |
综上所述可以这么理解
border-box是规定了盒子模型的大小不可改变，而content的大小是可以改变的content-box是规定了盒子里面的content大小不可改变，而整个盒子模型的大小可以改变
元素类型
网页将元素分为大致上的三类，它分别是块级元素，行内元素，以及行内块级元素。三种元素类型根据自身元素的特点所表现出来的盒子模型也不相同
块级元素
块级元素是页面上面布局中最重要的一个元素，也是盒子模型的根本，它遵守标准的盒子模型规范。网页当中常见的块级元素有p,标题标签,div，table，ul等。块级元素的特殊有如下几种情况
- 块级元素独自占用一行
- 块级元素的宽度默认是父级元素宽度的100%，高度默认是0，但是可以由内容去撑高
- 可以通过
width/height去设置元素的宽度与高度 - 块级元素的左右居中是在当前元素上面添加
margin:auto - 块级元素遵守标准盒子模型规范，它的
margin/padding/box-sizing都是标准的
行内元素
行内元素是与块级元素的特性相对应的元素，常见的行内元素有a,label,span等这些标签，这些标签具备如下几个特征
- 行内元素默认排列在同一行，如果在代码里面换行了，则会在页面上面产生一个空格位（解决方法就是要么不换行，要么在外层的元素上面设置一个
font-size:0px） - 行内元素的宽度、高度默认是0，它的宽度与高度是由内容来撑开的
- 行内元素不能通过
width/height来设置元素的宽度与高度 - 行内元素不遵守标准的盒子模型规范，只有
margin-left/margin-right，没有margin-top/margin-bottom - 行内元素不遵守标签的盒子模型规范，它的
padding-left/padding-right正常，但是padding-top/padding-bottom对自己有效果，不能撑开外部的元素的高度 - 行内元素的左右居中是在其外层的块级元素或行内块级元素上面添加
text-align:center - 所有的文字都是行内元素
行内块级元素
在网页里面，有一些元素既具备块级元素的特点，也具备行内元素的特点，如img标签，我们之前学过的表单标签等，对于这样的元素，我们就把它叫做行内块级元素。它们具备如下几个特征
- 行内块级元素默认排列在同一行，代码换行以后在页面也会呈现出一个空格位（解决方法就是要么不换行，要么在外层的元素上面设置一个
font-size:0px） - 行内块级元素可以通过内容撑开自己的宽度高度，也可以通过
width/height去设置宽度高度 - 行内块级元素的左右居中，遵守行内元素标准，在其外层的块级元素或行内块级元素上面设置
text-align:center - 行内块级元素遵守标准的盒子模型规范
- 行内块级元素如果在块级元素中撑开高度的时候，外层的块级元素高度会多出
3px,解决方案有如下两种情况- 将行内块级元素转换成块级元素
- 在当前的行内块级元素上面添加
vertical-align:middle
三种元素的盒子模型图
不同类型的元素所表现出来的盒子模型图是不一样的，现在我们就来看一看它们的盒子模型图
.box1 {
width: 200px;
height: 200px;
border: 1px solid black;
}
a {
border: 1px solid red;
}
img {
border: 1px solid black;
}
| 块级元素 | 行内元素 | 行内块级元素 |
|---|---|---|
 |  |  |
- 首先我们可以看到行内元素的盒子模型里面content没有标记盒子的大小，而块级元素与行内块级元素都标记了content的大小
- 块级元素的
200*200是我们通过width与height来设置的，而行内块级元素里面的200*200则是图片本身的大小，当然它也可以通过width/height来设置【行内块级元素本身应该是存在大小的】
元素类型转换
页面上面普遍存在的就是这三种元素类型，在这三种元素类型里面，它们其实是可以相互转换（有些是我们手动的转换的，有些是系统自已的转换的）
- 块级元素
display:block - 行块元素
display:inline - 行内块级元素
display:inline-block
通过这个display属性，我们可以将这个元素的类型进行相互的转换。当元素在进行类型转换完成以后就会满足转换以后的元素类型特征
.
评论区