相对定位 position:relative
故名思意,相对定位就应该是相对于一个东西来定位,而这个东西是什么呢?其实这个东西不是什么,就是元素自己本身,用left right top b0ttom进行定位后,元素会根据原来的位置进行移动,但由于position:relative这个属性并没有脱离文档流的,所以元素本身所占的位置会保留。
我们给div2加position:relative 并用top:-20px;left:50px进行相对移动
<div style=" width:100px; height:100px;">div1</div> <div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div> <div style=" width:100px; height:100px;">div3</div>
我们看到,div3并没有因为div2的上移而上移了,原因就是position:relative这个属性是没有脱离文档流的,所以元素本身所占的位置会保留。
绝对定位 position:absolute
所谓绝对定位,其实也要找个东西来相对来绝对的,而这个东西就是元素的第一个有position,且positon不能为static的祖先元素,是不是有点拗口,换个说法吧,就是这个小鬼(element)的定位可以是他的老爸,他的爷爷,他的太公....(祖先要素)中而且第一个是是有钱的(position:absolute)或者是当官的(position:relative),就是不能是个程序猿(position:static 或者没有设position)的。而且值得注意的是position:absolute这个属性是脱离文档流的,所以重新定位后元素是不会占着原来的位置的
浮动:float
- l float : left 或float : right –- 将元素从原来的占位中删除,向左或向右漂浮,直到碰到包含块的边框,或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。
注:只有在position为static或relative,或继承了父元素的static或relative时,浮动才生效。
浮动场景:
- 浮动框总体宽度超过容器:浮动框块下移,直到有足够的空间
- 各浮动框高度不同:下移的浮动框有可能被“卡住”
普通流normal flow
将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
了解文档流是css布局的基础。虽然 普通流 很基础, 但资料较少,之前对这个概念模糊,现总结如下,欢迎拍。
块级元素和内联元素
html元素根据普通流布局特性分为块级元素(block)和内联元素(inline)
块级元素
表现为以下特性:
- 处于常规流中时,如果 width 没有设置,会自动填充满父容器;
- 可以应用 margin/padding;
- 在没有设置高度的情况下会扩展高度以包含常规流中的子元素;
- 处于常规流中时布局时在前后元素位置之间(独占一个水平空间);
- 忽略 vertical-align.
常见的块级元素
块级元素: p、h1、div、 ul、ol、li、 table、 form
display为block的元素
BFC
说到普通流块的布局,不得不说BFC了,
关于BFC这篇文章( http://www.w3ctech.com/topic/865 )解释的很清楚了。
BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
哪些元素会产生BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
内联元素
内联元素,表现为行内样式,当当前行放不下的时候,再另起新行.表现为以下特性:
- 水平方向上根据 direction 依次布局;
- 不会在元素前后进行换行;
- 受 white-space 控制;
- margin/padding 在竖直方向上无效,水平方向上有效;
- width/height 属性对非替换行内元素无效,宽度由元素内容决定;
- 非替换行内元素的行框高由 line-height 确定,替换行内元素的行框高;由 height , margin , padding , border 决定;
- 浮动或绝对定位时会转换为 block;
- vertical-align 属性生效
常见的内联元素
input、 a、 img、 span
display为inline的元素
IFC
同样相对BFC,行内元素有IFC
IFC布局规则
- 框会从包含块的顶部开始,一个接一个地水平摆放。
- 摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。水平的margin、padding、border有效,垂直无效。不能指定宽高。
- 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
详细可查看:inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
哪些情况会脱离普通流
有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位,隐藏元素。
固定定位(fixed)
固定定位:即完全离开文档流,相关于视区进行偏移。
对于定位要注意:
- 对于absolute和fixed定位的固定尺寸(设置了width和height属性值)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位
- 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
- 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用