CSS盒子模型详解

1.总述

盒子模型（box model）：
CSS将页面中的所有元素都设置为了一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置。

• content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。
• padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。
• border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。
• margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。
• 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
• 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2.内容区content

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型
元素中的所有的子元素和文本内容都在内容区中

• width 设置内容区的宽度
• height 设置内容区的高度

3.边框border

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。边框的大小会影响到整个盒子的大小

• border-width
  边框的宽度：默认3px
  四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右一个值：上下左右
  其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来
  border-top-width 上边框的宽度
  border-right-width 右边框的宽度
  border-bottom-width 下边框的宽度
  border-left-width 左边框的宽度
• border-color
  边框的颜色：默认使用color的颜色值
  border-top-color 上边框的颜色
  border-right-color 右边框的颜色
  border-bottom-color 下边框的颜色
  border-left-color 左边框的颜色
• border-style
  边框的样式：默认值none
  /*
  solid 实线
  dotted 点状虚线
  dashed 虚线
  double 双线
  */
  border-top-style 上边框的样式
  border-right-style 右边框的样式
  border-bottom-style 下边框的样式
  border-left-style 左边框的样式
  -border: solid 10px orange简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

画三角形：
设置边框为transparent，内容宽高为0，然后只修改一边或两边的颜色即可。

4.内边距padding

内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延申。
padding 指定四个方向的边距

• padding-top 上内边距
• padding-right 右内边距
• padding-bottom下内边距
• padding-left 左内边距

盒子可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。

5.外边距margin

外边距，位于盒子的最外围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

margin 四周外边距

• margin-top 上外边距 正值元素向下移动，负值元素向上移动
• margin-right 右外边距 正值其右边的元素向右移动，负值其右边的元素向左移动
  对于块元素，设置margin-right不会产生任何效果
• margin-bottom 下外边距 正值其下边的元素向下移动，负值其下边的元素向上移动
  对于块元素，会有垂直方向上的边距重叠问题
• margin-left 左外边距 正值元素向右移动，负值元素向左移动
  元素在页面中是按照自左向右的顺序排列的，所以默认情况下
• 设置的左和上外边距则会移动元素自身
• 设置下和右外边距会移动其他元素

6.水平布局

7.垂直布局

元素溢出
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow overflow-x overflow-y属性来设置父元素如何处理溢出的子元素
可选值

• visible 溢出内容被显示在父元素的外部位置，默认值
• hidden 溢出内容被裁剪不显示
• scroll 生成两个滚动条，通过滚动条来查看完整的内容
• auto 根据需要生成滚动条

外边距折叠
垂直外边距的重叠
相邻的垂直方向外边距会发生重叠现象

• 兄弟元素之间
  如果两个相邻元素的上下外边距相遇，那么会产生外边距折叠
• 父元素与它的第一个元素或者最后一个元素之间
  父元素与它的子元素之间隔着边框、内边距、内容。如果这些没有了，那么父元素和子元素的外边距相邻，就会发生外边距折叠
• 空的块级元素
  盒模型是内容、内边距、边框、外边距，如果margin-top和margin-bottom相遇了，就会产生外边距折叠

一言以蔽之，不能让两个垂直 margin 相遇，否则就会发生外边距折叠

避免外边距折叠的方法

• 浮动元素不会与任何元素发生叠加，也包括它的子元素
• 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
• inline-block 元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
• 创建了 BFC 的元素不会和它的子元素发生外边距叠加 (兄弟元素还是会叠加)

兄弟元素

• 如果相邻的外边距都是正值，取两者之间的较大值
• 如果相邻的外边距一正一负，则取两者的和
• 如果相邻的外边距都是负值，则取两者中绝对值较大的

总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理

8.补充属性

盒子大小 box-sizing：content-box 默认值，宽度和高度用来设置内容区的大小；border-box 宽度和高度用来设置整个盒子可见框的大小

轮廓 outline：用来设置元素的轮廓线，用法和border不同点是，轮廓不会影响到可见框的大小，一般用于：

.box:hover {
    outline: 10px red solid;
}

阴影 box-shadow：box-shadow用来设置元素的阴影效果，阴影也不会影响页面布局
一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述
●第一个值-水平偏移量：设置阴影的水平位置，正值向右移动，负值向左移动
●第二个值-垂直偏移量：设置阴影的垂直位置，正值向下移动，负值向上移动
●第三个值-阴影的模糊半径
●第四个值-阴影的颜色

圆角 border-radius：border-radius 用来设置圆角，圆角设置的是圆的半径大小
●
border-top-left-radius
●
border-top-right-radius
●
border-bottom-right-radius
●
border-bottom-left-radius
border-radius 可以分别指定四个角的圆角，从左上顺时针方向
●
四个值：左上 右上 右下 左下
●
三个值：左上 右上/左下 右下
●
两个值：对角一样
●
一个值：全部一样

9.盒模型种类

1. 标准盒模型

外盒尺寸计算（元素空间尺寸）

element 空间高度 = 内容高度 （height）+ 上下内距（padding） + 上下边框（border） + 上下外距（margin）
element 空间宽度 = 内容宽度 （width）+ 左右内距（padding） + 左右边框（border） + 左右外距（margin）

内盒尺寸计算（元素大小）

高度=内容高度（height）+上下内距（padding）+上下边框（border）
宽度=内容宽度（width）+左右内距（padding）+左右边框（border）

2. IE盒模型

外盒尺寸计算（元素空间尺寸）：

element 空间高度 = 内容高度 （height） + 上下外距（margin）（height包含了元素内容高度、上下边框和上下内距）
element 空间宽度 = 内容宽度 （width） + 左右外距（margin）（width包含了元素内容宽度、左右边框和左右内距）

内盒尺寸计算（元素大小）

高度 =内容高度 （height包含了元素内容高度、上下边距、上下内距）
宽度 =内容宽度 （width包含了元素内容宽度、左右边距、左右内距）

区别：
主要区别：对于宽高的定义不同
w3c盒模型：设置的宽度就等于内容的宽度
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度