CSS学习笔记(二)

布局

 

  由于电脑屏幕分辨率的不同以及浏览器大小的不同，造成了在布局的时候整个页面的大小的不确定，现有三种方法来解决这一问题，分别是：固定式布局；流式布局；弹性布局。

 

固定布局：使用以像素为单位定义的宽度，这种布局类型称为固定宽度的布局
好处：宽度固定，可以对界面元素进行细致的控制，在浏览器伸缩的过程中，界面内容不会出现变化，如果浏览器的宽度少于固定宽度则会出现滚动条。

缺陷：不能很好的利用屏幕，越大的屏幕造成的浪费越多

流式布局：

弹性布局：

 

CSS网页布局小技巧：

1. ul标签在Mozilla中默认是有padding值他margin值的，而在IE中只有margin有值。 
2. 如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding(好处是什么呢？)
3. li标签前面的图标推荐使用background-image，而不是list-style-image。
4. 在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
5. 定义链接的四种状态要注意先后顺序: Link Visited Hover Active
6. 与内容无关的图片请使用background
7. 定义颜色可以缩写#8899FF=#89F
8. table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
9. 完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试） 以下是引用片段：
   table{border-collapse:collapse;} 
   td{border:#000 solid 1px;} 
10. 网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

关于选择器：

1. 交集选择器： 标记选择器+类别选择器/ID选择器
2. 并集选择器： ，
3. 后代先择器： 类别选择器、ID选择器、标记选择器 以空格隔开

     构建页面HTML框架时通常只给外层标记（父标记）定义class或id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方法，而不需要再定义新的class或id。只有当子标记无法利用此规则时，才单独进行声明。

 

注意：后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响它的“各级后代”

 

关于继承和层叠：

 

层叠：可以简单的理解成是一种“冲突”的解决方案。

优先级规则可以表述为：行内样式>ID样式>类别样式>标记样式 。有一个大体的原则是：“特殊性越高的元素，优先级别越高”。