高频CSS面试题

给大家推荐一个实用面试题库

1、前端面试题库 ( 面试必备)推荐:★★★★★

地址:web前端面试题库

BFC

块级格式上下文(block format context)是页面一块独立的渲染区域,具有一套独立的渲染规则

  • 内部的盒子会在垂直的方向上一个接一个地放置
  • 同一个bfc内部相邻的盒子margin会发生重叠,与方向无关
  • 每个元素的左外边距和包含块的左边界相接触(从左到右),即使浮动元素也是如此(bfc的子元素不会超出包含块,但绝对定位可以)
  • 清除浮动只能清除同一BFC在它前面的元素的浮动
  • BFC就是页面上的一个隔离的独立容器,里面的元素和外部的元素互不影响
  • 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
  • bfc的区域不会与float的元素区域重叠 目的是为了形成一个相对于外界完全独立的空间,让里面的元素和外部的元素互不影响

如何创建 bfc

  • html 根元素
  • 浮动 float不为none
  • 绝对定位 position为absolute/fixed
  • 行内块元素 display为inline-block
  • overflow 不为 visible或者clip(auto/hidden)
  • diplay为flow-root
  • 弹性元素 display为flex或flex-inline
  • 表格单元格 display为table-cell
  • 表格标题 display为table-caption
  • 匿名表格单元格元素 display为table、table-row、table-row-gr藕片、table-header-group、table-footer-group、inline-table
  • contain的值为layout、content、paint
  • 网格元素 display为grid或grid-inline
  • 多列容器column-count或column-width值不为auto,且含有column-count:1的元素
  • column-span值为all的元素会创建一个新的格式化上下文,即使该元素没有包裹在一个多列容器中

bfc 的作用

  1. 清除内部或者外部的浮动
  2. 防止同一 bfc 容器中的相邻元素间的外边距重叠问题

使用场景

  1. 高度坍塌(内部浮动导致的问题)
javascript 复制代码
<style>
    .father{
      background-color:red;
      /* 解决 */
      /* display:flow-root */
      /* overflow:auto */
    }
    .son1{
      background-color: blue;
      width: 100px;
      height: 200px;
      float: left;

    }
    .son2{
      background-color: green;
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>
</body>
  1. 外边距折叠

  2. 外边距合并

  3. 三栏布局

javascript 复制代码
<html>
	<style type="text/css">
  .left{
    float: left;
    width: 200px;
    height: 100px;
    background-color: green;
  }  
 .right{
    float: right;
    width: 200px;
    height: 100px;
    background-color: pink;
  }
  .center{
    overflow: hidden;
    /* 如果不写,center的width和wrapper的width一样 */
    height: 100px;
    background-color: yellow;
  }
  </style>
	</head>
	<body>
       <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
    </div>
	</body>
</html>

居中

定宽高

  • absolute+负margin
  • absolute+margin auto
  • absolute+calc 不定宽高
  • absolute+transform
  • lineheight
  • writing-mode
  • table
  • css-table
  • flex
  • grid

absolute+负margin

javascript 复制代码
<div class="father">
  <div class="son"></div>
</div>
javascript 复制代码
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -(父元素宽度-子元素宽度)/2 px;
  margin-top: -(父元素高度-子元素高度)/2 px;
}

absolute+auto

javascript 复制代码
<div class="father">
  <div class="son"></div>
