16.(初级)CSS布局定位相关问题

2017-2-10来源:心得技巧人气:361

一、浮动溢出问题解决方案

方案一:在外层元素的底部添加一个元素,并清除浮动。

方案二:浮动外层元素,后续元素清除浮动。

方案三:设置overflow:hidden;。

方案四:设置伪元素:before、:after。

        div:before/after{

            content:” ”;

            display:table;

            clear:both;

        }

二、z-index

!注意:子代元素的顺序以父元素的顺序为起点

例如:

<div id="a">a     <div id="b">b</div>     <div id="c">c</div>     <div id="d">d</div> </div>

#a{     position: absolute;     z-index: 1000; } #b,#c,#d{     position: absolute; } #b{     z-index: 100;    } #c{     z-index: 200; } #d{     z-index: 200; }

 

以上结果:id=a,z-index=1000,由于id=a为父元素,在最下面。

三、visibility:hidden与display:none的区别

visibility:hidden不显示元素,但占用页面位置。

display:none,元素消失,不占用页面位置。

四、img自适应

img{max-width:100%}