<编写高质量代码--web前端开发修炼之道>之css总结

一)标准模式和怪异模式的一些不同
(1)IE对盒模型的解析
在标准模式下,页面的宽度为:width+border+padding
在怪异模式下,width就包括了padding 和border
(2)在怪异模式下,如下的样式不能正常表现
width:200px;margin-left:auto;margin-right:auto;
在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式

(二)关于*{margin:0;padding:0}
在不同浏览器中,一些默认样式也会有所不同,例如:ul默认带有缩进的样式,在IE中,其缩进是按照margin实现的,但是在firefox中,其缩进是按照padding实现的
为了去掉浏览器的默认样式,一些人会设置*{margin:0;padding:0},但是这并不是最好的写法,一般推荐如下写法:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}

(三)解决一些hack
(1)设置浮动时出现的bug:一旦为某个元素设置了浮动,然后有设置了margin属性,如下:
.fl{float;left;  margin-left:20px};
这种在IE6中,margin值会加倍.解决办法:为设置的元素标签添加一个样式:display;inline;即可解决

(2)为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度,有如下三种实现方法(其中fl类具有左浮动的样式,cb类具有clear:both的样式):
-- 让父元素同时浮动起来,例如:<div class="fl"><div class="fl"></div></div>
-- 让浮动元素后面紧跟一个用于浮动的空标签,例如:<div><div class="fl"></div><div class="cb"></div></div>
-- 给父容器挂上一个特殊的class,直接从父容器清除浮动元素的浮动,例如:<div class="clearfix"><div class="fl"></div></div>
其中.clearfix{height:1%;}
(3)IE的一些hack解决
--IE条件注释法:
<!-- [if IE 6]
<link type="text/css" href="ie6.css" rel="stylesheet"/>
-->
<!-- [if IE 7]
<link type="text/css" href="ie6.css" rel="stylesheet"/>
-->
<!-- [if IE 8]
<link type="text/css" href="ie6.css" rel="stylesheet"/>
-->
-- 选择符前缀法
.test{width:80px}
*html.test{width:60px}  /只在IE6下有效
*+html .test{width:40px}  /只在IE7下有效
-- 样式属性前缀法
.test{width:80px;*width:70px;_width:70px;}
(4)触发IE的hasLayout属性,
hasLayout是IE的一个特有的属性,用于css的解析引擎,要触发IE的hasLayout属性,需要使用如下的方法:
-- height:1%;这是早期的一种写法,现在并不适用.
-- zoom:1;
-- position:
(5)display:inline-block属性,这个样式在一下现代浏览器中都可以支持,但是在IE6和IE7中却不支持,但是即使不支持,这样设置会触发IE的hasLayout属性,使之显示块状效果
除此之外,display:inline-block只是对行内元素起作用,对块级元素不起作用,

(四)一些细节问题

(1)margin的不合理性:在混用了margin-top
和margin-bottom的情况下,两者的高度会产生重合,而相邻的两个元素定义margin-left和marfgin-right则不会发生重
合.所以最好不要混用margin-top和margin-bottom
(2)权重原则
如下面的代码:
span{color:purple;font-size:10px;}
.test{color:red};
<span class="test">this is a test</span>这种情况应该听谁的呢
这个时候页面解析css样式的时候,都是会采取权重原则,谁的权重要大一些,则按照谁的样式来进行解析
权重的规则如下:
html的权重是1,class的权重为10,id的权重为100
eg:div em的权重为1+1=2,strong.demo的权重为1+10=11;如果两者的权重相同的情况,则哪个类后定义听谁的
eg:
<span class="test1 test2">this is a demo</span>
style定义如下:
.test1{color:red};
.test2{color:green};
这个时候应该听test2定义的样式
(3)解决超链接访问后hover不出现的问题
a:hover{color:yellow;}
a:visited{color:purple;}
<a href="#">this is demo</a>
结果超链接在点击之后,即使鼠标再悬浮在a上面,也不会出现变成yellow的情况,这就是存在的一个bug,解决办法:
a:visited{color:purple;}
a:hover{color:yellow;}
调换两者顺序即可,关于a标签的四钟状态的排序问题,有如下的顺序:link visited hover active

