05-盒子模型（边框、内外边距）

1. 看透网页布局的本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置，最后把网页元素比如文字图片等等，放入盒子里面。

2. 盒子模型（Box Model）

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

3. 盒子边框（border）

border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式 none：无边框（默认值） solid：实线 dashed：虚线 dotted：点线
border-color	边框颜色

3.1 边框的综合设置

border : border-width || border-style || border-color 

3.2 盒子边框写法总结表

• 上：border-top(-width/-style/-color)
• 下：border-bottom(-width/-style/-color)
• 左：border-left(-width/-style/-color)
• 右：border-right(-width/-style/-color)

3.3 表格边框线的合并

table{
	 border-collapse:collapse; 
}  

相邻边框合并在一起，否则会变粗。

4.内边距（padding）

4.1 内边距

边框与内容之间的距离

4.2 设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写：

值的个数	表达意思
1个值	上下左右
2个值	上下，左右
3个值	上，左右，下
4个值	上，右，下，左

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

• 宽度

  Element Height = content height + padding + border （Height为内容高度）

• 高度

  Element Width = content width + padding + border （Width为内容宽度）

• 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

4.4 内边距产生的问题

问题：padding会撑大原来的盒子
解决办法：改变width、height使盒子大小不变

4.5 padding不影响盒子大小的情况

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

5. 外边距（margin）

5.1 外边距

盒子和盒子之间的距离

5.2 设置

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

5.3 块级盒子居中

左右的外边距都设置为auto

5.4 文字居中和盒子居中的区别

1. 盒子内的文字水平居中是 text-align: center;, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子水平居中margin:0 auto;

5.5 插入图片和背景图片的区别

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

5.6 清除元素的默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

一般作为初始化

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

5.7外边距合并

（1）相邻块元素垂直外边距的合并

取两者中的较大者
解决办法：尽量给只给一个盒子添加margin值。

（2） 嵌套块元素垂直外边距的合并（塌陷）

取两者中的较大者
解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。

6. 盒子模型布局稳定性

稳定性： width > padding > margin

@拓展

去掉列表默认样式

li { 
	list-style: none;
}

圆角边框（CSS3）

border-radius:length;  

50%（高度的一半）为圆

盒子阴影（CSS3）

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影;

值	说明
h-shadow	必需的。水平阴影的位置，允许负值
v-shadow	必需的。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在css延伸至寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影