当前位置:编程学习 > html/css >>

div布局注意点


一 div居中

#container { margin:0 auto; }


margin:1px 2px 3px 4px;其中四个值分别代表上右下左(顺时针)

margin:1px 2px;其中1px代表分别距浏览器上边和下边的距离,2px代表分别距左右的距离。

margin:0 auto; 0 代表距上下的距离,auto代表距左右的距离。当左右距离为auto的时候,浏览器自动测算时左右距离一致。

 


 

二 绝对定位

当某个div被设定为position:absolute,它本质上已经和其它对象分离开了,它的定位模式不影响其它对象,也不被其它对象影响。

 

#sample{
 postion:absolute;
 left:0;
}
表示距左边距离为0px


例子:

#left{
 postion:absolute;
 left:0;
 width:200px;
}

#center{
 margin-left:200px;
 margin-right:200px;
}

#right{
 postion:absolute;
 right:0;
 width:200px;
}

这样左右两边是宽度固定的两个div,中间的div距浏览器左右两边分别为200px,正好留出了左右div宽度的位置,并且中间div的宽度自适应。

 

 

三 高度自适应

有的人觉得很简单,直接设置height:100%即可,但是仅仅这样做是不够的。

必须明白的一点是:一个对象的高度能否自适应,取决于它的父对象是否高度自适应。

 

例子一:

<html>
<body>
<div id="content"></div>
</body>
</html>

要想让content的div高度自适应,必须这样设置

html,body{ height:100%; }

#content{ height:100%; }


例子二:

<html>
<body>
<div id="content">
    <div id="left"></div>
</div>
</body>
</html>

要想让left的div高度自适应,必须这样设置

html,body{ height:100%; }

#content{ height:100%; }

#left{ height:100%; }

也就是说要设置left的高度自适应,必须设该对象的父对象content高度自适应。

要设content高度自适应,也要设置其父对象的高度自适应。

 

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,