1、开始布局的注意事项
（1）、内容（html）与显示（css）分离
（2）、布局方法
- 固定宽度布局：整个页面和每一栏都有基于像素的宽度
- 响应式页面/流式页面：使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小
2、构建页面
（1）、恰当使用article、aside、nav、section、header、footer、div等元素将页面划分成不同的逻辑区块
（2）、按照一定的顺放置内容，确保页面在不使用css的情况下也是合理的
（3）、以一致的方式使用标题元素（h1~h6），从而明确地标识页面上这些区块的信息，并对他们按优先级排序
（4）、使用合适的语义标记剩余的内容，如段落、图和列表
（5）、使用注释来标识页面上不同的区域及其内容
3、对默认样式进行重置或标准化
（1）、使用css重置开始主样式表
（2）、使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表
4、盒模型
- 由内容区域、内容区域周围的空间（内边距、padding）、内边距的外边缘（边框，border）、边框外面将元素与相邻元素隔开的不可见区域（外边距）构成
5、控制元素的显示类型和可见性
（1）、指定元素的显示方式display
- block（显示为块级元素，就像开始新的段落）、inline（让元素显示为行内元素）、inline-block（让元素显示为行内元素，同时具有块级元素的特征，即可以为元素的四边设置with、heigh、margin、padding（padding-top、padding-bottom会越界进入相邻元素区域，而不是局限于该元素本身的空间）等属性）、none（隐藏元素，并将其从文档流中完全移除）
（2）、控制元素可见性visiblity
- hidden(元素不可见，但在文档流中保留它)、visible（显示元素）
6、设置元素的高度和宽度width、height
- 宽度：长度（带单位 eg：px、em）、父元素的百分数。对顶宽页面使用像素，响应式Web设计使用百分数
- 高度：只用长度（带单位 eg：px、em）
- min-width、min-height、max-width、max-height属性设置最小和最大尺寸
width、height不可继承- min-height、min-width：希望元素至少具有某一特定高度、日后内容变多，元素的高度会自动按需增长
7、在元素周围添加内边距padding
- 带单位（em、px）的长度或父元素宽度的百分数
- padding-top、padding-right、padding-bottom、padding-left，单独为一个边添加内边距
8、设置边框
（1）、定义边框风格border-style
- none（默认）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）
（2）、设置变框宽度border-width
（3）、设置边框颜色border-color
- 颜色名称、十六进制值、rgb、hsl、rgba、hsla
（4）、使用简记法同时设置多个边框属性border
- 一个值（应用四个边），两个值（前上下、后左右），三个值（前上，中左右，后下）
- -top、-right、-bottom、-left将边框效果限制在某一条边上
- 指定以上三种属性
- border-right-style，指定单边风格
- 不可继承
border属性可用于表格及其单元格
9、设置元素周围的外边距margin
- 长度、相对父元素宽度的百分数、auto（依赖于width属性的值）
- margin-top、margin-right、margin-bottom、margin-left
10、使元素浮动float，让文本环绕元素
- left（元素浮动到左边，其他内容围绕在它右边）、right（元素浮动到右边，其他内容围绕在它左边）、none（元素完全不浮动）
- 不可继承
11、控制元素浮动的位置
（1）、
12、对元素经行相对定位（每个元素在页面的文档流中都有一个自动位置，相对于这个原始位置对元素进行移动）position:relative
.example{
position:relative;
top:
right:
bottom:
left:
}
13、对元素进行绝对定位（指定元素相对body、或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流）position：absolute
.example{
position:absolute;
top:
right:
bottom:
left:
}
- 根据需要，对希望成为绝对定位参照体的祖先元素添加position：relative；忽略这一步，元素相对body计算偏移量
- 不可继承
14、对元素进行固定定位（固定在浏览窗口中）position：fixed
.example{
position:fixed;
top:
right:
bottom:
left:
}
15、在栈中定位元素z-index：n
- n表示元素在定位过的对象堆中的层级的数字
- z-index的值越大，元素在堆中就越高
- z-index属性仅对定位过的元素有效
- 不可继承
16、处理溢出overflow:
- visible（让元素盒子中的所有内容可见，默认）、hidden（隐藏元素盒子容纳不下的内容）、sroll（无论元素是否需要，都在元素上添加滚动条）、auto（让滚动条仅在访问者访问溢出内容时出现）
17、垂直对齐元素vertical-align:
- baseline（元素的基准线对齐父元素的基准线）、middle（元素位于父元素中央）、supervision（元素成为父元素的上标）、sub（元素成为父元素的下标）、text-top（元素的顶部对齐父元素的顶部）、text-bottom（元素的底部对齐父元素的底部）、top（元素的顶部对齐当前行里最高元素顶部）bottom（元素的底部对齐当前行里最低元素的底部）、元素行高的百分比
18、修改鼠标的指针cursor
- pointer（指针）、default（箭头）、crosshair（+）、move、wait、help、text、progress、auto（显示特定情形下通常使用指针）、x-resize（双箭头，n（北）、nw（西北）、e（东）等）
附
（1）、文档流：默认情况下，元素会按照它们在HTML中自上而下出现的次序显示，并在每个非行内元素的开头和结尾出换行
