页面布局要学习三大核心，盒子模型、浮动和定位。

网页布局过程：

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

2、利用CSS设置好盒子样式，然后摆放到相应位置。（核心本质，利用CSS摆盒子）

3、往盒子里面装内容。

拓展：calc函数，盒子宽度计算

width: calc(100%-80px)    100%代表父盒子的宽度

一、盒子模型组成部分

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

增加box-sizing:border-box;属性来指定盒子模型，边框的大小不会影响到盒子的大小。

box-sizing:content-box;（此属性值为设置之前的默认值，即盒子大小受边框影响）

1、边框（border）

border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式及边框颜色。

border: border-width    ｜    border-style    ｜    border-color

border-style    solid实线边框   dashed虚线边框  dotted点线边框

边框可以分开设置样式，border-top 上边框  其他同理

border-collapse:collapse    合并相邻的边框

边框会影响盒子的实际大小，设置之后盒子大小增加

border-radius : length   圆角边框    length就是数值

border-radius : 10px 20px 30px 40px   四个角可分别设置

2、内边距（padding）

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

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

简写方式：

内边距会影响盒子的实际大小，设置之后盒子大小增加

*不设置盒子的长宽，边距就不会撑大盒子（设置长宽的父类里面的子类不设置长宽也适用）

3、外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离。

margin的简写方式与padding一致。

外边距典型应用——块级盒子水平居中

外边距可以让块级盒子水平居中，但必须满足两个条件：

（1）盒子必须制定了宽度

（2）盒子的左右外边距设置为auto，即自动

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中需给其父元素添加text-align:center即可。将行内元素或者行内块元素看作普通的文字。

外边距合并

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

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

解决方案：

（1）为父元素定义上边框

（2）为父元素定义上内边距

（3）为父元素添加overflow:hidden

4、清除内外边距

网页元素很对带有默认的内外边距。

首写代码：

* {

            padding: 0;

            margin: 0;

        }

5、盒子阴影

box-shadow 属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 10px 10px black;

盒子阴影不占用空间，不会影响相邻盒子排列

盒子:hover{ }  可设置鼠标经过时的样式

与盒子阴影box-shadow相似的还有文字阴影text-shadow。

text-shadow: h-shadow v-shadow blur color;