深入理解CSS｜ 青训营

青训营css笔记

样式继承计算

布局的相关技术

css个人笔记

1.你了解过z-index，简单介绍下：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：z-index 仅能在定位元素上奏效！
可能用到值：
auto——默认。堆叠顺序与父元素相等。
number——设置元素的堆叠顺序。
inherit——规定应该从父元素继承 z-index 属性的值。

适用的元素：
必须在定位元素（position:relative/absolute/fixed/sticky）上才有效
所以z-index是一种依赖属性，依赖position属性。

2. 你了解过BFC机制吗，简单介绍下：

（1）概念：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

（2）建立方式：

1.开启浮动：浮动元素 float ＝ left | right 或 inherit（≠ none）；
2.绝对定位元素 position ＝ absolute 或 fixed；
3.设置display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
4.设置overflow ＝ hidden | auto 或 scroll (≠ visible)

(3)作用：

1.解决高度塌陷问题：
子类用float，父类高度塌陷，父类用overflow: hidden，塌陷解决
2.解决和父类的外边距重叠：

3. 你了解或遇到过高度塌陷问题吗，说下你对此的认知，解决方法：

（1）父类定义：overflow: hidden
（2）使用after伪类解决高度塌陷问题

4.说下你了解过的定位方式，并简单介绍其使用方法，效果：

1.静态定位-static

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

2.相对定位-relative

相对定位的特点就是元素本身在文档流中的占位不变，但显示效果相对于它原本的位置发生了改变，它的替身在参照本体进行移动。

3.绝对定位-absolute（重点问）

以父级为参照进行定位，如果所有父级都没有设置相对定位，那么它将根据根元素html进行偏移。

4.固定定位-fixed

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。
固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。

5.粘性定位-sticky

sticky粘性定位，这个定位属性是【position：sticky；】，需要至少设置【top、left、right、bottom】四个属性之一，否则不生效。sticky粘性定位，可以看作是：【static静态定位】和【fixed固定定位】的结合体，最开始默认是static静态定位，当相对于父元素满足定位条件的时候，sticky粘性定位就会由static静态定位转变为fixed固定定位。

5.说下你了解过的让一个盒子水平垂直居中的方法：

方法一：利用文本水平居中text-align: center和行高line-height进行实现
可以先通过display将子盒子转换为行内块显示模式，然后利用文本水平居中和行高获得最终子盒子的水平和垂直居中。由于对齐方式的不同，需要给子盒子添加vertical-align: middle;
如：

方法二：利用子绝父相和外边距margin实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且绝对定位的四个方向的位移都设为0，然后将外边距margin属性值设置为auto即可。

方法三：利用子绝父相和左、上外边距实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。

方法四：利用子绝父相和位移实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用位移transform: translate;将子盒子分别向左、向上移动子盒子的一半。

方法五：利用flex布局实现
首先在父元素中添加display:flex;使其显示模式为flex布局模式，然后在父元素中添加主轴居中和侧轴居中即可。