02-CSS盒子模型

边框（border)

边框有三部分组成：边框宽度（粗细）、边框样式（虚/实线）、边框颜色。

border：border-width || border-style || border-color

border-style

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。（常用）
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	继承父元素的边框样式。

边框复合型写法（简写）

border: 1px solid red; /* 没有顺序 */

边框分开写法

border-top: 1px solid red; /* 这里只设置上边框，其余同理 */

表格的细线边框

border-collapse: collapse; /* 起合并相邻的边框的作用 */

边框会影响盒子实际大小

解决方案有：

• 测量盒子大小的时候，不测边框。
• 如果测量的时候包含了边框，则需要width / height减去边框宽度。

---

内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

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

内边距复合型写法（简写）

padding属性（简写）可以有1~4个值

值的个数	意思
padding: 5px;	1个值，表示上下左右都有5px内边距
padding: 5px 10px;	2个值，表示上下内边距是5px，左右是10px
padding: 5px 10px 20px;	3个值，表示上边距5px，左右是10px，下是20px
padding: 5px 10px 20px 30px;	4个值，上是5px，右是10px，下是20px，左是30px（顺时针）

内边距会影响盒子实际大小

如果盒子已有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方法：

• width：width - 左右内边距之和
• height：height-上下内边距之和

---

外边距（margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

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

margin简写方式代表意义和padding完全一致。

外边距可使块级盒子水平居中

条件

– 块级元素

• 盒子必须指定了宽度（width）
• 盒子左右的外边距都设置为auto

– 行内块元素/行内元素

• 给其父元素添加 text-align:center（给自己的左右的外边距都设置为auto是没用的哦！)
  
  
  
  

总结

——盒子模型