1. link标签和import标签
link属于html标签,而@import是css提供的
页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。
link支持使用JS修改样式,而@import不支持。
2. BFC
BFC:块级格式化上下文,用于清楚浮动,防止margin重叠等,是一个独立的渲染区域,并且有一定的布局规则。其中比较重要的布局规则有内部box垂直放置,计算BFC的高度的时候,浮动元素也参与计算。
BFC区域不会与float box重叠。
BFC是页面上的一个独立容器,子元素不会影响到外面。
- 那些元素会生成BFC:
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption,flex,inline-flex的元素
overflow不为visible的元素
常见的定位方案:
- 普通流 (normal flow)
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。
- 浮动 (float)
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
- 绝对定位 (absolute positioning)
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
3. position属性
固定定位fixed:
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。
相对定位relative:
生成相对定位的元素,相对于其在正常文档流中的位置进行定位,不脱离文档流。在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位absolute:
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky:
元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
默认定位static:
默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。
inherit:
规定应该从父元素继承position 属性的值。
z-index:
数值越大拥有的优先级越高,该属性只对使用了定位的元素(position:relative/absolute/fixed/sticky)有效。
z-index可以为负
-
z-index不起作用的两种情况:
父标签 position属性为relative;
该标签无position属性(不包括static);
该标签含有浮动(float)属性。
该标签的祖先标签的z-index值比较小
-
解决办法:
第一种: position:relative改为position:absolute;
第二种:浮动元素添加position属性(如relative,absolute等);
第三种:去除浮动。
第四种:提高父标签的z-index值
初学者一枚,如有问题欢迎指正~