CSS盒模型

---

前言

页面布局要学习三大核心，盒子模型、浮动和定位。学习好盒子模型可以非常好的帮助我们对页面进行布局

看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子box。
2. 利用css设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面转内容。

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

---

一、盒子模型（Box Model）组成

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

css盒子模型本质上就是一个盒子，封装周围的html元素，它包括：边框border、外边距margin、内边距padding和实际内容content。

二、边框

border可以设置元素的边框，边框由三部分组成：边框宽度（粗细）、边框样式和边框颜色

语法：

border： border-width|border-style|border-color

属性	作用
border-width	定义边框粗细&