review【CSS】

嗨皮儿
148 阅读11分钟

本篇内容为准备面试所写，其中所有皆为参考其他面筋而来;主要是好记性不如难笔头，过下手加深印象。

盒模型

  • CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
  • CSS盒模型：标准模型 + IE模型
  • 标准盒子模型：宽度=内容的宽度（content）+ border + padding
  • 低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型:
{
    box-sizing: border-box;
}

BFC

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

形成 BFC 的条件：

参考 谈谈你对BFC的理解？

  • 浮动元素，float 除 none 以外的值
  • 定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-block，table-cell，table-caption
  • overflow 除了 visible 以外的值（hidden，auto，scroll）
  • HTML 就是一个 BFC

BFC 的特性：

  • 内部的 Box 会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由 margin 决定
  • bfc 的区域不会与 float 的元素区域重叠。
  • 计算 bfc 的高度时，浮动元素也参与计算
  • bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

浮动

参考 全面了解CSS“浮动”

清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

  • clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：
{
    clear: both;
    height: 0;
    overflow: hidden;
}
  • 给浮动元素父级设置高度
  • 父级同时浮动（需要给父级同级元素添加浮动）
  • 父级设置成inline-block，其margin: 0 auto居中方式失效
  • 给父级添加overflow:hidden 清除浮动方法
  • 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
:after {
    content:'';
    clear: both;
    display: block;
}

CSS 的权重和优先级

  • 权重

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

  • 优先级

权重相同，写在后面的覆盖前面的 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

div 高度永远是宽度的一半

// padding的 % 是基于父元素的宽度的百分比的内边距
.outer {
    width: 400px;
    height: 600px;
}
.inner {
    width: 100%;
    padding-bottom: 50%;
}

<div class="outer">
    <div class="inner">
    </div>
</div>

Flex 布局

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
  • 项目属性
order
flex-grow 放大比例，默认为0，即如果存在剩余空间，也不放大。按比例分配空间，也可以是小数但不能是负数。
flex-shrink 缩小比例，默认为1，即如果空间不足，该项目将缩小。空间不足时（比如父1000px,4个子每个300px）,值都相同则等比缩小，否则按比例缩小，值为0的不缩小。
flex-basis 默认值为auto，可以是100px之类的固定占据空间大小。
flex
align-self

* flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex横向滚动条 flex-shrink: 0;

css2实现水平垂直居中

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

.outer {
    position: relative;
    width: 200px;
    height: 200px;
}

.inner {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

<div class="outer">
    <div class="inner"></div>
</div>

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

.outer {
    width: 400px;
    height: 600px;
    position: relative;
}
.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
      
<div class="outer">
    <span class="inner">居中显示</span>
</div>

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

.outer {
    width: 200px;
    height: 200px;
    position: relative;
}

.inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100px;
    height: 100px;
    margin: auto;
}
      
<div class="outer">
    <div class="inner"></div>
</div>

css3 垂直、水平居中

.outer {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
}

visibility 和 display 还有 opacity 的区别

  • visibility 设置 hidden 会隐藏元素，但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘
  • display 设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。
  • opacity 会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘

两栏布局

参考

字节跳动最爱考的前端面试题：CSS 基础

深入理解圣杯布局和双飞翼布局

左float:left + 右margin-left（右边自适应）

<style>
  div {
    height: 200px;
  }
  .left {
    width: 300px;
    float: left;
    background: yellow;
  }
  .right {
    margin-left: 300px;
    background: red;
  }
</style>

BFC + float

<style>
  div {
    height: 200px;
  }
  .left {
    width: 300px;
    float: left;
    background: yellow;
  }
  .right {
    overflow: hidden;
    background: red;
  }
</style>

float + 负margin

<style>
  div {
    height: 200px;
  }
  .left {
    width: 200px;
    float: left;
    background: yellow;
  }
  .right {
    width: 100%;
    float: left;
    margin-right: -200px;
    background: red;
  }
