盒子模型--网页布局的核心本质

---

盒子模型

***@盒子模型

网页布局的本质

网页布局要学习的三大核心，盒子模型、浮动和定位
网页布局的过程：

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

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

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

盒模型的四大组成：

1. 边框border：盒子的边框
2. 内容content： 可加盒子和图片等
3. 内边距padding：边框与内容的距离
4. 外边距margin：盒子与盒子之间的距离

边框border

边框由颜色、宽度、实线/虚线
border-color || border-width || border-style ||

• 边框的样式：border-style= ；

  
  其中

   	 **none表示无边框**
   	 border-style: none; 
   	 **solid表示实线**
   	 border-style: solid; 
       **虚线边框** 
       border-style: dashed; 
       **点线边框** 
       border-style: dotted;
  

• 边框的粗细：border-weight= ；

  border-width: ; 边框的粗细 一般情况下都用 px ；

• 边框的颜色：border-color= ；