css系列之position与float

时间 2019-11-16

标签 css 系列 position float 栏目 CSS 繁體版

原文原文链接

position

同时设置float属性不起做用javascript

relative

生成相对定位的元素，相对于其正常位置进行定位css

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位html

static

默认值。没有定位，元素出如今正常的流中java

absolute

生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位，若是元素没有拥有position属性的父级元素会根据<html>标签也就是页面的根节点进行定位浏览器

若是元素设置width则width优先，不然元素自知应宽度
致使父元素宽高塌陷

sticky

杀了个回马枪，仍是说说position:sticky吧wordpress

float

语法：code

clear: none | left | right | both

取值：htm

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独有属性)ip

.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)不起效