对div定位的理解
positon有4个属性:static relative absolute fixed.
默认的时候是static即静止定位,是按照元素在(x)html出现的顺序依次分配位置,static是不受top right left bottom影响的.
当父层a的position设为relative(相对定位) 子层b的position设为absolute(绝对定位)时,b的偏移是相对于父层a来定位,例如top:10px的偏移量就使b的顶部和a的顶部有10px的距离.但是如果a没有设置relative 而b设为absolute,b的定位就是相对于浏览器进行,此时top:10px会使b出现在离浏览器上方10px的地方.
-----------------------div居底部-----------------
--------------------------------------------------------
一、水平居中
.hor_center {
margin: 0 auto;
}
二、水平垂直居中
.content {
width: 360px;
height: 240px;
}
.ver_hor_center {
position: absolute;
top: 50%;
left: 50%;
width:360px;
height:240px;
margin-left: -180px; /*要居中的div的宽度的一半*/
margin-top: -120px; /*要居中的div的高度的一半*/
}
三、div置于底部(footer)
.bottom_footer {
position: fixed; /*or前面的是absolute就可以用*/
bottom: 0px;
}
http://www.wibibi.com/info.php?tid=138
http://blog.sina.com.cn/s/blog_92d6237201016jhs.html
http://blog.csdn.net/sykent/article/details/7791284
相关推荐
Div CSS网站布局视频教程第10课_理解CSS定位与div布局
在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，下面的教程能让你更深入地了解CSS定位属性
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div...
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课 CSS排版 - CSS/DIV布局专题讲解 - 第8课 网页变幻 - CSS/DIV布局专题讲解 - 第9课 CSS与其他技术 CSS与Javascript的综合应用 - CSS与其他技术 - 第1课 ...
第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...
第10章 理解css定位与div布局 第11章 css+div布局方法剖析 第12章 css+div美化与布局实战 第3部分 css混合应用技术篇 第13章 css与javascript的综合应用 第14章 css与xml的综合运用 第15章 css与ajax的综合应用 第4...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
CSS概念\CSS基本语法\CSS文字效果\CSS图片效果\CSS页面背景\CSS设置表格和表单样式\页面和浏览器元素\CSS制作实用菜单\CSS滤镜\理解DIV与CSS定位\CSS排版\网页变幻\CSS与JAVASCRIPT\CSS与XML的综合应用\CSS与AJAX的...
相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧，本文也有一个理解并附有示例代码，喜欢的朋友可以参考下
本文向大家描述一下DIV CSS布局中的position属性的用法，...定位(position)布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困难，那是相当的难理解，需要一定的耐心，不过还好，KwooJan给大家总结的已
w3c的table部分中说width属性是the desired width of the entire table，我估计entire就是包含了padding和border，找不到什么其他说明，先这么理解吧。 定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed...
- <div class="haha">aaaaaaa</div> - .haha { background-color: orange; } （3）id选择器 * 每个html标签上面有一个属性 id - <div id="hehe">bbbbb</div> - #hehe { background-color: #333300; } *...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框（border） 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 ...
HTML 添加多个标签以结构化的方式组织如何限制文本输入添加多个样式类等等CSS 如何进行基本造型添加外部样式表特性使用类添加样式使用标签名称添加样式如何重塑div 定位柔性等等JS 动态创建元素动态删除元素如何在 ...
3.5 盒子之间的关系 3.5.1 HTML与DOM 3.5.2 标准文档流 3.5.3 div 标记与 span 标记 3.6 盒子在标准流中的定位原则 3.6.1 实验1——行内元素之间的水平margin 3.6.2 实验2——块级元素之间的竖直margin...