《精通CSS高级WEB标准解决方案》第七章 布局
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第七章 布局
所有CSS布局技术都依赖于三个基本概念：定位、浮动和空白边操纵
7.1 让设计居中[code]
<body>
<div id='wrapper'>
</div>
</body>
/*最明了的居中方案，可惜IE6不支持*/
#wrapper{
width:720px;
margin:0 auto;
}
/*利用Ie对text-align的理解BUG解决IE6支持问题*/
body{
text-algin:center;
min-width:760px;/*如果窗口宽度小于760px就不再自适应缩小*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*也可以采用这种方法,只需定义wrapper一个元素*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 固定宽度的布局[code]
/*这是一个非常常见的两列布局*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'>
...
</div>
<div id='footer'>
...
</div>
</div>
/*两列布局的CSS设定很简单*/
#content{
width:520px;
float:right;
}
#mainNav{
width:180px;
float:left;
}
#footer{
clear:both;
}
/*让文字与容器边缘保持距离*/
#mainNav{
padding-top:20px;
padding-bottom:20px;
}
#mainNav li{
padding-left:20px;
padding-right:20px;
}
#content h1,#content h2,#content p{
padding-right:20px;
}
/*三列布局，可以在右侧content中再添加一栏*/
<div id='content'>
<div id='mainContent'>
......
</div>
<div id='secondaryContent'>
...
</div>
</div>
/*只要一个左对齐，另一个右对齐就可以了*/
#mainContent{
width:320px;
float:left;
}
#secondaryContent{
width:180px;
float:right;
}
[/code]流体布局[code]
/*布局宽度根据窗口大小自适应*/
#w
相关文档：
CSS优先级包含四个级别（文内选择器，ID选择器，Class选择器，元素选择器）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下：
* 页面中直接设置style,加1,0,0,0
* 每个ID选择器(如 #id),加0,1,0,0
* 每个Class选择器(如 .class)、每个属性选择器(如 [attribute=])、每个 ......
CSS 基础语法
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4.&nb ......
CSS兼容性一直是大家头疼的问题，现在说说如何区分这几个浏览器，IE6、IE7、IE8和FF，IE8均指IE8正式版,版本号:8.0.6001.18702。
以颜色为例来说如何区分这几个浏览器：
.csshack{
color:#f00; &nbs ......
在html中，即使我们没有指定页面元素显示的css样式，元素也会按照默认的的标准css样式去显示。因此掌握基本的html标签可以在一定程度上精简你的css代码，现将html标签的默认属性进行一定的汇总如下：
li { display: list-item }
h ......
