css系列之position与float
基础知识
块级元素与块元素
块级元素
块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。例例如:display属性为block, list-item, table, flex, grid。
块元素
块元素是 display 属性值为 block 的元素,它应该是 块级元素 的一个子集。
行内级元素与行内元素
行内级元素
行内级元素是那些不会为自身内容形成新的块,而让内容分布在多行中的元素。
例如:display属性为inline, inline-table, inline-block, inline-flex, inline-grid。
行内元素
行内元素仅仅是display属性值为inline的元素。
置换和非置换元素
置换元素
浏览器根据元素的标签和属性,来决定元素的具体显示内容。
常见的置换元素有这些:img,input,textarea,select,button等
置换元素宽度定义
- 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
- 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
- 若宽度的计算值为 auto 且高度有 非auto 的计算值,并且元素有固有宽高比,则 width的使用值为“高度使用值 * 固有宽高比”
比如img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置
- 除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px
比如iframe, canvas#####置换元素高度定义
置换元素高度定义
- 若宽高的计算值都为 auto 且元素有固有高度,则height的使用值为该固有高度
- 若高度的计算值为 auto 且元素有固有高度,则height的使用值为该固有高度
- 若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值/固有宽高比
- 若高度的计算值为 auto 且上述条件完全不符,则height的使用值不能大于150px,且宽度不能大于长方形高度的2倍
非置换元素
浏览器中的大多数元素都是不可置换元素,即其内容直接展示给浏览器。
非置换元素,宽度设置是不适用
BFC
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
BFC就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此
触发BFC
- 根元素
- float的值不为none
- overflow的值为auto,scroll或hidden
- display的值为table-cell、table-caption、inline-block、flex 或 inline-flex
- position的值不为relative和static
BFC布局规则
- 内部的盒子会在垂直方向,一个个地放置
- 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠
- 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
- BFC的区域不会与float重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
- 计算BFC的高度时,浮动元素也参与计算
IFC
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"。
IFC布局规则
- 在一个IFC中,从父级元素的顶部开始,盒子一个接一个横向排列
- 一个line box总是足够高对于包含在它内的所有盒子。然后,它也许比包含在它内最高的盒子高
- 当盒子的高度比包含它的line box的高度低,在line box内的盒子的垂直对齐线通过'vertical align'属性决定
- 当在一行中行内级盒子的总宽度比包含他们的line box的宽度小,他们的在line box中的水平放置位置由'text align'属性决定
- 当一个行内盒子超过了line box的宽度,则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs
position
同时设置float属性不起作用
relative
生成相对定位的元素,相对于其正常位置进行定位
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位
static
默认值。没有定位,元素出现在正常的流中
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,如果元素没有拥有position属性的父级元素会根据<html>标签也就是页面的根节点进行定位
- 如果元素设置width则width优先,否则元素自知应宽度
- 导致父元素宽高塌陷
float
语法:
clear: none | left | right | both
取值:
none: 默认值。允许两边都可以有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象
both: 不允许有浮动对象
- 如果要浮动一个非置换元素,需要配合width属性
- 设置之后,vertical-align,display无效
- 浮动元素会按顺序排下来而不会发生重叠
清除浮动
因为float会破坏inline-box,所以导致父元素高度为0。
额外标签法
<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
使用after伪元素
该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素
.parent{
zoom: 1
}
.parent:after {
content:".";
height:0;
line-height: 0;
visibility:hidden;
display:block;
clear:both;
}
overflow + zoom方法(zoom, IE独有属性)
.fix{
overflow:hidden;
zoom:1;
}
有问题的,就是这个overflow:hidden,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的
不设偏移
- relative,可以看作为static
- absolute,依据父元素来定位,不一定是定位父元素元素
- float,依据父元素来定位,不一定是浏览器窗口
设置偏移
- relative,相对自身,对周围元素无影响
- absolute,依据定位父元素元素
-
float稍微复杂点
- 只设置top/left(bottom/right),则设置值要依据浏览器窗口,未设置值要依据父元素
- 设置了top,left,则需要依据浏览器窗口
- 同时设置top, bottom(left,right),则bottom(right)不起效