• 高频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. 高度坍塌（内部浮动导致的问题）
    3. <body>
    4.   <div class="father">
    5.     <div class="son1">div>
    6.     <div class="son2">div>
    7.   div>
    8. body>

    截屏2023-08-19 下午11.06.19.png

     2. 外边距折叠

    1. 外边距合并
    2. 三栏布局
    2. 	<style type="text/css">
    3.   .left{
    4.     float: left;
    5.     width: 200px;
    6.     height: 100px;
    7.     background-color: green;
    8.   }  
    9.  .right{
    10.     float: right;
    11.     width: 200px;
    12.     height: 100px;
    13.     background-color: pink;
    14.   }
    15.   .center{
    16.     overflow: hidden;
    17.     /* 如果不写，center的width和wrapper的width一样 */
    18.     height: 100px;
    19.     background-color: yellow;
    20.   }
    21.   style>
    22. 	
    23. 	<body>
    24.        <div class="wrapper">
    25.             <div class="left">div>
    26.             <div class="right">div>
    27.             <div class="center">div>
    28.     div>
    29. 	body>
    31.

    截屏2023-08-20 上午3.00.23.png

    居中

    定宽高

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

    absolute+负margin

    1. class="father">
    2.   <div class="son">div>
    1. .father {
    2.   position: relative;
    3. }
    4. .son {
    5.   position: absolute;
    6.   left: 50%;
    7.   top: 50%;
    8.   margin-left: -(父元素宽度-子元素宽度)/2 px;
    9.   margin-top: -(父元素高度-子元素高度)/2 px;
    10. }

    absolute+auto

    1. class="father">
    2.   <div class="son">div>
  1.    .father{
  2.       position: relative;
  3.       width: 200px;
  4.       height: 200px;
  5.       background-color: red;
  6.     }
  7.     .son{
  8.       background-color: black;
  9.       position: absolute;
  10.       width: 100px;
  11.       height: 100px;
  12.       left: 0;
  13.       right: 0;
  14.       top: 0;
  15.       bottom: 0;
  16.       margin: auto;
  17.     }

absolute+cale

  1. class="father">
  2.   <div class="son">div>
  1. .father {
  2.   width: 200px;
  3.   height: 200px;
  4.   position: relative;
  5. }
  6. .son {
  7.     width: 100px;
  8.       height: 100px;
  9.   position: absolute;
  10.   top:cale(50% - 50px);
  11.   left:cale(50% - 50px);
  12. }

absollute+transform

  1. .father {
  2.   position: relative;
  3. }
  4. .son {
  5.   position: absolute;
  6.   left: 50%;
  7.   top: 50%;
  8.   transform: translate(-50%, -50%);
  9. }

flex

  1. .father {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

grid

  1. .father {
  2.   display: grid;
  3. }
  4. .son {
  5.   justify-self: center;
  6.   align-self: center;
  7. }

一些概念

<meta name="viewport" content="width=device-width,initial-scale=1" />

移动端适配方案

rem

  1. <head>
  2.   <meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable="no"/>
  3.   <style>
  4.     .box{
  5.       width:10rem;
  6.     }
  7.   style>
  8.   <script>
  9.     function setRootRem(){
  10.       const root = document.documentElement;
  11.       const scale = root.clientWidth / 10;
  12.       root.style.fontSize = scale + 'px'
  13.     }
  14.     setRootRem()
  15.     window.addEventListener('resize', setRootRem)
  16.   script>
  17. head>

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

  1. @device-width:375;
  2. @rem:(@device-width/10rem)

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

font-size:(24/@rem)
特点

vw、vh适配

rem.less

  1. @device-width:375;
  2. @vw:(100vm/@device-width)
font-size: 16*@vw
特点

px

  1. export function initViewport() {
  2.     const width = 375;  // 设计稿宽度
  3.     const scale = window.innerWidth / width
  4.     // console.log('scale', scale)
  5.     let meta = document.querySelector('meta[name=viewport]')
  6.     let content = `width=${width}, init-scale=${scale}, user-scalable=no`
  7.     if(!meta) {
  8.         meta = document.createElement('meta')
  9.         meta.setAttribute('name', 'viewport')
  10.         document.head.appendChild(meta)
  11.     }
  12.     meta.setAttribute('content', content)
  13. }

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具体值
支持的属性

animation

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

  1. @keyframes example{
  2.   0%   {left: 0; top:0px;}
  3.   50%  {left:200px; top:200px;}
  4.   100% {left: 0px; top:0px;}
  5. }
  6. div {
  7.   animation-name: example;
  8.   animation-duration: 5s;
  9.   animation-iteration-count: infinite;
  10.   animation-direction:alternate;
  11. 	animation-play-state:running;
  12. }
详细属性

transform(变换)

旋转

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

 transform:

缩放

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前端面试题库

  • 相关阅读:
    06 数列极限的概念
    垃圾回收调优(GC调优）
    集群方法同步执行框架 Suona
    接口自动化测试总结
    【性能测试】Jenkins+Ant+Jmeter自动化框架的搭建思路
    说说XXLJob分片任务实现原理？
    html一个案例学会所有常用HTML(H5)标签
    关于 SAP HANA 数据库的死锁问题(deadlock)
    scrapy使用布隆过滤器
    Ajax--form表单与模板引擎--通过Ajax提交表单数据及案例 - 评论列表
  • 原文地址：https://blog.csdn.net/weixin_42981560/article/details/134405041