css系列之position与float

最新推荐文章于 2021-09-23 18:36:41 发布

weixin_34413357

最新推荐文章于 2021-09-23 18:36:41 发布

阅读量66

点赞数

原文链接：https://segmentfault.com/a/1190000012103276

版权

基础知识

块级元素与块元素

块级元素

块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。例例如：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稍微复杂点
1. 只设置top/left(bottom/right)，则设置值要依据浏览器窗口，未设置值要依据父元素
2. 设置了top,left，则需要依据浏览器窗口
3. 同时设置top, bottom(left,right)，则bottom(right)不起效