页面布局核心

页面布局的三大核心：盒子模型，浮动和定位。网页布局过程，先准备相关的网页元素，网页元素基本上都是盒子，再就是需要利用CSS设置盒子样式，然后摆放到相应位置，最后在往盒子里面装内容。布局的顺序一般采用从上往下，从左往右。

盒子模型

1.盒子模型就是把HTML页面中的每一个元素看作是一个可以装内容的矩形盒子容器，它用于封装周围的HTML元素。

2.盒子模型包括外边距，边框，内边距和实际内容区域，它描述了一个文档元素在网页布局中所占的位置大小。

3.每个元素的盒子除了有自己的大小和位置外，还会影响其他盒子的大小和位置。

标准盒模型

IE盒模型（怪异盒模型）

标准盒模型和IE盒模型的区别：

在标准盒子模型中，CSS样式设置的width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素盒子的总尺寸。但是盒子真实占有宽度 = 左border + 左padding + width + 右padding + 右border。如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子宽高的改变会影响页面的布局，它会影响其他盒子的大小和位置。。

IE盒子模型中，CSS样式设置的width 和 height 指的是内容区域+border+padding的宽度和高度。

IE盒模型：box-sizing:border-box；标准盒模型：box-sizing:content-box

盒子边框

边框就是元素最外层的包装，CSS边框属性允许一个元素边框的样式和颜色

border： border-width  border-style  border-color

1.border-width：用于指定边框的粗细，用px指定。

2.border-style：用于定义边框的样式，solid实线边框，doshed虚线边框，dotted点线边框。

3.border-color：用于设置边框的颜色。

设置内容	样式属性	常用属性值
右边框	border-right-style: 样式; border-right-width: 宽度; border-right-color: 颜色; border-right: 宽度样式颜色;
上边框	border-top-style: 样式; border-top-width: 宽度; border-top-color: 颜色; border-top: 宽度样式颜色;
下边框	border-bottom-style: 样式; border-bottom-width: 宽度; border-bottom-color: 颜色; border-bottom: 宽度样式颜色;
左边框	border-left-style: 样式; border-left-width: 宽度; border-left-color: 颜色; border-left: 宽度样式颜色;
样式综合设置	border-style：上边右边下边左边	none无（默认）、solid（单实线） dashed（虚线）、dotted（点线）、 double（双实线）
宽度综合设置	border-width：上边右边下边左边]	像素值使用关键字thick、medium（默认值）、 thin
颜色综合设置	border-color：上边右边下边左边	颜色名称以及十六进制、rgb(r,g,b)、 rgba(r,g,b,alpha) 还可以设置边框的颜色为"transparent"。
边框综合设置	border: 四边宽度四边样式四边颜色

ps：1.border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

2.border-collapse: collapse;表示边框合并在一起

圆角边框（CSS3）

使用 CSS3 border-radius 属性可以给任何元素制作 "圆角"。radius 半径（距离），它的参数

border-top-left-radius: 左上角  
border-top-right-radius: 右上角
border-bottom-right-radius:  右下角
border-bottom-left-radius:  右下角
border-radius： 左上角  右上角  右下角  左下角;     /*4个值*/
border-radius： 左上角  右上/左下  右下角;	   /*3个值*/
border-radius： 左上/右下  右上/左下;	         /*2个值*/
border-radius： 四个圆角值相同;			/*1个值*/

background-color将填充所有border以内的区域

下图是border-radius: 10px;的效果图，就是将半径为10px像素值的圆与四个角相切。

圆角边框设置像素值和百分比的情况是有区别的

1.设置的盒子是正方形时，百分比设置的范围值是：0%——50%，当值达到50%时形成一个圆，超过50%之后不再变化；像素设置的范围值是：0px——边长的1/2+px，当值达到边长的一半后不再变化。

2.设置的盒子是矩形（长宽不相等）时，百分比设置的范围值是：0%——50%，当值达到50%时形成一个椭圆，超过50%之后不再变化；像素设置的范围值是：0px——最短边长的1/2+px，当值达到最短边长的一半后不再变化。

内边距（padding）

padding属性用于设置内边距，是指边框与内容之间的距离。

padding-top: 上内边距
padding-right:  右内边距
padding-bottom: 下内边距
padding-left:  左内边距
padding: 上右下左内边距

值的个数	含义
1个值	padding: 四周内边距
2个值	padding: 上下、左右内边距
3个值	padding: 上、左右、下内边距
4个值	padding: 上、下、左、右内边距

外边距（margin）

margin属性用于设置外边距，设置外边距会在元素之间创建空白的区域，这段空白区域通常不能放置其他内容。设置的语法格式和内边距padding一样

ps：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距它是无效的。

外边距实现盒子居中

外边距实现盒子居中需要满足两个条件：1.必须是块级元素；2.盒子必须指定宽度。

只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。auto是指平分剩余空间。如果只设置margin-left:auto；会让子元素靠着父元素的右侧，因为父元素剩余空间都分给了左侧，而右侧的父元素剩余空间，分配为0 所以靠右

margin: 0 auto
auto就是指水平方向平分剩余的宽度

margin：auto 0;不能实现垂直居中，因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也就没有剩余空间

行内元素和行内块元素水平居中是给其父元素添加text-align:center;

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。这个问题只有垂直方向有，水平没有。

嵌套的块元素垂直外边距的合并

对于两个嵌套关系的块元素（父子关系），父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1.设置父元素或者子元素自身的display:inline-block;

2.设置父元素的border:1px solid transparent；或者border-top(一定要包含border-top方向) 此方法会让盒子变大如果不想影响元素高度可以加上box-sizing:border-box;

3.设置父元素的padding:1px;(>0)；或者padding-top(一定要包含padding-top方向) 此方法会让盒子变大如果不想影响元素高度可以加上box-sizeing:border-box;

4.给父元素设置overflow:hidden;

5.给父元素或者自身设置position:absolute;

6.设置父元素非空，填充一定的内容。（在父元素与当前子元素之间加点具有高度的元素或内容分开父元素与当前子元素）

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

当上下相邻的两个块元素相遇时（兄弟关系），如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。

解决方案：不要即设置上边盒子下外边距又设置下边盒子上外边距，尽量只给一个盒子添加margin值。

CSS盒子模型