CSS常用知识点

1.BFC

参考：
学习 BFC (Block Formatting Context)

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件：

• display:inline-block/table(table-cell/table-caption等)/flex/inline-flex/flow-root
• position:absolue/fixed
• float的值不为none
• overflow!=visible
• 根元素或其它包含它的元素
• column-span: all;横跨多少列

作用：

• 去除浮动影响，防止父级高度塌陷，因为计算BFC高度时浮动元素也参与计算
• 阻止元素被浮动元素覆盖，因为BFC的区域不会与float的元素区域重叠
• 自适应两栏布局、多栏布局
• 阻止margin重叠：
  • 阻止子元素和父元素重叠(margin-top)
  • 阻止同一个BFC下相邻的子元素重叠（可给其中一个自元素设置BFC）

扩展：有哪些方法去除浮动，防止父级高度塌陷？

• 通过增加尾元素清除浮动：:after/<br>{clear:both}
• 创建父级BFC
• 父级设置高度

2.层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
从上往下：

• z-index为正值
• z-index：0 ：没有设置z-index的层叠上下文
• 行内元素
• 浮动元素
• 块级元素
• z-index为负值
• background/border

3.flex布局

整体容器：

• align-items:center|flex-start|flex-end|baseline|stretch
• justify-content:center|space-around|space-between|flex-start|flex-end
• flex-direction:row（默认水平方向）|column|row-reverse|column-reverse
• flex-wrap:nowrap（默认不换行）|wrap|wrap-reverse
• flex-flow（flex-direction和flex-wrap简写）:row nowrap（默认）
• align-content（多根轴线的对齐方式）:center|space-around|space-between|flex-start|flex-end|stretch

子元素项目：

• flex:0 1 auto（默认值）;表示flex-grow:0（项目的放大比例）;flex-shrink:1（项目的缩小比例）;flex-basis:auto（项目占据的固定空间）;
  • flex:auto(1 1 auto)
  • flex:none(0 0 auto)
• align-self:auto（默认值，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）|center|flex-start|flex-end|baseline|stretch
• order（项目的排列顺序，数值越小排列越靠前）

参考链接：Flex 布局教程：语法篇

引申：grid布局

容器：

• grid-template-columns |grid-template-rows
  • repeat:grid-template-columns:repeat(3, 33.33%);
  • auto-fill
  • fr
  • minmax()
  • auto
• row-gap（行间距） |column-gap（列间距）|gap（前两个的缩写）
• grid-template-areas：用于定义区域
• grid-auto-flow:row（默认先行后列）| column | row dense | column dense
• justify-items（设置单元格内容的水平位置） | align-items（设置单元格内容的垂直位置） | place-items（前两者简写形式）
• justify-content （整个内容区域在容器里面的水平位置）| align-content （整个内容区域在容器里面的垂直位置）| place-content （前两者简写形式）
• grid-auto-columns | grid-auto-rows浏览器自动创建的多余网格的列宽和行高

项目属性：

• grid-column-start：左边框所在的垂直网格线| grid-column-end：右边框所在的垂直网格线 |grid-column（前两者简写）
• grid-row-start：上边框所在的水平网格线| grid-row-end：下边框所在的水平网格线 |grid-row前两者简写
• grid-area ：指定项目放在哪一个区域
• justify-self（设置单元格内容的水平位置）| align-self（设置单元格内容的垂直位置） | place-self（前两者简写）

4.布局

水平居中布局：

• position:absolute；left:50%;transform:translateX(-50%)
• display:flex;justify-content:center
• margin:0 auto
• text-align:center

垂直居中：

• line-height
• display:flex;align-items:center
• display:table-cell;vertical-align:middle;
• position:absolute；top:50%;transform:translateY(-50%)

水平垂直居中：

• position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
• display:table-cell;vertical-align:middle;
• display:flex;align-items:center;justify-content:center;

5.如何实现左侧宽度固定，右侧宽度自适应的布局

• float+margin
• calc
• float+overflow
• flex

参考链接：两年工作经验成功面试阿里P6总结

6.display:inline-block之间为什么有间隔

• font-size:0
• letter-spacing：0 |负值
• word-spacing
• 移除空格
• 使用margin负值

参考链接：去除inline-block元素间间距的N种方法

7.选择器优先级

选择器从右向左解析
!important> id选择器> class选择器 >标签选择器 >* >继承>默认

8.link与@import的区别

	link	@import
功能	可以定义RSS，定义Rel等	只能加载CSS
解析	页面会同步加载所引的css	会等到页面加载完才被加载
兼容		IE5以上才能使用
是否动态引入	使用js动态引入	不可以

9.CSS动画

• transition:属性名默认为all 时长 曲线 延时
• animation:动画名字 动画时间 曲线（linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier ）延迟时间 次数 方向
  • animation-fill-mode(静止模式)：forwards(停止时，保留最后一帧) | backwards(在 animation-delay所指定的一段时间内，在动画开始之前属性值) |both两者皆可
• transform:
  • translate
  • scale
  • rotate
  • skew

参考链接：中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)

引申：动画的实现方案有哪些？有哪些动画优化的方案？

优化：

• 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速。一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性。原因是因为：
  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform:ranslateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite
• 尽可能少的使用box-shadow与gradient。box-shadow与gradient往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们
• 尽可能的让动画元素不在文档流中，以减少重排。比如使用定位
  引申：css3结束动画时会出现闪烁问题
• 如果没有特别规定动画结束后的状态的话，动画在结束后都会直接跳回到动画未执行时候的原始状态。解决方法：添加animation-fill-mode:forwards

10.如何解决移动端 Retina 屏 1px 像素问题

• border-image
• background-image
• 多背景渐变
• box-shadow

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

• viewport +rem
• 伪元素+transform

11.已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

  <img src="1.jpg" style="width:480px!important;”>

1. css方法
   • max-width:300px;覆盖其样式；
   • transform: scale(0.625);按比例缩放图片；
   • box-sizing: border-box;padding: 0 90px;
2. js方法
   • document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

12.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。

1. 结构：

   • display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间， 不能点击
   • visibility: hidden：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容 不可见，不能点击
   • opacity: 0：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承：

   • display: none和opacity:0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
   • visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible，可以让子孙节点显示。

3. 性能：

   • display:none : 修改元素会造成文档回流，读屏器不会读取display: none元素内容，性能消耗较大
   • visibility:hidden:修改元素只会造成本元素的重绘，性能消耗较少。读屏器读取visibility: hidden元素内容
   • opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见