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%即可，但是仅仅这样做是不够的。

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

例子一:

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

html,body{ height:100%; }

#content{ height:100%; }

例子二:

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

html,body{ height:100%; }

#content{ height:100%; }

#left{ height:100%; }

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

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

本文转自IT徐胖子的专栏博客51CTO博客，原文链接http://blog.51cto.com/woshixy/1036018如需转载请自行联系原作者

woshixuye111

div+css布局注意点相关推荐

DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
根本不存在 DIV + CSS 布局这回事
实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事.反过来,table布局的时候经常依赖于CSS定 ...
DIV CSS布局-固定页面开度布局
DIV CSS布局中主要CSS属性介绍: Float: Float属性是DIV CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
Table布局和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
Div+CSS布局入门教程(二) 写入整体层结构与CSS
接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE html PUBLIC "- ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
城市智慧路灯综合管理平台、图监控、灯箱实时监控、策略管理、故障报警、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理、DIV+CSS布局设计、HTML/Bootstrp/jQuery
源码类别: 后台模板文件大小: 21.5 MB 源码内容:城市智慧路灯综合管理平台后台模板前端技术: HTML/CSS/Bootstrap/jQuery 模板语言: 简体中文 ...

div+css布局注意点

div+css布局注意点相关推荐

最新文章

热门文章