CSS面试知识点

kakayuii
377 阅读12分钟

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

创建层叠上下文：

  1. z-index值不为auto的flex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch

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-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
  • 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（前两者简写）

引申：flex布局应用场景

  1. 导航中左右布局
  <header>
     <nav>aa</nav>
     <div>bb</div>
  </header>
  header{
  	display:flex;
    align-items:center;
  }
  header div{
  	margin-left:auto;
  }
  1. 实现两栏布局，宽度不够的时候用flex-wrap:wrap实现上下布局
  <div class="main">
     <nav>aa</nav>
     <div class="content">bb</div>
  </div>
  div.main{
  	display:flex;
    flex:wrap;  
  }
  div.main nav{
    flex:0 0 300px;
  }
  div.main div.content{
  	flex:1 0 0;
  }

3.固定底栏

<body>
   <header>头</header>
   <section>中</section>
   <footer>尾</footer>
</body>

body{
  display:flex;
  flex-direction:column;
}
section{
  flex:1;
}
html,body{
  height:100%; //父元素一定要设置高度
}
  1. 选项卡伸展
div.content{
	flex:1;
}
div.content > div:hover{
	align-self:stretch;
}

grid和flex区别

  • CSS grids 适用于布局大画面。它们使页面的布局变得非常容易，甚至可以处理一些不规则和非对称的设计。
  • Flexbox 非常适合对齐元素内的内容。可以使用 Flex 来定位设计上一些小细节。
  • 2D 布局适合使用 CSS grids（行与列）。Flexbox 适用于单一维度的布局（行或列）

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;

引申：

网站布局的五种方式：
  1. 静态布局（static layout）
  2. 流式布局（Liquid Layout）
  3. 自适应布局（Adaptive Layout）
  4. 响应式布局（Responsive Layout）
  5. 弹性布局（rem/em布局）
div等分布局可以使用以下几种方式
  • float
  • inline-block
  • table
  • flex
  • grid

参考链接：实现CSS等分布局的5种方式

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

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

13.position属性

  • position: relative;相对定位：相对于自身原本位置进行偏移
  • position: absolute;绝对定位：将元素设置为绝对定位元素。元素将脱离文档流，不再占据自己原来在文档流中的位置，可以理解为漂浮在文档流的上方。绝对定位相对于上一个设置了定位的父级元素(relative, absolute, fixed)来定位，如果没有找到设置了定位的父级元素，则相对于浏览器窗口进行定位
  • position: fixed;固定定位：相对于浏览器窗口进行定位
  • position:static;：默认值：元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
  • position: sticky; 粘性定位：基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意：z-index只能在position属性值为relative或absolute或fixed的元素上有效。（两个都为定位元素，后面的会覆盖前面的定位）

14.盒模型

  • content-box：W3C盒模型（标准盒模型），标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度，设置的宽度就等于内容的宽度

  • border-box：怪异盒模型(又称ie盒模型)，标签得实际宽度 = 设置的宽度，内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

15.选择器权重

  1. 第一等：代表内联样式，如: style=””，权值为1000。
  2. 第二等：代表ID选择器，如：#content，权值为0100。
  3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
  5. 通配符、子选择器、相邻选择器等的。如*、>、+，权值为0000。
  6. 继承的样式没有权值。

在权重相同的情况下，后面的样式会覆盖掉前面的样式。通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先

16.rem缺点

缺点：在响应式布局中，必须通过js来动态控制根元素font-size的大小。或者是必须引入相关插件 也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前

17.自适应和响应式的区别

  • 响应式网页布局设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
  • 自适应网页布局设计指网页能够在不同大小的终端设备上自行适应显示。简单来说：就是让一个网站在不同大小的设备上呈现显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放

不同点：

  1. 响应式网站在不同的设备上看上去是不一样的，会随着设备的改变而改变模板样式、模块排版、展示样式

  2. 自适应不会，所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

18. less中怎么使用循环

  .xkd(@n, @i: 1) when (@i =< @n) {
  .grid@{i} {
    width: (@i * 100% / @n);
  }
  .xkd(@n, (@i + 1));
}

.xkd(5);

参考链接：Less 循环

19.关于svg

SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas

SVG有什么优势？

  • 文件体积小，能够被大量的压缩
  • 图片可无限放大而不失真(矢量图的基本特征)
  • 在视网膜显示屏上效果极佳
  • 能够实现互动和滤镜效果
avatar
文章
阅读
粉丝