CSS---CSS盒子模型--盒子模型---7.3

盒子模型：

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

看透网页布局的本质：就是利用CSS摆盒子

网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子box。利用CSS设置好盒子样式，然后摆放到相应位置。然后往盒子里面装内容。

盒子模型的组成：

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，就是一个盛装内容的容器。
本质上是一个盒子，封装周图的HTML元素，包括border边框、margin外边距、padding内边距、content实际内容

边框（border）：设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色

border:border-width || border-style || border-color;(没有顺序)
边框分开写法：border-top:1px solid red;
border-top   border-bottom  border-left  border-right

border-collapse属性控制游览器绘制表格边框的方式。他控制相邻单元格的边框。
border-collapse：collapse；表示相邻边框合并在一起。

 内边距（padding）：设置内边距，即边框与内容之间的距离。

 （如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

    若没有指定weight/height属性，则此时padding不会撑开盒子大小）  

padding-top  padding-bottom  padding-left  padding-right

    padding属性可以有一到四个值（简写方式）：

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

外边距（margin）：设置外边距，即控制盒子和盒子之间的距离。

margin简写方式代表的意义跟padding完全一致。

外边距可以让块级盒子水平居中，但盒子必须指定了宽度，且左右的外边距都设置为auto

(常见的写法：margin-left：auto；margin-right：auto；|| margin：auto；|| margin：0 auto；)

行内元素或行内块元素水平居中给其父元素添加text-align：center；即可。

margin-top  margin-bottom  margin-left  margin-right

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

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有margin-top，则他们之间的垂直间距不是两者之和。而是取两个值中的较大者。这种现象被称为相邻块元素垂直外边距的合并。所以尽量只给一个盒子添加margin值。

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。所以可以为父元素定义上边框或上内边距或添加overflow：hidden。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同游览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。（这句话也是我们CSS的第一行代码）

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

* {
  padding：0；  /*清除内边距*/
  margin:0;     /*清除外边距*/
  }