CSS流、浮动和定位

流:浏览器在页面上摆放HTML元素的所用的方法

标准流:默认的流,在网页布局中按元素的写入顺序显示,其中块元素从自上而下而内联元素自左而右摆放(文本是内联元素的一种特殊情况,浏览器会把他分解为适当大小的内联元素以适应给定的空间)

非标准流:让元素脱离原先应该在的位置,方式包括浮动和定位

浮动:float:left/right--->元素会从标准流中删除,尽量向左或向右移动让出相反方向的空间给下一个元素显示,要求浮动元素必须要有宽度,对于块状元素来说会当浮动元素不存在一样而对于内联元素来说会考虑浮动元素的边界而围绕这个浮动元素

清除浮动:clear:left/right/both--->元素左/右边不允许有浮动内容,如有元素会自动下移

定位:

静态定位(默认):position:static--->按照标准流排放

绝对定位:position:absolute--->通过设置top、left、bottom、right属性定位元素相对于最近的非标准流的祖先元素移动,如果没有则相对body移动。元素会从标准流中完全删除,无论块状元素还是内联元素均会当绝对定位元素不存在一样

相对定位:position:relative--->会让元素正常流入页面,相对原位置偏移并保留原位置

固定定位:position:fixed--->元素相对于浏览器窗口的位置,固定元素永远也不会移动

z-index:绝对定位、相对定位和固定定位都有一个z-index属性来设置当定位元素重叠时的显示顺序,z-index值大者显示顺序在前

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值