div+css布局注意点

简介:


一 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{
 position:absolute;
 left:0;
 width:200px;
}

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

 height:100px
}

#right{
 position: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高度自适应,也要设置其父对象的高度自适应。

 

 

目录
相关文章
|
1月前
|
前端开发 容器
|
7月前
布局
​ 可选值: ​ visible. 默认值 子元素会从父元素中溢出,在父元素外部的位置显示 ​ hidden 溢出的内容将会被裁剪不会显示 (一剪没) ​ scroll 滚 ,生成两个滚动条,通过滚动条来查看完整的内容 ​ auto 根据我们需要生成滚动条 ​ overflow-x:单独处理水平的 ​ overflow-y: 单独处理垂直的
|
安全 容器
由圣杯布局引发的思考
今天在MDN看到块格式化上下文有点不以为然,关键是它写的高深莫测,读不懂... 于是下午想试试圣杯布局的时候,终究还是逃不过它。🤣 这里不介绍圣杯布局的历史,这样的文章网上不知道多少篇,我来写写千篇一律中的亮点吧,哈哈。
57 0
|
Web App开发 设计模式 前端开发
DIV+CSS布局总结
DIV+CSS布局总结
|
编解码 前端开发 Android开发
移动布局基础(流式布局)
移动布局基础(流式布局)
130 0
|
前端开发
Flex 布局与传统布局的比较
在前端开发中,页面的布局是一个非常关键的问题。传统的布局方式,如使用浮动和定位来实现布局,虽然可以实现一定的布局效果,但是代码量较多,可维护性较差,难以实现复杂的布局需求。
206 0
|
前端开发 容器
移动端布局——flex布局下的居中对齐方式
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
314 0
移动端布局——flex布局下的居中对齐方式
|
Web App开发 C++ 容器
Flexbox布局的正确使用姿势
Flexbox布局的正确使用姿势
146 0
|
容器
盒式布局
盒式布局
251 0
盒式布局

相关实验场景

更多