默认的文档流(不加任何修饰,自动布局)
块级元素 上下结构
行内元素 左右结构
块级元素宽度为父级的百分百
项目应用:第一层布局 div默认 h5语义标签
display:
block 块级元素默认
inline-block 项目应用:简单的菜单 行内块级元素
inline 行内元素默认
float脱离文档流
脱离文档流,对后续元素的结构有影响
多个浮动元素在一个浮动流中并排显示,如果一排放不下,就会换行显示
对父元素没有支撑作用
清除浮动
位于浮动元素下的非浮动元素会显示到浮动元素的下面,非浮动元素中的文字会环绕在浮动元素周围,这并不是我们想要的。要想让该非浮动元素位于浮动元素之后 (单独一行)需要清除浮动。
父元素 添加overflow:hidden;(不推荐使用)
- 优点:代码简洁
- 缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素,不推荐使用
最后一个浮动标签后 额外标签法 clear:both;(不推荐使用)
div.clear{float:none;/height:0;/clear:both;}
在最后一个浮动标签后,新加一个标签,给其设置clear:both;
- 优点:通俗易懂,方便
- 缺点:添加无意义标签,语义化差
父元素 伪元素,使用after伪元素清除浮动(推荐使用)
首先给浮动的元素加一个父容器
给这个父容器添加一个类 样式 clearxxx
clearxxx的设置如下:
.clearxxx::after{
content: "";
display: block;
clear: both;}
- 优点:符合闭合浮动思想,结构语义化正确
- 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout
原理:假元素,空元素, 后面跟了一个空的块级元素
定位(利用position属性)布局
static:静态定位
- 默认布局,是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中
- 类如top,left之类的属性设定不起作用,只有类如margin-top的属性设定才起作用
相对定位
- 不脱离文档流,原先位置保留
- 元素本身浮动时,所在位置不会被后面元素占据
- 前一个元素float,脱离文档流,后一个元素若是相对定位,相对的起始位置会因前面元素浮动而发生变化
- 如果不设置top,bottom,left,right属性,依然在原位置。对于相对定位的元素,可以通过属性top,bottom,left,right来改变元素的最终位置。元素移动的时候是相对于当前元素所在的位置进行移动
- 块级宽度100%,宽度依旧保持百分百
- top与margin-top对元素都发生作用,这两设定不互相影响,不会抵消(static定位时,类如top,left之类的设定不起作用,只有类如margin-top的属性设定才起作用)
绝对定位 absolute
- 元素脱离了文档流,即不在原来的位置上。
- 在没有设置定位属性的情况下,默认在原先的位置脱离文档流。
- 不干扰其他元素在页面中的位置,显示在其他元素的上方。
- 没有定位祖先元素的,相对于视口区的左上角定位。
- 有定位祖先元素的,相对于定位祖先元素进行定位。
粘性定位( Sticky positioning ) CSS3新增(特有)
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(此时相当于fixed定位)。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以 滚动,那么是相对于viewport(视口区)来计算元素的偏移量。
position: sticky;
实际应用场景:网易严选右侧
注意点:由于是relative+fixed ,设置粘性定位的盒子 需要写在body下面 ,否则不起作用
z-index
不加position不生效,两个元素同时要加position
当两个定位元素叠加在一起的时候,可以使用“z-index”来改变两个定位元素出现的顺序( z-index 取值无需指定单位,值大的显示在上方。 )
分类
satatic 静态定位:不脱离文档流,
relative 相对定位:不脱离文档流,原有位置依旧占据
absolute 绝对定位:脱离了文档流,原有位置不保留
fixed 固定定位:脱离了文档流,原先位置不保留
定位常用搭配:
浮动布局
float+margin clear
定位布局:
positon:static 没有搭配
position:relative,absolute,fixed(主要找临界值)+top/left/right/bottom+ z-index