大厂常考的CSS

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 的作用

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

使用场景

高度坍塌（内部浮动导致的问题）

html 复制代码

<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>

2. 外边距折叠

外边距合并
三栏布局

html 复制代码

<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

html 复制代码

<div class="father">
  <div class="son"></div>
</div>

css 复制代码

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -(父元素宽度-子元素宽度)/2 px;
  margin-top: -(父元素高度-子元素高度)/2 px;
}

absolute+auto

html 复制代码

<div class="father">
  <div class="son"></div>
</div>

css 复制代码

   .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

html 复制代码

<div class="father">
  <div class="son"></div>
</div>

css 复制代码

.father {
  width: 200px;
  height: 200px;
  position: relative;
}
.son {
    width: 100px;
      height: 100px;
  position: absolute;
  top:cale(50% - 50px);
  left:cale(50% - 50px);
}

absollute+transform

css 复制代码

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

flex

css 复制代码

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

grid

css 复制代码

.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

css 复制代码

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

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

less 复制代码

font-size:(24/@rem)

特点

适配原理稍复杂
需要使用JS
设计稿标注的px换算到rem
方案灵活，既能实现整体缩放，又能实现局部不缩放

vw、vh适配

rem.less

less 复制代码

@device-width:375;
@vw:(100vm/@device-width)

less 复制代码

font-size: 16*@vw

特点

适配原理简单
不需要JS即可适配
设计稿标注的px换算到vw
方案灵活，既然实现整体缩放，又能实现局部不缩放

px

js 复制代码

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（过度）

css 复制代码

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()