字节跳动前端面试题:CSS 基础

实战教程  全栈技术  精选好文

注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。

(2)写代码:css div 垂直水平居中,并完成 div 高度永远是宽度的一半(宽度可以不指定)



  
    
    
    Document
    
  
  
    
      
        hello
      
    
  

参考链接

  • https://github.com/cttin/cttin.github.io/issues/2

请你讲一讲 CSS 的权重和优先级

权重

  • 从0开始,一个行内样式+1000,一个id选择器+100,一个属性选择器、class或者伪类+10,一个元素选择器,或者伪元素+1,通配符+0

优先级

  • 权重相同,写在后面的覆盖前面的

  • 使用 !important 达到最大优先级,都使用 !important 时,权重大的优先级高

参考链接

  • https://zhuanlan.zhihu.com/p/41604775

问:介绍 Flex 布局,flex 是什么属性的缩写:

  • 弹性盒布局,CSS3 的新属性,用于方便布局,比如垂直居中

  • flex属性是 flex-growflex-shrink 和 flex-basis 的简写

参考链接

  • https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

问:CSS 怎么画一个大小为父元素宽度一半的正方形?



  
    
    
    Document
    
  
  
    
      
    
  

CSS实现自适应正方形、等宽高比矩形

  • width 设置百分比

  • padding 撑高

  • 如果只是要相对于 body 而言的话,还可以使用 vw 和 vh

  • 伪元素设置 margin-top: 100%撑高

双重嵌套,外层 relative,内层 absolute



  
    
    
    Document
    
  
  
    
      hello
    
  

padding 撑高画正方形



  
    
    
    Document
    
  
  
    
      
    
  

相对于视口 VW VH



  
    
    
    Document
    
  
  
    
      
       

伪元素设置 margin-top



  
    
    
    Document
    
  
  
    
      
    
  


参考链接

(2)问:实现两栏布局的方式:

左 float,然后右 margin-left(右边自适应)



  
    
    
    Document
    
  
  
    
    
  


右 float,margin-right



  
    
    
    Document
    
  
  
    
    
  


BFC + float



  
    
    
    Document
    
  
  
    
    
  


float + 负 margin


  


hello

world

圣杯布局实现两栏布局



  
    
    
    Document
    
  
  
    
      你好
      我好
    
  


flex 实现两栏布局



  
    
    
    Document
    
  
  
    
      你好
      我好
    
  


参考链接:https://juejin.im/post/5e8d5268f265da480f0f9c6e#heading-8

position + margin



  
    
    
    Document
    
  
  
    
      你好
      我好
    
  


手写题:实现一个两栏三列的布局,并且要求三列等高,且以内容最多的一列的高度为准。

实现三列布局的方式

position + margin-left + margin-right



  
    
    
    Document
    
  
  
    
      
      
      
    
  


通过 float + margin



  
    
    
    Document
    
  
  
    
      
      
      
    
  


圣杯布局



  
    
    
    Document
    
  
  
    
      中间内容
      左侧区域
      右侧区域
    
  


双飞翼布局



  
    
    
    Document
    
  
  
    
      hello world
    
    你好
    王鹏浩
  


flex 布局



  
    
    
    Document
    
  
  
    
      hello world
      你好
      王鹏浩
    
  


参考链接

问:CSS 动画有哪些?

animation、transition、transform、translate 这几个属性要搞清楚:

参考资料

(3)问:用css2和css3分别写一下垂直居中和水平居中

CSS2

水平居中:

垂直居中

已知宽高,进行水平垂直居中



  
    
    
    Document
    
  
  
    
      
    
  


宽高未知,比如 内联元素,进行水平垂直居中



  
    
    
    Document
    
  
  
    
      我想居中显示
    
  

绝对定位的 div 水平垂直居中



  
    
    
    Document
    
  
  
    
      我想居中显示
    
  

图片和其他元素使用 display: table-cell; 进行垂直居中



  
    
    
    Document
    
  
  
    
      我想居中显示
    
  

CSS3

垂直、水平居中



  
    
    
    Document
    
  
  
    
      我想居中显示
    
  


(2)问:visibility 和 display 的差别(还有opacity)

问:opacity 可以有过渡效果嘛?

可以设置过渡效果

问:BFC 与 IFC 区别

BFC 是块级格式上下文,IFC 是行内格式上下文:

参考链接:

问:BFC会与float元素相互覆盖吗?为什么?举例说明

不会,因为 BFC 是页面中一个独立的隔离容器,其内部的元素不会与外部的元素相互影响,比如两个 div,上面的 div 设置了 float,那么如果下面的元素不是 BFC,也没有设置 float,会形成对上面的元素进行包裹内容的情况,如果设置了下面元素为 overflow:hidden;属性那么就能够实现经典的两列布局,左边内容固定宽度,右边因为是 BFC 所以会进行自适应。

参考链接

问:了解box-sizing吗?

box-sizing 属性可以被用来调整这些表现:

(2)什么是 BFC

BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件

五种:

BFC 的特性:

(2)问:了解盒模型吗?

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性。CSS盒模型:标准模型 + IE模型

标准盒子模型:宽度=内容的宽度(content)+ border + padding

低版本IE盒子模型:宽度=内容宽度(content+border+padding),如何设置成 IE 盒子模型:

box-sizing: border-box;

参考链接

问:说一下你知道的position属性,都有啥特点?

static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。sticky:具体是类似 relative 和 fixed,在 viewport 视口滚动到阈值之前应用 relative,滚动到阈值之后应用 fixed 布局,由 top 决定。

问:两个div上下排列,都设margin,有什么现象?

问:为什么会有这种现象?你能解释一下吗

是由块级格式上下文决定的,BFC,元素在 BFC 中会进行上下排列,然后垂直距离由 margin 决定,并且会发生重叠,具体表现为同正取最大的,同负取绝对值最大的,一正一负,相加

BFC 是页面中一个独立的隔离容器,内部的子元素不会影响到外部的元素。

问:清除浮动有哪些方法?

不清楚浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)

.float_div:after{
  content:".";
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
.float_div{
  zoom:1
}
● 从零搭建一款PC页面编辑器PC-Dooring● JS夸页面通信极简方案&纯前端实现文件下载● 基于Koa + React + TS从零开发全栈文档编辑器(进阶实战)

❤️爱心三连击

1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。

2.关注公众号趣谈前端,进程序员优质学习交流群, 字节, 阿里大佬和你一起学习成长!

3.也可添加微信【Mr_xuxiaoxi】获取大厂内推机会。

字节跳动前端面试题:CSS 基础_第1张图片

你可能感兴趣的:(html,css,3d,html5,css3)