CSS布局基础

（1）布局前的注意事项

• 内容与显示分离,即HTML与CSS样式分离。
• 网站布局方法，固定宽度和响应式，固定布局即每一栏都有基于像素的宽度，响应式布局以百分数定义宽度，可为不同终端定制单独的体验。
• 考虑浏览器的兼容性

(2) 构建页面，恰当的使用article,aside,nav,section等元素，要按照一定的顺序放置内容，使用合适的语义标记剩余内容。

（3）针对所有浏览器为HTML5新元素添加样式，对于IE9之前的浏览器需条件注释引入一段代码：

<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
<![endif]-->

IE8及之前的版本会忽略它们不原生支持的CSS，html5shiv.js是一段专门为解决此问题的代码。

(4) 修改浏览器的默认样式，可使用CSS重置的方法,可使用normalize.css文件进行重置。

(5)CSS中的盒模型

CSS中的width是盒子模型中内容区的宽度，但浏览器中显示的元素的宽度是内容宽度、左右内边距和左右边框的总和。背景颜色会填充内容区域和内边距，每个元素都可以有可见的4个边框。使用box-sizing:border-box模式会包含除外边距以外的所有要素。

(6) display属性，值为block时，显示为块级元素，就像开始新的段落；值为inline，让元素显示为行内元素（不同于开始新的段落);值为inline-block,让元素显示为行内元素，同时具有块级元素的特征即可设置width、height、margin、padding等属性；值为none,隐藏元素并将其从文件流中完全删除；还有其他不常用取值。visibility属性，设置元素是否可见，值为hidden时，元素不可见，但文档流中其应该出现的位置会留下一片空白。

(7) 在设置元素宽度时候width指的是内容区域的宽度；百分数是相对于父元素的宽度，如div宽100px,其内部某个元素宽80%即80px；margin的四个值分别是上右下左，顺时针,若只有一个值应用于4边，若有2个值，前两个用于上下后两个用于左右，若有3个值前一个用于上，第二个用于左右，第三个用于下，内边距不是继承的。boder属性的设置主要有颜色、边框、线型。margin设置，外边距是元素与相邻元素之间的透明空间。对于上下接触的两个元素的margin，仅使用其中较大的一个另一个会被叠加，左右margin不会叠加。

(8) float设置元素浮动在文本或其他元素上，可使用此方法让文本环绕在图像或者其他元素周围，也可以使用这种方法创建多栏布局。设置为浮动的元素不影响父元素的高度。使用浮动时，容器高度为0,在需为容器添加背景色时，需要容器自身具有清楚浮动的能力，最可靠的方法是使用clearfix方法。

（9）对元素进行定位：

• 相对定位,每个元素在页面的文档流中都有一个自然位置，相对于这个原始位置对元素进行移动就称为相对定位，原始位置会留白。
• 绝对定位,即指定元素相对于body或最近已定位祖先元素的精确位置，可以让元素脱离正常的文档流，不会留白。
• z-index,Z-index值越大显示的越接近最上面。设置为static的元素按默认的状态显示，不受z-index值的影响。定位不是继承的。
• 溢出的处理，溢出即图像比容器更宽。通过overflow属性控制元素溢出的部分，其值可为hidden隐藏、scoll变成滚动框、auto让滚动条仅在访问者访问内容时出现。不是继承属性。

（10）垂直对齐元素，vertical-align值可为:

值	含义
baseline	元素的基准线对齐父元素的基准线
middle	使元素位于父元素中央
sub	使元素成为父元素的下标
super	使元素成为父元素的上标
text-top	使元素的顶部对齐父元素的顶部
text-bottom	使元素的底部对齐父元素的底部
top	使元素的顶部对齐当前元素的最顶部
bottom	使元素的底部对其当前元素的最底部
百分数或数值	可正可负，按特定的值上下移动元素

(11) 通过cursor属性设置鼠标指针的形状，其常用取值有pointer，default,crosshair，move,wait,help,text,progress,auto,n-resize,nw-resize,ne-resize,s-resize,sw-resize,se-resize。