页面布局要学习三大核心，盒子模型、浮动和定位。
网页布局过程：
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;
