CSS笔记（四）
知识点一：外边距
1、回顾盒子模型包含：内容、内边距、边框、外边距
2、定义：盒子的边框与其他元素或者浏览器边缘之间的距离
3、使用：
① 上外边距 margin-top: 100px;
② 左外边距 margin-left: 80px;
③ 下外边距 margin-bottom: 50px;
④ 右外边距 margin-right: 200px;
4、综合设置
(1) 四个属性值：上 右 下 左 margin: 90px 70px 50px 20px;
(2) 三个值：上、左右、下margin: 90px 70px 20px;
(3) 两个值：上下、左右margin: 90px 50px;
(4) 一个值：上下左右 margin: 50px;
5、总结：
(1) div盒子默认有8px的外边距（只值距离浏览器的
(2) 盒子的外边距不会影响盒子的尺寸
6、水平居中
(1) text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中
(2) margin:auto:块状元素水平居中,必须设置宽度
知识点二：外边距合并
1、相邻块元素垂直外边距的合并
定义：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者 ,这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
2、嵌套关系的块元素的外边距合并
定义：对于两个嵌套关系的块元素，如果父元素没有上内边距及边框， 则父元素的上外边距会与子元素的上外边距发生合并， 合并后的外边距为两者中的较大者
3、避免嵌套关系外边距合并的方法
① 给父元素添加边框
② 给父元素添加内边距
③ 给父元素添加overflow属性
知识点三：盒子阴影
1、定义：向div元素添加影子
2、使用：四个属性值 水平阴影 垂直阴影 影子模糊距离 影子的颜色
box-shadow: 60px 30px 10px #ff0000;
知识点四：浮动
1、标准流（文档流）：元素按部就班按照自身的特性排列
2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程
3、使用：
(1) 左浮动：float：left
(2) 右浮动：float：right
4、结论
(1) 浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边
(2) 浮动后的两个块状元素会在同一行显示
(3) 浮动后的元素不占有原来的位置
(4) 浮动后的元素不会超出父元素的范围
(5) 浮动后的元素自动的转化为行内块元素
(6) 浮动后的元素不超过父元素的内边距
知识点五：清除浮动
1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响
2、为什么要清除浮动？
浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的
3、如何清除浮动？
① 额外标签法：在浮动元素的后边加上标签
1) <div style="clear: left;"></div>
2) 清除左浮动 clear: left
3) 清除右浮动 clear: right
4) 清除左右浮动 clear: both
5) 优点：通俗易懂，书写方便
6) 缺点：添加了额外的标签，结构化差
② overflow属性：在父元素中添加
1) overflow: hidden;
2) overflow: scroll;
3) overflow: auto;
4) 优点：但是代码简洁
5) 缺点： 盒子中多余的内容会被隐藏掉
③ 使用after伪元素清除浮动：给父元素添加
1) .clearfix::after { content: ' '; display: block; clear: both; }
2) 优点：符合闭合浮动思想 结构语义化正确
3) 缺点：IE6-7不支持:after
④ 双伪元素清除浮动:给父元素添加after以及before伪元素
1) .clearfix::after, .clearfix::before { content: '';display: table;clear: both; }
2) 优点：代码简洁
3) 缺点：IE6-7不支持:after
知识点六：版心与布局流程
1、版心定义：版心：网页中主体内容所在的区域
2、布局流程：
(1) 确定页面的版心（可视区）。
(2) 分析页面中的行模块，以及每个行模块中的列模块。
(3) 制作HTML结构 。
(4) CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
3、概括布局流程
(1) 由外到内、由大到小
4、布局分类
(1) 一列宽度且居中布局
(2) 两列左窄右宽型
(3) 通栏平均分布型
