首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:19:43
字体:
来源:转载
供稿:网友

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

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

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

方案三:设置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%}

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表