css定位
2014-04-25 22:50
447 查看
css的三种几本定位机制:普通流,浮动,绝对定位
除非专门指定,否则所有框都在普通流中定位。块级元素从上到下一个接一个排列,垂直距离由框的垂直空白边计算
浮动:
左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘
下面具体说对于不同的浏览器浮动的不同表现形式:
火狐浏览器:其他元素可能会出现在浮动元素的下面,被浮动元素覆盖。(只对设置了高度和宽度的块元素有效,块元素内字符始终不会相互覆盖),对于行内元素和没有设置高度和宽度的块级元素,浮动元素不会和其他元素相互覆盖。
谷歌浏览器:处理浮动元素时在任何时候浮动元素都不和其他元素重叠,忽略元素width和height设置的值
IE浏览器:浮动元素不和其他元素重叠。忽略浏览器顶端元素的top空白。不给浮动的块级元素和与之相邻的普通块元素设置高度宽度,不会发生重叠现象。
清除浮动:
1.添加空的div,作为最后一个子标签放在父元素中,兼容性强,但是不设置高度height:0时有时会出现空白高度
2.overflow+zoom方法:(在父元素中添加该属性)
必须定义width,为了激活haslayout,zoom:1;不能定义height,用overflow:hidden时浏览器自己检测浮动高度,不能和position配合使用
3.after伪类+zoom方法
父元素的样式中必须有:content:“.”(可以为别的值,或者不填),line-height:0;(也可以为height:0)
绝对定位:
相对于最近已定位的祖先元素,没有父元素则相对于最初的包含块。与文档流无关,不占据空间。普通文档流中的其他元素就当绝对定位的元素不存在一样。
相对定位:
无论是否进行移动,元素仍然占据原来的空间,移动元素会导致它覆盖其他框。相对于元素在文档流中的初始位置。
背景图片定位基础:
像素定位:图像左上角到元素左上角的距离为指定像素
百分比定位:使用图像上的一个对应点,实际上将图像上距离左上角n%的点定位到父元素上距离左上角n%的位置
除非专门指定,否则所有框都在普通流中定位。块级元素从上到下一个接一个排列,垂直距离由框的垂直空白边计算
浮动:
左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘
下面具体说对于不同的浏览器浮动的不同表现形式:
火狐浏览器:其他元素可能会出现在浮动元素的下面,被浮动元素覆盖。(只对设置了高度和宽度的块元素有效,块元素内字符始终不会相互覆盖),对于行内元素和没有设置高度和宽度的块级元素,浮动元素不会和其他元素相互覆盖。
谷歌浏览器:处理浮动元素时在任何时候浮动元素都不和其他元素重叠,忽略元素width和height设置的值
IE浏览器:浮动元素不和其他元素重叠。忽略浏览器顶端元素的top空白。不给浮动的块级元素和与之相邻的普通块元素设置高度宽度,不会发生重叠现象。
清除浮动:
1.添加空的div,作为最后一个子标签放在父元素中,兼容性强,但是不设置高度height:0时有时会出现空白高度
2.overflow+zoom方法:(在父元素中添加该属性)
必须定义width,为了激活haslayout,zoom:1;不能定义height,用overflow:hidden时浏览器自己检测浮动高度,不能和position配合使用
3.after伪类+zoom方法
父元素的样式中必须有:content:“.”(可以为别的值,或者不填),line-height:0;(也可以为height:0)
绝对定位:
相对于最近已定位的祖先元素,没有父元素则相对于最初的包含块。与文档流无关,不占据空间。普通文档流中的其他元素就当绝对定位的元素不存在一样。
相对定位:
无论是否进行移动,元素仍然占据原来的空间,移动元素会导致它覆盖其他框。相对于元素在文档流中的初始位置。
背景图片定位基础:
像素定位:图像左上角到元素左上角的距离为指定像素
百分比定位:使用图像上的一个对应点,实际上将图像上距离左上角n%的点定位到父元素上距离左上角n%的位置
相关文章推荐
- 随手笔记css篇_css在js中的调用
- (14)CSS内容生成技术
- 随手笔记css篇_常见选择器、伪类和伪元素
- less css基础教程
- Css绘制箭头
- java解释样式表(配合jsoup使用过滤 expression等xss)
- CSS属性书写顺序及命名规则
- css那些事儿(2)选择器
- CSS 特殊选择符
- CSS中怎么让DIV居中
- CSS从大图中抠取小图完整教程(background-position应用)
- CSS_复习
- CSS定位 (div+css说起)
- css代码初始化
- CSS 布局总结——变宽度布局
- 转载:CSS3图标图形生成技术个人攻略
- CSS 注意点
- CSS 布局总结——固定宽度布局
- css那些事儿(1)css简写
- css important