CSS：盒子模型

网页布局的本质

1. 先准备好相关的网页元素，网页元素基本都是盒子Box

2. 利用CSS设置好盒子样式，然后摆放到相应位置（核心）

3. 往盒子里面装内容

盒子模型

组成

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、边距和实际内容。

 

 

边框（border）

 

复合写法

 

表格的细线边框

 

border会影响盒子的大小

 

 

---

内边距 （padding）

 

复合写法

 

padding会影响盒子的实际大小，若盒子没有指定的大小（width/height），则padding不会影响盒子的实际大小。

---

 

外边距（margin）

复合写法与padding相同

 

外边距典型应用

 

 

外边距合并

 

 

清除内外边距