CSS-定位和浮动
2017-02-09 22:08
183 查看
CSS 定位
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位:
static,元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative,元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute,元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed,元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
CSS 相对定位
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
CSS绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
相关文章推荐
- css的核心内容 标准流、盒子模型、浮动、定位等分析
- Div+CSS教程----DivCSS布局绝对定位和浮动
- css区块定位之浮动与清除属性
- HTML/CSS 块、内嵌、浮动、定位元素的特点对比
- CSS学习8(浮动和定位)
- CSS+jQuery实现可关闭的智能定位的浮动消息提示框
- CSS布局浮动(float)和定位(position)属性的区别和使用
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- CSS布局:浮动与绝对定位的异同点
- 可视化格式模型:css的浮动、定位、盒模型
- CSS进阶(七)——浮动和定位布局
- css之浮动与定位
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- CSS布局最常用属性float(浮动)和position(定位)
- css知识点(position-float-定位-浮动)-20141022
- css 基础 定位浮动的个人理解
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
- CSS布局浮动和溢出控制及定位及显示类型
- css 布局+定位+浮动和清除
- CSS基础-20CSS定位-浮动