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 ：修改元素会造成重绘，性能消耗较少

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容