CSS布局 position float
来源:互联网 发布:剑三苍云捏脸数据成女 编辑:程序博客网 时间:2024/05/22 10:38
1.static:静态定位
如果没有设置position属性,那么缺省为static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
2.relative:
relative 元素遵循正常的文档流,所以周围元素不会忽略它的存在,relative 元素支持 top,bottom,left,right等属性。当使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果,但是区别在于, relative 元素周围的元素将会忽略 relative 元素的移动。
3.absolute:
absolute 元素将会脱离正常的文档流,所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时,可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性,top 或 bottom,left 或 right。
4.fixed:固定定位
固定定位的元素也不包含在普通文档流中,元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。fixed 元素定位与它的父元素无任何关系,它永远是相对最外层的 window 进行定位的。
实例:
普通流:<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> <div style="height: 100px; width: 100px; background-color: Red;"> </div></div>
相对定位:<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;"> </div> <div style="height: 100px; width: 100px; background-color: Red;"> </div></div>
相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。
绝对定位:<div style="border: solid 1px #0e0; width:200px; position:relative;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow;"> </div></div>
5.浮动
浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样。
不浮动: <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green; "> </div> <div style="height: 100px; width: 100px; background-color: Yellow;"> </div></div>
红向右浮动:<div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red; float:right;"> </div> <div style="height: 100px; width: 100px; background-color: Green; "> </div> <div style="height: 100px; width: 100px; background-color: Yellow;"> </div></div>
红向左浮动(覆盖绿): <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow;"> </div></div>
都向左浮动(空间不够换行):<div style="border: solid 5px #0e0; width:250px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div></div>
6.clear属性
属性的left,right,both,none表示框的哪些边不挨着浮动框。
- CSS布局 position float
- CSS布局---display position float属性谈起
- CSS布局 ——display,position, float
- CSS布局display,position, float属性
- CSS布局-----display,position, float属性
- CSS布局 ——display,position, float
- 【css布局】display、position、float、overflow
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- css布局-从display,position,float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- 欢迎使用CSDN-markdown编辑器
- C++Primer Plus(第六版) 第十二章 第二题
- HDU-2389 Rain on your Parade(二分图之Hopcroft-Karp算法)
- Best Cow Line POJ
- 我的服务器开发之路-安装mysql之mariadb并更改数据库路径
- CSS布局 position float
- tarjan(SCC)模板
- 15、链表中倒数第k个节点
- 【python技能】词频统计
- Django之Mode的外键自关联和引用未定义的Model
- CentOS 7 下开启Mysql-5.7.19远程访问
- 326. Power of Three
- JS运算符优先级
- 回文字符串