盒子模型

盒子模型

网页布局的核心本质：即使利用CSS摆盒子
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。封装周围的HTML元素包括：边框、内边距、外边距、和实际内容。

---

1.边框
2.内边距
3.外边距

---

1.边框（border）

border可以设置元素的边框，三部分组成：边框粗细、边框样式、边框颜色。

属性	作用
border-width	定义边框粗细，单位是px
border-style	定义边框的样式
border-color	定义边框的颜色

简写：
border: 1px solid red; 写法没有顺序
边框样式：
none - 定义无边框。
dashed - 定义虚线。
dotted - 定义点状边框。
double - 定义双线。

表格的细线边框

border-collapse属性控制表格边框的方式
语法：
border-collapse:collapse;
表示相邻边框合并在一起

---

2.内边距（padding）

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

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

写法可以有一到四个值：

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素内边距
padding：5px 10px	2个值，代表上下有5像素内边距，左右有10像素内边距
padding：5px 10px 20px	3个值，代表上内边距是5像素，左右内边距是10px，下内边距是20像素
padding：5px 10px 20px 30px	4个值，上内边距5像素右内边距10像素下内边距20像素做内边距30像素，顺时针

影响：

1. 内容和边框有了距离，距离为内边距
2. 影响了盒子实际大小

解决:可通过让width、height属性减去多出来的距离

---

3.外边距（margin）

设置外边距，控制盒子之间的距离

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

外边距可以让块级盒子水平居中，但是需要满足：

1. 盒子必须制定了宽度width
2. 盒子左右外边距都是auto

常见写法：
margin：0 auto;
注意：以上写法是让块级元素水平居中，行内元素或行内块元素水平居中只需要让其父元素设置 text-align:center即可