|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
网页制造poluoluo文章简介:此时预览此代码,我们会发明最外层的父元素floatcontainer,并没有显现。
在举行浮动结构时,年夜多半人都深知,在需要的中央举行浮动清算:<divstyle=”clear:both;”></div>。
比方:
<divstyle=”background:#666;”>
<divstyle=”float:left;width:30%;height:40px;background:#EEE;“>SomeContent</div>
</div>
此时预览此代码,我们会发明最外层的父元素floatcontainer,并没有显现。这是由于子元素因举行了浮动,而离开了文档流,招致父元素的height为零。
若将代码修正为:
<divstyle=”background:#666;”>
<divstyle=”float:left;width:30%;height:40px;background:#EEE;“>SomeContent</div>
<divstyle=”clear:both”></div>
</div>
注重,多了一段清算浮动的代码。这是一种好的CSS代码习气,可是这类办法增添了无用的元素。这里有一种更好的办法,将HTML代码修正为:
<divclass=”clearfix”style=”background:#666;”>
<divstyle=”float:left;width:30%;height:40px;background:#EEE;“>SomeContent</div>
</div>
界说CSS类,举行“浮动清算”的把持:
Code:
.clearfix:after{
content:“.”;
clear:both;
height:0;
visibility:hidden;
display:block;
}
这是对Firefox举行的处置,由于Firefox撑持天生元素,而IE一切版本都不撑持天生元素
.clearfix{
display:inline-block;
}
/*这是对Mac上的IE扫瞄器举行的处置*/
*html.clearfix{height:1%;}
/*这是对win上的IE扫瞄器举行的处置*/
.clearfix{display:block;}
/*这是对display:inline-block;举行的修正,重置为区块元素*/
会发明即便子元素举行了浮动,父元素floatcontainer仍旧会将其包抄,举行高度自顺应。
clear元素的margin-top被重置为零
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。 |
|