CSS - 浮动,绝对定位,相对定位

2018-01-11 12:51:56来源:网络收集作者:管理员人点击

分享

阿里云爆款
1. 文档流

文档流是文档中的盒子模型按顺序排列形成的,是相对于盒子模型讲的。
文本流是由文字段落组成的。
浮动、绝对定位、相对定位使得元素脱离文档流。


2. 浮动 float
1) 特性

元素添加 float 属性浮动后,会跳出文档流,加入当前盒子模型的浮动流。
当浮动元素后面还有正常文档流中的元素时,会直接在浮动元素的下面布局(可以通过构建 BFC 防止覆盖)。但是文本流中的文字会围绕浮动元素布局,不会被覆盖(文档流会被浮动元素覆盖,文本流则不会)。
如果包含块所剩空间不足以容纳下一个浮动元素,这个浮动元素会自动另起一行。新行的浮动元素并不是靠左对齐,而是靠上对齐(靠近高度最小的浮动元素)。示例:
CSS - 浮动,绝对定位,相对定位


2) 值

float 属性的三个值:none(默认),left 左浮动,right 右浮动。


3) 清除浮动
1. clear

clear 属性的值可以是 left,right,both,none,表示块级元素的哪些边取消可能存在的浮动。
clear: left; 清除左侧的浮动对象。
clear: both; 清除两侧的浮动对象。


浮动元素脱离文档流,导致只有浮动子元素的父元素塌陷。可以在浮动元素最后加一个 div,设定 clear: both;(这是无意义的标记,仅用于实现样式)防止塌陷,同时后面的元素不再受浮动影响。


2. overflow

overflow 属性的值设为 hidden 或 auto 时,可以自动清理包含的所有浮动元素。


3. :after 伪类和内容声明

声明为 block 块级元素独占一行,同时高度为0不占空间,visibility 为 hidden 用户不可见,同时清理所有浮动(不需要添加无意义的标记)。


.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
5) 示例

多个浮动元素依次排列:
CSS - 浮动,绝对定位,相对定位
浮动元素覆盖正常文档流的元素:
CSS - 浮动,绝对定位,相对定位
文本流不会被浮动定位的元素覆盖:
CSS - 浮动,绝对定位,相对定位
清除浮动:
CSS - 浮动,绝对定位,相对定位


3. 绝对定位

绝对定位后,盒子元素会完全脱离文档流,文字元素也会脱离文本流。
对于正常文档流中的元素而言,绝对定位的元素是不存在的。
绝对定位的元素的位置,是相对于距离它最近的已定位的祖先元素而言的。若没有已定位的祖先元素,则相对于初始包含块(画布或 HTML 元素)。可以在包含块的 top,left,bottom,right 四个方向移动。
z-index 可以设置 z 轴高度,数字越大则越靠上,不容易被覆盖。


4. 相对定位

相对于元素最初的位置,做偏移。可以在 top,left,bottom,right 四个方向做偏移。
相对定位属于普通文档流。
使用相对定位时,不管元素是否移动,元素在文档流中仍然占据原先的空间。不影响其他元素的布局,但是可能会覆盖其他元素。


div {
position: relative;
left: 100px;
top: 100px;
}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台