1.什么是标准流(Normal Flow)
-
默认情况下,元素都是按照normal flow(标准流、文档流)进行排布
-
从左到右,从上到下顺序摆放好
-
默认情况下,互相之间不会发生层叠现象
-
正在标准流的话可以用margin、padding对元素进行定位
-
但是有个缺点就是设置一个元素的margin或者padding,会影响到标准流其他元素的定位效果、还有一个缺点就是不便于实现元素层叠效果
-
2.讲讲元素的定位
-
定位的话可以实现标准流做不到的事情,比如把一个元素放在另一个元素的上面,or始终保持在浏览器视窗内的同一个位置;
-
定位的话属性是position,常用的取值有五个分别是
-
static:默认值,静态定位
-
元素按照normal flow布局 就是标准流 然后他的top啊、bottom啊都没有任何效果
-
-
relative:相对定位
-
元素按照normal flow布局,可以利用;top啊left这些进行定位,定位参照对象是元素自己原来的位置
-
-
absolute:绝对定位
-
脱标,定位参照对象是最临近的定位祖先元素,这里是最邻近定位祖先元素,举个例子就是
<div class="div"> <div class="box"></div> </div> 最临近的定位祖先元素,如果div设置了定位,box最邻近的定位祖先元素就是div,一般情况下会用父相子绝的一个策略
-
-
fixed:固定定位
-
元素会脱标,就是脱离标准流,可以通过left那些进行定位,定位参照对象是视口 当画布滚动的时候,固定不动。
-
-
sticky:粘性定位 (与固定定位不同的是结合了相对定位和固定定位)
-
这个是当到达阈值点的时候,就会变成固定定位or绝对定位
-
-
-
然后将position设置为绝对定位or固定定位的特点
-
1.可以随意设置宽高,宽高默认的话是由内容决定的
-
2.不再受标准流约束,不再严格区分块级、行内级、行内块级的很多特性会消失
-
3.不会给父亲元素汇报宽高数据
-
4.默认是按照标准流布局
-
5.对于绝对定位元素来说
-
定位参照对象的宽度 = left +right +margin-left + margin-right +绝对定位元素的实际占用的宽度
-
高度同理
-
如果希望绝对定位元素的宽高和定位参照对象一样的话,可以给定位元素设置left 0 right 0 margin 0 这个时候定位参照对象的宽度和绝对定位宽度一样。
-
如果希望绝对定位在定位参照对象中居中显示的话,可以怎样设置
-
left、right、top、bottom都设为0,margin设为auto,自动分配。
-
-
-
3.讲一讲z-index属性
-
z-index的属性是用来设置定位元素的一个层叠顺序的,仅对定位元素有效,取值可以是正or负or0
-
比较原则的话就是
-
如果是兄弟关系的话,z-index越大,层叠越在上面
-
如果不是兄弟关系的话
-
各自从元素自己以及祖先元素中,找到最邻近的2个定位元素进行比较
-
而且这两个定位元素必须设置了z-index的具体数值
-
-
4.讲一讲什么是浮动,以及浮动的规则
-
float属性可以指定一个元素应沿着容器的左侧或右侧放置,允许文本和内联元素环绕他
-
绝对定位和浮动的话都可以让元素脱标,达到灵活布局的效果
-
float常用取值有none、left、right
-
浮动的规则
-
元素一旦发生浮动,就会脱离标准流
-
朝着左or右边方向移动,知道自己的边界紧贴着包含快,一般是父亲元素或者其他浮动元素的边界为止
-
定位元素会层叠在浮动元素的上面。
-
-
如果元素是向左(右)浮动的时候,浮动元素的左(右)边界不能超出包含块的左(右)边界
-
浮动元素之间不能层叠
-
如果一个元素浮动,另一个元素已经在那个位置上了,后浮动的元素会紧贴着前一个浮动元素
-
如果水平方向剩余的空间不够显示浮动元素,浮动会将向下浮动,知道有充足的空间为止
-
-
浮动元素不能与行内级内容层叠,行内级内容浮动将会被浮动元素推出
-
比如行内级元素和行内块级元素
-
-
行内元素和行内块元素浮动后,其顶部将与所在行的顶部对齐
-
5.讲一讲浮动经典问题—高度塌陷问题
-
由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
-
父元素计算总高度的时候,就不会计算浮动子元素的高度,导致出现了高度塌陷问题
-
-
解决方案一般是清除浮动,让父亲元素计算总高度的时候,把浮动子元素的高度算进去
-
属性是clear,取值有四个
-
left:要求元素的顶部低于之前生成的所有左浮动元素的底部
-
right:要求元素的顶部低于之前生成的所有右浮动元素的底部
-
both:要求元素的顶部低于之前生成的所有浮动元素的底部
-
none:默认值,无特殊要求
-
-
清除浮动的方法有很多
-
给父亲元素设置固定的高度
-
扩展性不好
-
-
在父亲元素最后增加一个空的块级盒子,并且让他设置clear:both
-
会增加很多无意义的空标签,维护麻烦
-
违反了结构与样式分离的一个原则
-
-
给父亲元素添加伪元素,这个是最常用的
-
.clear_fix::after { content: ""; clear: both; display: block; /* 浏览器兼容 */ visibility: hidden; height: 0; } .clear_fix { /* IE6/7 */ *zoom: 1; } 开发中一般都是这个写法直接套用即可