(4)对于relative,absolute和float,relative还有absolute会让元素浮起来,也就是改变z-index的值,但是relative只会让元素保留在z-index:0的区域,而页面上默认的
元素的z-index也是为0,这也就是relative不脱离文档流的原因,而absolute则会让元素的z-index大于0,从而使元素脱离文档流.对应的,float也能改变文档流,但是它仍然让
元素在z-index:0层保留

position:absolute和float会隐式地改变display类型,只要设置了position:absolute和float:left或者float:right中的任何一个,元素都会按照display:inline-block
的方式显示,即使显示地设置display:block或者display:inline,也没有用
(5)z-index属性的相关问题
z-index其实是z轴的一种体,z轴在元素设置position:absolute或者relative后被激活,其大小由z-index设置,但是在下面的例子中会反常:
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script type="text/javascript">
#one{width:300px;height: 300px;background: black;}
#two{width:100px;height: 100px;background: red;position: absolute;z-index: -1;left: 100px;top:250px;}
#three{width:100px;height: 100px;background: green;position: relative;z-index: 2;left: 120px;top:-100px;}
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
one.onclick = function(){
alert('one');
}
two.onclick = function(){
alert('two');
}
three.onclick = function(){
alert('three');
}
</script>
在点击红色区域的时候不会弹出提示信息,原因是其z-index为0的body之下,被透明的body挡住了.
有些情况下虽然并没有显示设置z-index属性,但是也会显示z-index的属性,比如设定负边距,margin:-50px;仍然会让元素发生重叠的情况
(6)水平居中问题
--- 文本等行内元素水平居中:text-align:center;
--- 块级元素水平居中:margin:0 auto
--- 不确定宽度的块级元素水平居中
方法一:
<div class="wrap">
<table>
<tbody><tr><td>
<ul class="test">
<li><a href="">1</a></li>
</ul>
</td></tr></tbody>
</table>
<table>
<tbody><tr><td>
<ul class="test">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</td></tr></tbody>
</table>
<table>
<tbody><tr><td>
<ul class="test">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</td></tr></tbody>
</table>
</div>
由于table不是块级元素,如果不设定宽度的话,它的宽度由内部元素的宽度"撑起",将ul放在table,通过设定父级元素居中从而使ul居中,

方法二:
<style type="text/css">
ul{list-style: none;margin:0;padding: 0;}
.wrap{background: #000;width:500px;height: 100px;}
.test{text-align: center;padding:5px;}
.test li {display: inline;}
.test a{padding:2px 6px;background: #316AC5;color:#fff;border: 1px solid #316AC5;text-decoration: none}
.test a:hover{background: #fff;color:#316AC5;}
</style>
</head>
<body>
<div class="wrap">
<ul class="test">
<li><a href="">1</a></li>
<ul class="test">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
<ul class="test">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
通过将li这个块级元素改为行内元素让后设置text-align:center来进行居中

(7)垂直居中问题:
--- 父元素高度不确定的文本,图片,还有块级元素的竖直居中
<style type="text/css">
.wrap{background: #000;width:500px;color:#fff;margin-bottom: 10px;padding-top: 20px;padding-bottom: 20px;}
.test{width:200px;height: 50px;background: red;}
</style>
</head>
<body>
<div class="wrap">hello world</div>
<div class="wrap"><img src="book.jpg"/></div>
<div class="wrap"><div class="test"></div></div>
</body>

通过设定父容器的上下边距相同来实现的,
---父元素高度确定下的单行文本的垂直居中
height:20px;line-height:20px;

--- 父元素高度确定的多行文本,图片,块级元素的垂直居中
使用vertical-align:center;但是这个属性只有在父元素为td或者th的时候才会生效,所以可以使用table
<style type="text/css">
.wrap{background: #000;width:500px;color:#fff;height: 100px;}
.test{width:200px;height: 50px;background: red;}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
hello world </br>
hello world</br>
hello world
</td></tr></tbody></table>
<table>
<tbody><tr><td class="wrap">
<img src="book.jpg"/>
</td></tr></tbody>
</table>
</body>