前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）

盒子模型

什么是盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

网页中所有元素都具备以下四个属性：
首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height

盒模型的相关属性

内容属性（width、height）

width属性：元素的宽度
height属性：元素的高度

属性值：auto|数值|inherit; 继承inherit
宽度/高度等于auto相当于没有设置宽度/高度效果一样

max-width属性:最大宽度 min-width 最小宽度
max-height 最大高度 min-height 最小高度

内边距（padding）

padding 属性:内填充、内边距，元素便可和元素内容之间的空白区域

单边的内填充

padding -top   上内填充
padding-right   右内填充
padding-bottom 下内填充
Padding-left     左内填充

文字在内容区显示不在padding区显示
padding区域会显示background-color的颜色

填充是内容区和边框之间的空间。填充的属性有五种，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

复合写法：
padding:10px; 四周10
padding:10px 20px;  上下10  左右20
padding:10px 20px 30px; 上10 左右20 下30
padding:10px 20px 30px 40px;上10 右20 下30 左40

注意：百分比–上下内填充与左右填充百分数的数值是相对于父级的width宽度计算的；

边框（border）

border属性：边框

border-width 边框宽度
border-style 边框样式
border-style：none 默认没有
border-style：solid 实现
border-style：double 双实线
border-style：dashed 条状
border-style：dotted 点状
border-color 边框颜色默认边框颜色元素本身的前景色
border-color:red yellow pink blue;

复合写法：

border: 1px  solid  red;

顺序为：width style color

border-Radius边框圆角

Border-Radius  20px  四周10px   30px       左上右下10px  右上左下30px10px 20px 30px   左上10  右上左下20px  右下3010 20 30 40     左上10 右下20 右上30 左下40
border-top-left-radius:30px
border-top-right-radius:30px
border-bottom-left-radius:30px
border-bottom-right-radius:30px

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果

外边距（margin）

属性外间距、外边距–定义元素周围的空间
margin-top \right\left\bottom 外边距
写法和padding一样，都是上右下左

margin:0 auto; 可以直接实现一个元素在另外一个元素内水平居中，前提是这个元素需要固定宽。

<!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>我的第一个页面</title><style>.div1 {width: 300px;height: 200px;padding: 5px 10px;border: 2px solid #333;margin: 10px 5px;}.div2 {width: 100px;margin: 0 auto;}</style>
</head><body><div class="div1"><div class="div2">我是内容</div></div>
</body></html>

margin值的问题

1、父子关系外边距塌陷问题–元素嵌套关系，子元素的margin值会叠加给父元素，
现象:给子元素设置外间距，会和父元素的外间距合并，最终会表现其中较大的外间距的值。

原因：父盒和子盒公用一个上外间距的区域
解决：
1.Border-top:1px;
2.Padding-top:1px;
3.给父级元素添加overflow:hidden属性；触发BFC，改变父元素的渲染规则；

2、 兄弟关系的外边距叠加–元素并列关系，垂直方向上相邻的margin值会相遇出现叠加
现象：上一个盒子设置下外边距下一个盒子设置上外边距，两个值相同取当前值，如果两个值不同，取较大值；
原因：上下两个兄弟关系的盒子共用一个外间距区域
解决方法：给两个盒子各加一个父级盒子，父级添加overflow：hidden，或者生成BFC

盒子的实际宽度=
width属性 + padding-left + padding-right + border-left + border-right
盒子的总宽度=
width属性 + padding-left + padding-right + border-left + border-right+ margin-left + margin-right

盒子的实际高度=
height属性 + padding-top + padding-bottom + border-top + border-bottom
盒子的总高度=
height属性 + padding-top + padding-bottom + border-top + border-bottom+ margin-top + margin-bottom

标准盒子模型和怪异盒子模型（IE的盒模型）

在标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width).

而在怪异盒模型中：一个快的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。

两种模式的转换（通过box-sizing的方法）

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式。

当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；