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. 高度坍塌（内部浮动导致的问题）
<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>

高频CSS面试题_css

 2. 外边距折叠

  1. 外边距合并
  2. 三栏布局
<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>

高频CSS面试题_css_02

居中

定宽高

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

absolute+负margin

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

absolute+auto

<div class="father">
  <div class="son"></div>
</div>
.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

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

absollute+transform

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

flex

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

grid

.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不允许缩放
<meta name="viewport" content="width=device-width,initial-scale=1" />

移动端适配方案

rem

<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

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

px

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规则，可以指定动画的每个关键帧。

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