这本书大致的翻了一遍，个人觉得书中所涉及的知识面较广，就书中所涉及的知识，我来阐述一下我觉得有意思的地方。
一、小知识
1、link 里的 media 是用来指定输出设备，all表示在所有显示，handheld表示在移动端显示，screen表示在普通pc端，print表示打印机输出
2、一般，选择器相同的情况下，越在后面的样式越优先，以下情况除外：
id 选择器 100分
class 选择器 10分
.a,.b,.c{} 群组选择器 1分
* 全局选择器 0分
后代选择器
3、块级元素：address blockquote d div dl fieldset form h1-h6 menu noscript ol p pre table ul
内联元素：a abbr acronym b bdo big br button cite code dfn em i frame img input kbd label map object q ruby samp select small apn strong sub sup textarea tt var
4、单位用em的时候，相对的是母元素的尺寸，起始状态以body为基准
5、限制文本的最大最小宽度和高度：min-width,max-width,min-height,max-height。。。。。。text-align:justify强制左右对齐
可见行高：1.5em 150%
二、易于理解的版面要遵守以下几点：
第一视点的意识 —— 根据屏幕分辨率
滚动条的技巧 —— 尽量别有滚动条，或者可视区域与下半部分有衔接，让用户知道并看到下半部分的内容
使用其他环境进行验证 —— 别的浏览器
信息的整理 —— 信息归类
实现移动的射击 —— 人眼睛的习惯走势
配置的平衡 —— 保证页面不会失去平衡，不要一边倒，颜色的深浅也决定了页面的重量，粗大文本也比细小文本重
留白的设计 —— 有空隙感，通气，可保持平衡管，段落行间距也要统一
三、版面构成：
页面分割-竖栏 —— PS、AI里的网格，一般把网页分成9或12个竖栏，黄金比例1:1.618≈5:8
网站统一
页眉与页脚统一
链接颜色的统一，CSS事先定好样式，还有一些性质用途相同的按钮形状也要统一
留白的统一，要考虑板块间的留白要统一，可设置通用的样式加进所有html里
便于理解的导航
全局导航，第一视点，醒目
局部导航，可用作下拉菜单
补充导航
四、有代表性的排版模式：
2竖栏排版
3竖栏排版 —— 1:3:1
倒L字形排版 —— 常用语深层次或多页面的网站
水平型排版
垂直I字形排版，纤细感
网格型排版
图像为主型：直接，有冲击力，图像旁边其他的元素要设计的简单，可以突出图像
重视留白的排版，给人平静的感觉
五、速记属性的使用
margin:0; 四边都是0
margin:10px 20px; 上下是10，左右是20
margin:10px 20px 0; 上是10，左右是20，下是0
margin:10px 20px 0 30px; 上是10，右是20，下是0，左是30
六、需要掌握的CSS特别处理
使用css的特殊处理，但是这不是标准规范，最好不用
IE6 的代表CSS特别处理是“星号处理”和“下划线处理”，(IE6 MUST DIE，以后不需要考虑了)
星号处理是在选择器之前添加 *html，下划线处理是 _height:1%;
例如：
div#wrapper{
width:900px;
margin:0 auto; 在IE5、IE6中这个不能实现居中
}
*html body{
texr-align:center; 所以要在body里设置来达到目的的错误
}
*html div#wrapper{
text-align:left; body了设置了居中，所有子元素就都居中了，所以要用#wrapper还原左对齐
}
只适用于IE7的CSS特别处理是在选择器之前加 “ *：first-child+html ”
div#col{
margin:5px 0 0;
}
ie7和ie6怎么写呢？
*:first-child+html div#col,*html div#col{
margin:10px 0 0 ;
}上面的这两个选择器写到一起是不对滴，要分开写，
如下：
*：first-child+html div#col{
margin:10px 0 0;
}
*html div#col{
margin:10px 0 0;
}
七、内部元素超出整体的解决办法
方法一：after是可以经过指定的元素内容之后追加内容的伪元素，
用content属性来指定内容，(before)
.col01:after{
content:"."; 点是在div为col01之后生成的内容，可以使别的什么都行
display:block; 让这个点变成块
height:0; 高度为0，必须设置
visibility:hidden; 可见设为隐藏
clear:left; 清除左浮动
}
方法二：在div里最后的地方加个空的span标签，css里display：block；clear：left但是一般html里不放空标签，所以不推荐
方法三：div class=clearfix，css里.clearfix{overflow:auto;_height:1%}
网友评论