css页面布局
写在前面：
页面布局整体上可以分为两类：固定宽度（一般固定960px）；流式布局；将流式布局转换为固定布局很容易，只需要外围再包括一个div，为其设置宽度即可。
html默认的布局方式是将每个块状标签，一个一个地往上叠加，为static类型的布局。
布局的一些技巧：
1）如果看到很多文本块并排时，就知道它们各自都需要一个div标签。此外，将这些并排的div标签集中放在另外一个div中，也是很常见的。
2）pading和margin只是一些空格而已，利用这两个属性就可以将元素移动到网页的任何位置。
浮动布局策略
1）除非像图片这样本身已经设置了宽度的元素，否则需要给任何浮动元素设置width（px,em或者百分比），只有这样，才能让浏览器给其他内容腾出环绕的空间。
对于使用absolute定位的元素，因为脱离了页面流，某些情况下类似于inline-block
2）要创建多列并排的效果（如两列并排），通常需要给正文添加一个大于或者等于侧边栏宽度的margin，从而造成第二列的幻觉。
3）清除浮动，clear。如果要让元素下落到左浮动对象的下方clear:left;或者右浮动对象的下方：right；对于页脚或其他需要显示在页面底部的元素，可以使用clear:both.
4)解决浮动布局中的常见问题
(1)当浮动元素高于外围元素（如div）里面其他内容时，就会从外围元素的底部凸出来，如果外围元素带有背景或者边框，这种情况就更加明显。此时可以：
a：在外围元素div的底部加一个清楚元素，如<br class=".clear">
b：浮动外围元素。
c：在外围元素中添加如下属性：overflow:hidden.
d：还有一种很奇怪的方法是，在外围<div>中添加一些样式和类名。如.clearfix
建议使用最后一种方法
.clear:after{ content:""; display:table; clear:both; } .clear{ zoom:1; }
这些都可以强制外围块扩大到包含浮动元素。
2)创建全网页高度的列
浮动元素自身高度通常由其内容决定，如果内容不多，那么浮动元素就不会很高(除了图片外，不要轻易给元素设定高度！)，由于背景图案或者颜色只能填充浮动元素所在的区域，就会造成列的底部出现空缺。要解决这种问题：
（1）伪列法：用一个div包裹粗短侧边栏及网页其他列，为该标签添加背景图片。这样外层的div就会扩展到和其最高的内部元素一样高。此时，如果外围div和每一个列均为固定宽度，只要使图片与外围div一样宽，图片左侧的颜色和宽度与左侧边栏一样，中间部位与中间列的背景色相称即可。
（2）伪劣法的一个问题是，如果都是利用百分比来定义的列的宽度，就很难利用图片来创建全网页高度的视觉效果。此时，可以利用css3的线性渐变，不过这对于ie8以下的浏览器支持不好。
3）防止浮动下落（float drop）
浏览器窗口显示的元素宽度并不等于它的width值，而是left/right border,left/right margin,left/right padding三者值的总和。float drop总是由于没有足够空间容纳所有列，导致有的浮动元素落到下一列造成。此时的解决方法：
（1）严格计算，所有列的总和<=100%
(2)使用box-sizing:border属性,如将下列代码放在css reset中
注意：clearfix解决的是浮动问题中的图片凸出，对于绝对定位中的图片凸出是没有办法的，此时只能够定义外围元素的高度
*{ -moz-box-sizing:border-box; box-sizing:border-box; }
css响应式布局
响应式布局（RWD）结合了三大理念：
基于布局的弹性网格：响应式布局中不在使用固定布局，而使得宽度随着屏幕大小而改变。
用于图片和视频的弹性媒体：使得图片和媒体能够进行缩放，以适应不同的屏幕大小。
为不同屏幕宽度创建不同样式的css媒体查询：根据当前条件为浏览器发送不同的样式。
- 通过在<head>中添加response.js，可以让旧版IE支持媒体查询;
- 媒体查询通过引入不同的样式文件来实现，如
- <link href="css/small.css" rel="stylesheet" media="(max-width:580px)">
网页元素定位
1.注意点：
1）给元素设定高度要小心，除非给已知大小的图片设置高度，否则无法得知指定元素在页面上会有多高。
2）对于同一个元素，不要讲float属性和任何一种定位方式(static,absolute,relative,fixed)结合使用！
2.css提供了四种类型的定位：
1）静态定位static：这是浏览器默认的定位方式，按照简单的从上到下的顺序排列页面流。
2）绝对定位absolute：使得页面元素脱离页面流，并将它置于网页的上层，有时候会遮挡住其他的内容。如果一个标签的位置是绝对的，并且它又不在任何设定了absolute,relative,fixed定位的元素里面，那么它就是相对于浏览器的窗口进行定位。如果一个标签处在设定了absolute,relative,fixed定位的标签里面，那它就是相对于该外围元素的边沿进行定位。
3）相对定位relative:让元素相对于它在网页的默认位置定位，并在元素未进行相对定位之前所处的位置上留下一个窟窿。因此，相对定位的好处并不在于移动元素（这个靠绝对定位来实现），而是给它内部的元素设定一个新的参考点，此时相对定位的含义是“相对于我”定位，即设置了relative属性的外围元素，获取了一个绝对定位，该元素里面要定位的元素则获得了针对于该元素边沿的相对定位。
4)固定定位fixed:锁定在屏幕的某个位置，始终相对于body进行定位，与background-attachment:fixed类似。用户滚动元素时，固定元素会在页面上保持不变。
备注：
1）上述定位中，设置position：relative和position:absolute都可以使元素激活left,top,right,bottom和z-index属性（网页虽然是二维的，其实有z轴，大小由z-index来控制），默认情况下，所有元素都在z-index=0这一层，这就是文档流，设置position：relative和position:absolute都会让元素浮起来，就是说z-index>0。不同的是，position:relavtive会保留自己在z：index=0层的占位，虽然对其他z：index=0层元素没有影响；而position:ablolute则会完全脱离文档流，不会在z-index:0层保留占位，其他元素就会占据这个元素本来的位置，造成重叠的效果。（讨论z-index只对同一层，同一位置有意义？）
2）float也会改变文档流，不同的是，float属性不会让元素上浮到另一个z-index层，仍然会让元素在z-index=0层排列，其他元素就会环绕该元素而存在。也因为这个原因，float不能和任何一种定位方法结合使用。（不过float元素不能作为围绕它的元素设置margin的参照，比如多列布局中，需要为主要元素设置一个等于或者多余浮动元素的margin来形成多列的效果）
3）综上可知，对于position:absolute元素，完全脱离原来层，其在原来层实际占据高度和宽度都是0；对于position：relative元素，依旧占据原来的高度和宽度，如果设置top，left不为0就会形成窟窿。对于浮动元素，在原来层实际占据的高度为0，宽度依旧保留（这就是造成浮动元素凸出的原因，需要为其父元素设置overflow:hidden来撑高其父元素）。对于以上这几种元素，其自身的高度和宽度由其中的内部元素撑开，或者宽度由人来设置。
3，元素堆叠
z-index :-1;值越大，就会出现在越接近顶层的位置，此外，还可以使用负数（IE7之前不支持负数）。
关于多个元素堆叠这个问题，除了设置了position为relative或absolute会激活z-index之外，还有一种特殊情况，并未激活z-index,但仍然让元素发生了重叠，这就是：负边距。
貌似z-index只对针对于同一基准元素，位置有重叠的控件起作用？
css元素居中
1.水平居中
1）文本，图片等行内元素的水平居中
给父块状元素添加text-align:center属性。
2）确定宽度的块级元素的水平居中（注意一定是块内元素）
通过设置margin-left:auto以及margin-right:auto来实现
3）不确定宽度的的块状元素的水平居中
（1）将该不确定宽度的块状元素改为display:inline；为其外围的块状父元素设置text-align:center
(2)为父元素设置float，同时设置position:relative,left:50%;子元素设置为position:relative和left：-50%。
2，垂直居中
1）父元素高度不确定的单文本，图片，块级元素的垂直居中
通过为父元素设置相同的上下padding来实现
2）父元素高度确定的单行文本的垂直居中
为父元素设置line-height,该line-height的高度等于父元素的确定高度
3）父元素高度确定的多行文本、图片、块状元素的垂直居中
关于垂直居中，css中有一个属性vertical-align;但是只有父元素是td或者th时，该元素才有效，对于其他块状元素p,div等，默认情况下不支持该属性；此时（1）设置父元素dispaly：table-cell，不过该属性不同浏览器的支持不同。（2）将内容就放置在一个一行一列的table里面，td标签默认就设置了vertical-align:middle.