基本网络布局
页面布局三大核心：盒子模型，浮动和定位
网页布局第一准则：多个块级元素纵向排列找标准流，
多个块级元素横向排列找浮动。
- 先用标准流的父元素管上下，用内部子元素浮动管左右
一、盒子模型
1.边框border 会影响盒子大小
1）边框粗细border-width：5px；
2）边框样式border-style：solid；
3）边框颜色border-color：pink；
4）边框复合写法 border：1px solid red；没有顺序
5）边框分开写 border-top：5px dashed purple；
6）边框合并boder-collapse：collapse;合并相邻边框
7）圆角边框 boder-radius：10px；或百分比也可
8）圆形 半径为宽一半
div {
width: 200px;
height: 200px;
border-radius: 50%;或100px
border: 1px solid red;
}
9）可以设置不同圆角 顺时针左上开始
2.内边距 padding-top 会影响盒子大小
1）内边距 padding-top:20px;
2）内边框复合写法 2 上下 左右 3上 左右 下 4上 右 下 左 顺时针
3）盒子没有指定width/height属性，则padding不会撑开盒子大小
3.外边距margin 盒子与盒子的距离 2 上下 左右 3上 左右 下 4上 右 下 左 顺时针
4.盒子水平居中 外边距auto 但是必须指定宽度
1）盒子必须指定宽度width
2）盒子左右外边距为auto
5.外边距合并 加边框 加内边距 加overflow：hidden
- 合并容易造成塌陷
解决方法
6.清除默认内外边距margin: 0; padding: 0;
* {
margin: 0;
padding: 0;
}
7.行内元素尽量不设置上下边距，只设置左右内外边距
- 块和行内块就可以
8.盒子阴影 box-shadow：
-
默认外阴影，但是不可以写出来，写出来无效
-
影子不占空间
-
鼠标经过生成阴影
二、浮动 float：left
1.浮动 float： left；
2.浮动特征
1）脱标 不保留位置
2）多盒子设置浮动，一行内显示，顶端对齐，无缝隙，装不下另起一行
3）浮动元素具有行内块元素特点
4）浮动的盒子只会影响后面的标准流，不会影响前面的标准流
- 第一个盒子标准流，第二个浮动，第三个标准
3.清除浮动 clear：both；
- 清除浮动的本质就是清除浮动造成的影响
- 父盒子有高度就就不用清除浮动
- 清除高度后，父级根据浮动的子盒子自己检测高度，父级有高度后，就不会影响标准流了。
选择器{clear：属性值；}
- 闭合浮动就是孩子在自己家闹，出不去。
清除浮动三种方法
1）额外标签法 clear：both
*注意：新增盒子必须是块级元素，不能行内
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义标签，结构化较差
2）父级添加overflow：hidden；
- 属性值设置为hidden、auto或scroll
- 子不教父之过，切记给父元素加代码
- 缺点：无法显示溢出的部分
3）伪元素法 ：after 给父级加
- 缺点：照顾低版本浏览器
4）双伪元素 给父元素加
- 前后插盒子，形成闭合
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 缺点：照顾低版本浏览器
