CSS 盒子模型

目录

1.1 看透网页布局的本质

1.2 盒子模型（Box Model）组成

1.3 边框（border） 

1.4 表格的细线边框

1.5 边框会影响盒子实际大小 

1.6 内边距（padding） 

案例：新浪导航案例-padding影响盒子好处 

 案例：小米导航案例修改-padding影响盒子大小计算

1.7 外边距（margin） 

1.7.1 外边距典型应用 

1.8 外边距合并 

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

解决方案： 

2. 嵌套块元素垂直外边距的塌陷 

 解决方案：

1.9 清除内外边距

---

 

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.

 

1.1 看透网页布局的本质

网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。

网页布局过程：

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

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

3. 往盒子里面装内容.

网页布局的核心本质： 就是利用 CSS 摆盒子。

1.2 盒子模型（Box Model）组成

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

 

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

1.3 边框（border） 

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式  边框颜色

语法：

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

 

CSS 边框属性允许你指定一