盒子模型（CSS重点）
一、盒子模型（Box Model）
1、概念：所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
2、总结：
①盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成；
②盒子里面的文字和图片等元素是内容区域；
③盒子的厚度，我们称为盒子的边框；
④盒子内容与边框的距离是内边距（类似单元格的cellpadding）；
⑤盒子与盒子之间的距离是外边距（类似单元格的cellspacing）。
二、盒子边框（border）
1、语法：
borer ： border-width || border-style || border-color
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
2、边框的样式
①none：没有边框即忽略所有边框的宽度（默认值）；
②solid：边框为单实线（最为常用的）；
③dashed：边框为虚线；
④dotted：边框为点线。
3、边框的综合设置
语法：borer ： border-width || border-style || border-color
如 border:1px solid red;（没有顺序）
4、盒子边框写法总结表
| 上边框 | 下边框 | 左边框 | 右边框 |
| border-top-style：样式; | border-bottom-style：样式; | border-left-style：样式; | border-right-style：样式; |
| border-top-width:宽度; | border-bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border-bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
5、表格的细线边框
①通过表格的 cellspacing="0" ，将单元格与单元格之间得距离设置为0；
②但是两个单元格之间的边框会出现重叠，从而使边框变粗；
③通过css属性：
table {border-collapse:collapse;}
collapse单词是合并的意思；
border-collapse:collapse;表示相邻边框合并在一起。
二、内边距（padding）
1、概念：padding属性用于设置内边距，是指边框与内容之间的距离。
2、设置：
| 属性 | 作用 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
3、当我们给盒子指定padding值之后，发生了2件事：
①内容和边框有了距离，添加了内边距；
②盒子会变大。
4、简写
| 值的个数 | 表达意思 |
| 1个值 | padding：上下左右内边距； |
| 2个值 | padding：上下边距 左右边距； |
| 3个值 | padding：上内边距 左右内边距 下内边距 |
| 4个值 | padding：上内边距 右内边距 下内边距 左内边距 |
5、遇到导航栏里面字不一样多的，不方便直接给宽度，直接给padding，撑开盒子。
6、内盒尺寸计算（元素实际大小）
①宽度：Element Height=content height+padding+border（Height为内容高度）
②高度：Element Width=content width+padding+border（Width为内容宽度）
③盒子实际大小=内容的宽度和高度+内边距+边框
7、padding不影响盒子大小的情况：
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。
三、外边距（margin）
1、概念：margin属性用于设置外边距，margin就是控制盒子和盒子之间的距离。
2、设置
| 属性 | 作用 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin值的简写（复合写法）代表意思跟padding完全相同。
3、外边距实现盒子居中
⑴可以让一个盒子实现水平居中，需要满足以下两个条件：
①必须是块级元素；
②然后就给左右的外边距都设置为auto。
⑵实际工作中常用这种方式进行网页布局，如：
.header {width:960px; margin:0 auto;}
常见的写法，以下三种都可以：
①margin-left:auto; margin-right:auto;
②margin:auto;
③margin:0 auto;
4、文字居中和盒子居中区别
①盒子内的文字水平居中是 text-align:center，而且还可以让行内元素和行内块元素居中对齐；
②块级盒子水平居中，左右margin改为auto。
5、插入图片和背景图片的区别
①插入图片，我们用的最多，比如产品展示类，移动位置只能靠盒模型padding、margin；
②背景图片，我们一般用于小图标背景或者超大背景图片，背景图片只能通过background-position。
6、清除元素的默认内外边距（重要）
⑴、为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除。
⑵、代码：
浙公网安备 33010602011771号