补一下之前的笔记

content宽度和高度
/* 外盒尺寸计算(元素空间尺寸) */
Element 空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/* 内盒尺寸计算(元素大小) */
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
注意:
1. 宽度属性width和高度属性height仅使用于块级元素,对行内元素无效(img标签和input除外)
2. 计算盒子模型的总高度时 还赢考虑上下两个盒子垂直外边距合并的情况
3. **如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子大小

盒子阴影
语法格式 : box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影

例：
img {
border: 10px solid orange;
box-shadow: 3px 3px 5px 4px rgba(0,0,0,1);
}

float（浮动）
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制 移动到其父元素中指定位置的过程

在CSS中 通过 float 属性来定义浮动 其基本语法格式如下 : 择器 { float: 属性值;}

浮动特性：
1、浮动首先创建包含块的概念(包裹).就是说 浮动的元素总是找离它最近的父级元素对齐 但是不会超出内边距的范围
2、浮动的元素排列位置 跟上一个元素(块级)有关系 如果上一个元素有浮动 则A元素顶部会和上一个元素的顶部对齐 如果上一个元素是标准流 则A元素的顶部会和上一个元素的底部对齐
由2可以推断出 一个父盒子里面的子盒子 如果其中一个子级有浮动的 则其他子级都需要浮动 这样才能一行对其显示
元素添加浮动后 元素会具有行内块元素的特性 元素的大小完全取决于定义的大小或者默认内容的多少

版心和布局
"版心"是指网页中主体内容所在的区域 一般在浏览器窗口中水平居中显示 常见的宽度为960px 980px 1000px 等

布局流程
为了提高网页制作的效率 布局时通常需要遵守一定的布局流程 具体如下 
1. 确定页面的版心(可视区)
2. 分析页面中的行模块 以及每个行模块中的列模块
3. 制作HTML结构
4. CSS初始化 然后开始运用盒子模型的原理 通过DIV+CSS布局来控制网页的各个模块

清除浮动
其实本质叫做闭合浮动更好一些 清除浮动就是把浮动的盒子圈到里面 让父盒子闭合出口和入口不让他们出来影响其他元素 在CSS中 clear属性用于清除浮动 其基本语法格式如下
选择器 { clear: 属性值; }

父级添加overflow属性方法
可以给父级添加: overflow为hidden|auto|scroll 都可以实现

使用after伪元素清除浮动
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { *zoom: 1; } /* IE6、7 专有*/
/* *代表IE6.7能识别的特殊符号 带有这个*属性 只有IE6.7才执行*/
/* zoom就是IE6.7 清除浮动的方法 */

使用before和after双伪元素清除浮动
.clearfix:before,
.clearfix:after {
    content: ".";
    display: table; /* 这句话可以发出BFC BFC可以清除浮动 BFC我们后面讲 */
}
.clearfix:before {
    clear: both;
}
.clearfix {
    *zoom: 1;
}