用CSS进行布局
开始布局注意事项
1、内容与显示分离
2、布局方法：固定宽度和响应式布局
固定宽度，整个页面和每一栏都有基于像素的宽度
响应式布局也称为流式页面，使用百分数定义宽度
3、浏览器问题
注：HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一，否则就不起作用。
关于HTML5 shiv：
与其他主流浏览器不同，IE8及之前版本会忽略它们不原生支持的元素的CSS。HTML5 shiv是专门用于解决这一问题的一段JavaScript。
对默认样式进行重置或标准化
抹平各个浏览器的默认样式差异方法：
1、使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置（http://meyerweb.com/eric/tools/css/reset/）。以及其他的重置样式表
2、使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表，位于http://necolas.github.com/normalize.css/
CSS重置可以有效地将所有默认样式都设为“零”。
盒模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型。
由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。
盒模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型。
由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。
浏览器中元素的宽度与其width属性值并不一致（除非没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度，而在浏览器中显示宽度则是内容宽度、左右内边距和左右边框的总和，显示高度与之类似。
当使用了box-sizing:border-box;则元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。
控制元素的显示类型和可见性
块级元素，行内元素。
本质是display属性的值不同。
块级元素：display:block（li元素为display:list-item），行内元素：display:inline;，混合显示方式：inline-block，让元素与其他内容出现在同一行，同时具有块级元素属性。
注：设置为inline的元素会忽略任何width、height、margin-top、margin-bottom设置，不过，设置为inline-block元素可以使用这些属性
display:none，隐藏元素，并将其从文档流中完全移除，不占用任何视觉空间。
visibility：主要控制元素是否可见，与display不同，使用visibility隐藏元素时，会在视觉上留下一个空白空间。
visibility:hidden，让元素不可见，visibility:visible，让元素显示
提示：设置为display:inline;的元素接受padding的设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素空间。可以设置背景色进行测试。
注：设置为display:none;或visibility:hidden;的元素里的所有内容（包括所有后代）都会受到影响，消失或隐藏。
设置元素的高度和宽度
对定宽页面使用像素，对响应式Web设计使用百分数。
设置min-height可以使元素至少具有某一特定高度，内容变多的话，元素高度会自动按需增长，这是height与min-height的区别
border-box规则：
/*
* border-box规则
*/
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
在元素周围添加内边距
padding属性，padding简记法：padding:5px，应用于全部四个边，padding:5px 9px，第一个值应用于上下，第二个值应用于左右，padding:5px 9px 11px，第一个值用于上边，第二个值用于左右，第三个值用于下边，padding:5px 8px 9px 11px，分别用于上、右、下、左
内边距值可以使用像素、百分数、em或rem组合
设置边框
1、定义边框风格：border-style:type，type可以是none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）
2、设置边框宽度：border-width:n
3、设置边框用颜色：border-color:color
简记法：border，可选：-top，-right，-bottom，-left，限制效果为某一边；可选：-property，property可以是style，width，color
border简写属性及各个边框属性（border-width，border-style，border-color）均可接受1~4个值，用法与padding类似
设置元素周围外边距
margin属性的auto值依赖于width属性值
margin属性值也可以接受1~4个值，与padding用法类似
注：当em用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小。
使元素浮动
float属性使元素浮动在文本或其他元素之上，可以使用这种技术让文本环绕在图像或其他元素周围，也可以使用这种技术创建多栏布局。
float:left – 让元素浮动到左边，其他内容围绕在它右边，float:right – 浮动到右边，float:none – 完全不浮动
注：选择的方向是应用于需要浮动的元素，而不是应用于环绕的元素
浮动元素并不会影响父元素或其他祖先元素的高度。
当一个父元素的所有子元素都是浮动元素时，它本身将不具有任何高度，即高度为0
使用clear属性清除浮动效果，对某个元素使用该属性，该元素和它后面的元素会显示在浮动元素下方。
clear:left – 阻止元素浮动在该元素左边，clear:right – 阻止元素浮动在该元素右边，clear:none – 阻止元素浮动在该元素两边
如果要让浮动元素的祖先元素在高度上包含浮动元素，并清除浮动，可以使用.clearfix或overflow方法。
/*
* .clearfix 清楚浮动
*/
.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}
注：浮动元素的display属性会变成display:block;，无论是否设置了display属性。
对元素进行相对定位
每个元素在页面文档流中都有一个自然位置，相对这个原始位置进行移动就称为相对定位。周围元素不受此影响。
/*
* 相对定位
*/
.example{
position: relative;
top: 2px;
right: 3px;
....
}
使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用z-index属性指定它们的叠放顺序。
对元素设置position:static，可以覆盖position: relative;，定位不继承
对元素进行绝对定位
通过对元素进行绝对定位，即指定它们相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流
与相对定位不同，绝对定位的元素不会在原先位置留下空白，这与让元素浮动也不同。对于绝对定位的元素，其他元素不知道他的存在，他也不知道其他内容的存在。
position:absolute;
对希望成为绝对定位参照体的祖先元素添加position: relative;，如果跳过这一步，将对元素相对于body元素计算偏移量
固定定位
在访问者滚动浏览器窗口时，设置position:fixed;的元素会固定在浏览器窗口中，并不会随着访问者滚动窗口而滚动。
建议：固定定位在移动浏览器中效果不佳，若网页要适应移动设备，最好不要使用固定定位。
在栈中定位元素
对于定位的元素，z-index最高的显示在最上面，不管该元素在HTML中出现的顺序。
z-index属性仅对于定位过的（即设为绝对定位、相对定位、固定定位）元素有效。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background: #5af;
}
div{
border: 1px solid #666;
height: 125px;
position: absolute;
width: 200px;
}
.box1{
background: pink;
left: 110px;
top: 50px;
z-index: 120;
}
.box2{
background: yellow;
left: 0;
top: 130px;
z-index: 530;
}
.box3{
background: #ccc;
position: static;
/* 静态的，没有任何效果 */
z-index: 1000;
}
.box4{
background: orange;
left: 285px;
top: 65px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box1"><p>Box 1</p></div>
<div class="box2"><p>Box 2</p></div>
<div class="box3"><p>Box 3</p></div>
<div class="box4"><p>Box 4</p></div>
</body>
</html>
效果：
处理溢出
overflow控制元素在盒子外面的部分
overflow:hidden – 隐藏盒子容纳不了的内容，overflow:scroll – 无论元素是否需要，都在元素上添加滚动条，overflow:auto – 让滚动条仅在访问者访问溢出内容时出现。
overflow不是继承的
垂直对齐元素
vertical-align:baseline – 使元素的基准线对齐父元素基准线
vertical-align:middle – 使元素位于父元素中央
vertical-align:sub – 成为父元素下标
vertical-align:super – 成为父元素上标
vertical-align:text-top – 使元素顶部对齐父元素顶部
vertical-align:text-bottom – 使元素底部对齐父元素底部
vertical-align:top – 使元素顶部对齐当前行里最高元素的顶部
vertical-align:bottom – 使元素底部对齐当前行里最低元素的底部
或者可以输入行高百分比，可以是正数，也可以是负数
或者输入某个值正负均可，单位为px或em，分别按照特定的值向上或者向下移动元素。
可以使用vertical-align设置表格单元格对齐方式，除了表格外，vertical-align仅适用于行内元素
修改鼠标指针
cursor:pointer – 表示停留在链接上时通常显示的指针形状（手指），default（箭头形状），crosshair（+），move（+加方向），wait（加载中的符号），help（帮助符号？或者指针带着问号），text（I），progress（箭头加加载中的符号）
cursor:auto – 特定情形下通常使用的指针形状
cursor:x-resize – 显示双向箭头，这里的x是其中一个箭头需要指向的方向，可以是n（北），nw（西北），e（东）等等
4252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