</style>

flex

<style>
  div {
    height: 200px;
  }
  .container {
    display: flex;
  }
  .left {
    width: 200px;
    background: yellow;
  }
  .right {
    flex: 1;
    background: red;
  }
</style>

position + margin

<style>
  div {
    height: 200px;
  }
  .container {
    position: relative;
  }
  .left {
    width: 200px;
    position: absolute;
    background: yellow;
  }
  .right {
    width: 100%;
    margin-left: 200px;
    background: red;
  }
</style>

三列布局

参考

字节跳动最爱考的前端面试题：CSS 基础

position + margin-left + margin-right

<style>
  div {
    height: 200px;
  }
  .container {
    position: relative;
  }
  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    background: yellow;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    background: red;
  }
  .middle {
    margin-left: 200px;
    margin-right: 200px;
    background: hotpink;
  }
</style>

flex

<style>
  div {
    height: 200px;
  }
  .container {
    display: flex;
  }
  .left {
    flex: 0 0 200px;
    order: 1;
    background: yellow;
  }
  .right {
    flex: 0 0 300px;
    order: 3;
    background: red;
  }
  .middle {
    flex: 1 1;
    order: 2;
    background: hotpink;
  }
</style>

圣杯布局

什么是圣杯布局以及双飞翼布局

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>圣杯布局</title>
    <style>
      div {
        height: 200px;
      }

      .container {
        padding: 0 200px 0 200px;
        /* BFC 让浮动元素也参与高度计算 */
        overflow: hidden;
      }

      .left,
      .middle,
      .right {
        position: relative;
        float: left;
      }

      .left {
        /* middle占据了100%宽度，-100%就能让left移动到左侧起始位置 */
        margin-left: -100%;
        /* 父元素设置了padding */
        left: -200px;
        width: 200px;
        background-color: yellow;
      }

      .right {
        margin-left: -200px;
        right: -200px;
        width: 200px;
        background-color: red;
      }

      .middle {
        width: 100%;
        background-color: hotpink;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      div {
        height: 200px;
      }

      .container {
        overflow: hidden;
      }

      .left,
      .middle,
      .right {
        float: left;
      }

      .left {
        margin-left: -100%;
        width: 200px;
        background-color: yellow;
      }

      .right {
        margin-left: -220px;
        width: 220px;
        background-color: red;
      }

      .middle {
        width: 100%;
        background-color: hotpink;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

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

字节跳动最爱考的前端面试题：CSS 基础

css 动画

  • animation：用于设置动画属性，他是一个简写的属性，包含6个属性
  • transition：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
  • transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
  • translate：translate只是transform的一个属性值，即移动，除此之外还有 scale 等

Animate.css

1px 边框解决方案

.scale-1px-bottom {
    position: relative;
    border:none;
}
.scale-1px-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

长文本处理

  • 默认：字符太长溢出了容器
  • 字符超出部分自动换行
.wrap {
  overflow-wrap: break-word;
}
  • 单行溢出省略
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  • 多行溢出省略
.line-clamp {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

文档流

在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流。 文档流就像水一样，能够自适应所在的容器。

  • 块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的；
  • 内联元素默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布；

如何脱离文档流呢？

脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间。

  • 使用浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠；
  • 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补。

伪类和伪元素

伪类和伪元素是用来修饰不在文档树中的部分

  • 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。

层叠上下文

参考 深入理解CSS中的层叠上下文和层叠顺序

层叠准则

  • 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
  • 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

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 决定。

重绘 和 重排（回流）

重绘不一定导致重排，但重排一定会导致重绘

重绘：元素的外观被改变所触发的浏览器行为（颜色）

重排：重新生成布局，重新排列元素（宽高和位置）

优化：1.脱离文档流，使用 absolute 或 fixed 脱离文档流（减小重排范围）2.样式集中改变，减少单个css属性操作改为直接添加一个className（减少重排次数）

参考

avatar
文章
阅读
粉丝