此篇为本笔记的第二篇
标准模式与怪异模式(模拟老式浏览器的行为)
如果漏写了DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6,IE7,IE8)就会触发怪异模式
IE盒模型的解析
标准模式:网页元素的宽度有padding,border,width三者的宽度相加决定
怪异模式:width本身就包括了padding和border的宽度
组织CSS
base.css + common.css + page.css
base.css包括CSS reset、通用原子类
- CSS reset:标签在浏览器里有默认的样式,不同浏览器的默认样式会有差别。例如:ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而在Firefox下,它的缩进却是由padding实现的。
- 通用原子类:一系列常用的基本类,包括:文字,定位,宽高,边距
文字:font-size
,line-height
,text-align
定位:float
,clear
,position
宽高:width
,height
边距:margin
,margin-top
,margin-right
,margin-bottom
,margin-left
,padding
,padding-top
,padding-right
,padding-bottom
,padding-left
CSS命名
- 推荐使用英语,不要使用汉语拼音
- 常见命名方法:驼峰命名、划线命名(可以结合两种方法,其中驼峰命名法用于区别不同单词,划线用于表明从属关系)
- 不推荐轻易使用子选择符,多人合作时会有冲突
- 为避免多人合作的冲突,可为page层的各工程师分配一个唯一的标识符,作为前缀
多用组合,少用继承
挂多个class实现最终样式
处理上下margin
- 相邻的margin-left和margin-right是不会重合的
- 相邻的margin-top和margin-bottom会产生重合
所以上下相邻的模块最好统一使用margin-top或者margin-bottom,不要混用
低权重原则——避免滥用子选择器
- CSS选择符权重的规则:
标签——1
class——10
id——100 - 如果CSS选择器权重相同,那么样式会遵循就近原则,哪个选择符最后定义(而不是class名字挂在最后),就采用哪个选择符的样式
<span class="test test2">
与<span class="test2 test">
没有区别 - 使用子选择器,会增加CSS选择符的权重,CSS选择符的权重越高,样式就越不容易被覆盖,越容易对其他选择符产生影响
- 为了保证样式容易被覆盖,提高可维护性,CSS选择符要保证权重尽可能低
CSS sprite(图片翻转技术)
- 将网站的背景图片合到一张大图片上,减少网页的HTTP请求数,减少服务器压力
- 合并的只能是用于背景的图片,对于
<img src="">
设置的图片不能合并 - 大图中每个小图的坐标值都不可轻易改动
CSS hack
- IE条件注释法
<!--[if lte IE6]> <span></span> <![endif]-->
<!--[if lt IE6]> <span></span> <![endif]-->
<!--[if gte IE6]> <span></span> <![endif]-->
<!--[if gt IE6]> <span></span> <![endif]-->
<!--[if ! IE6]> <span></span> <![endif]-->
- 选择符前缀法
*html .test{width:60px;}/*IE6*/
*+html .test{width:70px;}/*IE7*/
- 样式属性前缀法
.test{
width:80px;
*width:70px;/*IE6,IE7*/
_width:60px;/*IE6*/
}
a标签的4种状态排序
love hate原则:l(link)ov(visited)eh(hover)a(active)te
hasLayout
触发hasLayout解决IE bug
zoom:1;
zoom无效时,可以设置position:relative;,但会有副作用
块级元素和行内元素
块级 | 行内 |
---|---|
独占一行,默认情况下,其宽度自动填满其父元素宽度,即使设置了宽度,仍然独占一行 | 不会独占一行,相邻元素排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化 |
可以正常设置margin和padding | 水平方向的margin和padding会产生效果,竖直方向的margin和padding不产生边距效果 |
display:inline-block和hasLayout
- 为了兼容IE,display能用的类型只有inline,block,none。IE6和IE7不支持display:inline-block;
- inline-block:可以设置长宽,可以设置margin和padding值,但却不是独占一行
- 如果对行内元素触发hasLayout,就可以模拟display:inline-block的效果
行内元素{display:inline-block;}即可触发hasLayout
只能对行内元素实现
img标签和button标签都具有display:inline-block;的特性,可以设置长宽但不独占一行
relative,absolute和float
这个我之前写过一篇博客,列了一个表格进行了对比,传送门
补充一个position各个值的描述
position: static;
- position的默认值,元素将定位到它的正常位置,其实也就相当于没有定位
- 元素在页面中占据位置
- 不能使用top,right,bottom,left移动元素位置
position: relative;
- 相对定位,相对于元素的正常位置来进行定位
- 元素在页面中占据位置
- 可以使用top,right,bottom,left移动元素位置
position: absolute;
- 绝对定位,相对于最近一级的、定位不是static的父元素来进行定位
- 元素在页面中不占据位置
- 可以使用top,right,bottom,left移动元素位置
position: fixed;
- 绝对定位,相对于浏览器窗口进行定位,其余和absolute一样,相当于一种特殊的absolute
position: inherit;
- 从父元素继承position属性的值
居中
水平居中
- 行内元素的水平居中
给父元素设置text-align: center;
- 确定宽度的块级元素的水平居中
设置margin-left: auto;
和margin-right: auto;
- 不确定宽度的块级元素的水平居中
- 将元素包含在table标签内,对table设置
margin-left: auto;
和margin-right: auto;
增加了无语义标签,加深了标签的嵌套层数
(table本身不是块级元素,如果不设置其宽度,它的宽度由内部元素的宽度撑起) - 改变块级元素的display为inline类型,然后使用
text-align: center;
来实现居中。但存在副作用 - 给父元素设置float,然后父元素设置
position: relative;
和left: 50%;
,子元素设置position: relative;
和left: -50%;
来实现水平居中。但存在副作用
- 将元素包含在table标签内,对table设置
竖直居中
- 父元素高度不确定的文本、图片、块级元素的竖直居中
通过给父容器设置相同的上下内边距实现(padding-top
,padding-bottom
) - 父元素高度确定的单行文本的竖直居中
通过给父元素设置line-height
来实现,line-height
值和父元素的高度值相同 - 父元素高度确定的多行文本、图片、块级元素的竖直居中
vertical-align: middle;
但只有当父元素为td和th时,才会生效
在Firefox和IE8下,可以设置块级元素的display类型为table-cell来激活vertical-align
IE6和IE7并不支持display: table-cell;
所以可以直接使用table,td,默认情况下已经隐式的设置了vertical-align: middle;
- 使用hack
在不支持display: table-cell;
的IE6和IE7下,通过给父子两层元素分别设置top: 50%;
和top: -50%;
来实现居中
设置了position: relative;
和position: absolute;
,会有副作用
z-index
- 激活z-index属性后,如果不设置其值,那么默认为0,但仍然浮于body之上
- 如果多个元素的z-index值相同,那么HTML标签中后出现的元素,会浮在先出现的元素之上
负边距——并未激活z-index,但仍然让元素的位置发生了重叠
浏览器解析页面时,会先判断元素的类型,如果是窗口类型的,会优先于非窗口类型的元素,显示在页面的最顶端,如果同属非窗口类型的,才会判断z-index的大小(select元素在IE6下是以窗口形式显示的)