css 面试盘点

BFC的问题

关于浮动定位等知识详解，点击进入

BFC: 块级格式化上下文 （规定的内部块级元素的布局方式，默认只有body一个块级上下文）
规则：

1. 属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并
2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
3. 计算BFC的高度时，浮动元素也参与计算。

创建一个BFC：

1. float的值不为none；
2. overflow的值不为visible；
3. position的值为fixed / absolute；
4. display的值为table-cell / table-caption / inline-block / flex / inline-flex。

BFC应用：

1. 清除浮动
   当给.parent设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是 如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

   除了给.parent设置"overflow:hidden"，我们还可以设置"display:inline-block"、“position:absolute”、"float:left"等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）：

2. 消除margin合并

   对于父子元素，我们可以通过设置padding、border、inline content、height、min-height、max-height等属性来消除；但是相邻的兄弟元素之间必出现margin合并，这时如果想要消除margin合并，又该怎么办？
   我们首先要搞清楚为什么会发生margin合并。这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，是因为它们属于同一个BFC。所以，我们就知道怎么办了，只要让它们不属于同一个BFC不就可以了？

选择器使用记录

• 伪类选择器

/* 选择最后一个元素 */
last-child 
/* 选择偶数项 */
nth-of-type(2n)

• 奇数，偶数选择器

/* 偶数 */
section:nth-child(even) {
  background: #ffffff;
}
/* 奇数 */
section:nth-child(odd) {
  background: #f5f5f6;
}

样式

• 设置背景色为透明

  background-color: rgba(248, 248, 248,0);

• 使用CSS渐变 设置背景色渐变

  background-image: linear-gradient(-44deg, #5584ff 0%, #2e33af 100%);

• 设置盒子的阴影

  box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);

• text-overflow: ellipsis; // 必须保证改其父元素是块级元素

• white-space: nowrap;

• list-style: none;

• text-decoration: none;