</div>
javascript 复制代码
   .father{
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .son{
      background-color: black;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

absolute+cale

javascript 复制代码
<div class="father">
  <div class="son"></div>
</div>
javascript 复制代码
.father {
  width: 200px;
  height: 200px;
  position: relative;
}
.son {
    width: 100px;
      height: 100px;
  position: absolute;
  top:cale(50% - 50px);
  left:cale(50% - 50px);
}

absollute+transform

javascript 复制代码
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

flex

javascript 复制代码
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

grid

javascript 复制代码
.father {
  display: grid;
}
.son {
  justify-self: center;
  align-self: center;
}

一些概念

  • 屏幕尺寸:用对角来计算。1英寸=2.54厘米

  • 像素:硬件和软件所能控制的最小单位。

  • 屏幕分辨率:一个屏幕具体由多少个像素点组成

  • 物理像素:设备的像素点个数

  • 逻辑像素:让n个像素当一个像素使用

  • 视觉视口

  • 理想视口:所谓理想视口,即页面绘制区域可以完美适配设备宽度的视口大小,不需要出现滚动条即可正常查看网站的所有内容,且文字图片清晰,如所有iphone的理想视口宽度都为320px,安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放

html 复制代码
<meta name="viewport" content="width=device-width,initial-scale=1" />

移动端适配方案

rem

html 复制代码
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable="no"/>
  <style>
    .box{
      width:10rem;
    }
  </style>
  <script>
    function setRootRem(){
      const root = document.documentElement;
      const scale = root.clientWidth / 10;
      root.style.fontSize = scale + 'px'
    }
    setRootRem()
    window.addEventListener('resize', setRootRem)
  </script>
</head>

但这样我们会发现在写布局的时候会非常复杂,也就是你需要自己手动去计算一下对应的rem值,比如上面的font-size设计稿上是20px,那我们就要计算一下20px对应的rem是多少,按我们上面的规则,1px = 1/37.5rem,所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less

复制代码
@device-width:375;
@rem:(@device-width/10rem)

然后将@rem配置成less全局变量

复制代码
font-size:(24/@rem)
特点
  • 适配原理稍复杂
  • 需要使用JS
  • 设计稿标注的px换算到rem
  • 方案灵活,既能实现整体缩放,又能实现局部不缩放

vw、vh适配

rem.less

css 复制代码
@device-width:375;
@vw:(100vm/@device-width)
css 复制代码
font-size: 16*@vw
特点
  • 适配原理简单
  • 不需要JS即可适配
  • 设计稿标注的px换算到vw
  • 方案灵活,既然实现整体缩放,又能实现局部不缩放

px

javascript 复制代码
export function initViewport() {
    const width = 375;  // 设计稿宽度
    const scale = window.innerWidth / width
    // console.log('scale', scale)
    let meta = document.querySelector('meta[name=viewport]')
    let content = `width=${width}, init-scale=${scale}, user-scalable=no`
    if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
    }
    meta.setAttribute('content', content)
}
  • 适配原理简单
  • 需要JS
  • 无需转换
  • 方案死板,只能实现页面级别肢体缩放

CSS3动画

CSS3动画分为transition、animation、transform

transition(过度)

复制代码
transition: transition-property transition-duration transitino-timing-function transition-delay

包含四个属性 transition-property:执行变换的属性 transition-duration:变换延续的时间 transitino-timing-function:在延续的时间段变换的速率变化 transition-delay:变换延迟时间

transitino-timing-function具体值
  • linear 缺点:
  • 不能重复
  • height:auto不会产生动画效果
  • 不支持所有的属性
支持的属性
  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • clip
  • color
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • max-height
  • max-width
  • min-height
  • min-width

animation

keyframes规则用于定义动画的每个阶段。通过keyframe规则,可以指定动画的每个关键帧。

css 复制代码
@keyframes example{
  0%   {left: 0; top:0px;}
  50%  {left:200px; top:200px;}
  100% {left: 0px; top:0px;}
}
div {
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction:alternate;
	animation-play-state:running;
}
详细属性
  • animation-name:指定应用的动画名称
  • animation-duration:指定动画的持续时间
  • animation-timing-function:指定动画的速度曲线
  • animation-delay: 指定动画开始之前的延长时间
  • animation-interation-count: 指定动画应该重复的速度
  • animation-direction: 指定动画的方向
  • animation-fill-mode: 指定动画在执行之前和之后如何应用样式
  • animation-play-state:指定动画运行或暂停

transform(变换)

旋转

2D transform:rotate(angle)顺时针 3D

transform:

  • rotate(x,y,z,angle) x轴y轴z轴 angle:旋转角度
  • rotateX(angle)
  • rotateY(angle)
  • rotateZ(angle)
缩放

2D transform:scale(x,y) 3D transform:scale3D(x,y,z) scaleX() scaleY() scaleZ()

倾斜

stransform:skew(x) stransform:skew(x,y)

移动

transform:translate(x) transform:translate(x,y) transform:translate(x,y,z) transform:translateX() transform:translateY() transform:translateZ()

给大家推荐一个实用面试题库

1、前端面试题库 ( 面试必备)推荐:★★★★★

地址:web前端面试题库

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试