css小常识

1.子标签浮动,父标签不浮动。这是为了让父标签能包裹住子标签的方法介绍,一般可使用三种清除浮动的方法:

1)最为简单的办法是给父标签设置一个高度,min-height:600px;
2)给父标签设置一个overflow:hidden;属性也可让父标签包裹住浮动的子标签。
3)在浮动子标签的末尾放置一个空标签,并为其设置两个属性:clear:both; height:0;


代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
float:left;
border:1px green solid;
width:100px;
height:100px;
}
.div2{
border:1px blue solid;

}
.clear{
overflow:hidden;
height:0;

}
.cl{
clear:both;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="cl"></div>
</div>
</body>
</html>


2.复合属性的写法问题。
目前接触的复合属性有,font,list-style,background,border.
在实际运用过程中,font复合属性需要特别注意。对它的引用必须写完整,如:font:normal bold 12px/14px "宋体";
行高可以择情选择,但是其它四个值必须同时具备,不然复合属性设置将不起作用。当前标签会寻找并继承父级及之上的font设置。
其它诸如,list-style,background,border则可选择性设置其值,不必将所有值都列出。

3.padding,margin属性同样对浮动子标签有作用。计算高、宽时一定考虑清楚。
4.在不设置高度而只设置行高的情况下,浏览器的解析会多出1px.

posted @ 2014-01-10 09:05  不忘初心~  阅读(138)  评论(0编辑  收藏  举报