浮动&定位
1、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动盒不在普通文档流内,在浮动盒之前或之后创建的未定位的块盒会竖直排列,就像浮动不存在一样,然而接着浮动盒创建的当前及后续的行盒会进行必要的缩短,为了给浮动盒让出空间。
浮动元素对父容器的影响:由于浮动元素脱离了普通文档流,其父容器在计算宽高的时候发现不了浮动元素,故浮动元素无法撑开父容器,如:某块级容器中子元素全部为浮动元素,则父容器高度为0;
浮动元素对其他浮动元素的影响:浮动元素向左或向右浮动,直到其外边缘挨到包含块边缘或另一个浮动元素的外边,但有时后续浮动的元素会被前一个浮动元素的边缘卡住;
浮动元素对普通元素的影响:普通元素无法发现浮动元素,故在解析渲染页面的时候,普通元素会忽视浮动元素的存在,按照html正常规则去渲染页面,此时就会出现普通元素被浮动元素覆盖;
浮动元素对于文字的影响:普通元素无法发现浮动元素,但是文本可以发现,故文本会紧挨着浮动元素边进行渲染,包围在浮动元素的周围。
2、清除浮动指什么?如何清除浮动? 两种以上方法。
清除浮动是指通过某种手段设置,使后续文档流元素能正常给浮动元素让出位置按html渲染规则正常渲染页面,同时使得浮动元素父容器被撑开,实现元素浮动的同时又不脱离文档流的效果,这就是清除浮动。
清除浮动的方法:
a. 在浮动元素后添加一个块级空元素,通过加上clear:both;属性将其顶部设置到浮动元素的下方,实现清除浮动;
b. 为浮动元素父容器中尾部添加伪元素,设置伪元素为block及clear:both;来实现清除浮动。
两种方法其本质都是在浮动元素后加入一个内容为空的块级元素,来实现浮动元素与后续普通元素的分割,不至于浮动元素与后续的重叠,同时撑开父容器。
3、有几种定位方式?分别是如何实现定位的?参考点是什么?
常见的主要有以下五种定位方式:
a. 静态定位:html默认定位,基本语法`position:static;`,
b. 相对定位:相对于默认位置进行定位,定位后位置相对默认位置发生相应偏移,但占据文档流的位置不会发生改变,定位元素没有脱离文档流;
c. 绝对定位:相对于祖先元素中具有position:relative/absolute/fixed定位之一的祖先进行定位,定位元素完全脱离文档流;
d. 固定定位:相对于浏览器窗口进行定位,定位元素始终处在窗口某个固定位置,代码格式:`position:fixed;`;
e. sticky定位:相对定位和固定定位的结合,默认情况下表现为相对定位,在页面中正常展示,当浏览器窗口顶部与元素的距离等于top属性的值时,转为固定定位;代码格式:`position:sticky;`。
4、z-index有什么作用?如何使用?
z-index用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于低堆叠顺序的前面。
使用方式:只有在使用了position并脱离了文档流的情况下可以使用,其他情况下使用z-index不起作用;
语法格式:z-index:auto | number | inherit 默认|数字|继承父元素z-index
a. 对于脱离文档流的同级元素,不设置z-index情况下后面元素会覆盖前面元素;
b. 对于脱离文档流的同级元素,设置了z-index后,z-index大的会覆盖z-index小的元素;
c. z-index为auto的元素不参与层级关系的比较,由向上遍历至z-index不为auto的元素来进行比较。