《精通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
相关文档：
1、CSS风格网站，将下面这段代码添加到网站css文件最顶端。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
或者：
在css文件的body中加入filter:gray：
body {filter:gray}
2、未启用CSS风格网站，在网页或者模板的HTML代码和之间插入以下代码：
<style>
html{filter:pro ......
转自：http://www.div-css.com/html/XHTML-CSS/hack/1136667.html
区别不同浏览器，CSS hack写法：
区别IE6
与FF
：
background:orange
;*
background:blue
;
区别IE6
与IE7
：
background:green
!important
;background:blue
;
区别IE7
� ......
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,javascript的预加载
为了提高网站的加载速度，有一个很重要的手段就是在用户浏览过程中的上游网站做一个文件的预加载。预加载文件一般有两种常用的方式：xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块)，然后使用动态插入节点方法加载的文件都会在加载后立即执行， ......
