2021-04-19 20:10 已编辑字节跳动_前端开发

关注

CSS 重点知识汇总

来啦，前面介绍了 JS重点知识与 http重点知识，今天给大家带来了 css 重点知识，希望大家多多收藏点赞

CSS 权重及引入方式
标签全部作用
用CSS画三角形
元素水平垂直居中的方案
元素固定宽高
元素不固定宽高
元素种类的划分
盒子模型及其理解
margin塌陷及合并问题
浮动模型及清除浮动的方法
IFC与BFC
圣杯布局与双飞翼布局
圣杯布局
双飞翼布局
Flex 布局
容器的属性
项目的属性
px,em,rem的区别
媒体查询
HTML5 新特性
理解 BFC
Grid 布局
行内元素的间距怎么解决
伪类和伪元素有什么不同

1. CSS 权重及引入方式

CSS权重可以分为四个等级：

内联样式，如 style=xxx，权重为 1000
id选择器，权值为 100
class、伪类和属性选择器，如 .content, :hover, [attribute]，权值为 10
元素选择器和伪元素选择器，权值为 1

需要注意的是：通用选择器(*)，子选择器(>)和相邻同胞选择器(+)并不在这四个等级中，所以它们的权重都为 0。

权重大的选择器优先级也越高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

伪类和伪元素：

一个 : 的为伪类: :hover,:focus,:first-of-type,:first-child

两个 :: 为伪元素::: before,::after

2. <a></a>标签全部作用

超链接
锚链接
打电话，发邮件

3. 用CSS画三角形

实现原理：

首先来看一下我们平时为一个盒子添加border的情况：

div {
    width: 100px;
    height:100px;
    border: 4px solid blue;
}

效果如下：

图片说明

这是我们平时使用 border 最常见的场景——往往只给border一个较小的宽度；然而这样的日常用***让我们对border的形成方式产生误解，即认为border是由四个矩形边框拼接而成的。

然而事实并不是如此。实际上，border是由三角形组合而成的。为了说明这个问题，我们可以增大border的宽度，并为他们设置不同的颜色：

div {
    width: 100px;
    height:100px;
    border: 40px solid;
    border-color: blue red yellow pink;
}

效果如下：

图片说明

由此我们可以看出，border确实是由三角形组成的。那么我们把元素的内容尺寸设为0会发生什么呢？

div {
    width:0;
    height:0;
    border: 40px solid;
    border-color: blue red yellow pink;
}

效果如下：

图片说明

这样我们就得到了四个三角形，如果想要其中一个，只需要把另外三个的颜色都设为 transparent:

div {
    width:0;
    height:0;
    border: 40px solid;
    border-color: transparent red transparent transparent;
}

效果如下：

图片说明

不过其他隐藏的左边框依然占据着空间，因此我们可以把左边框的 border-width 设为 0 ：

div {
    width:0;
    height:0;
    border-style: solid;
    border-width: 40px 40px 40px 0;
    border-color: transparent red transparent transparent;
}

4. 元素水平垂直居中的方案

1. 元素固定宽高

定位 + 负margin

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    width: 400px;
    height: 400px;
    background-color: red;
}
.content {
    position: absolute;
    /* top-left 相对于第一个 position 不为 static 的父元素的 height-width 定位 */
    left: 50%;
    top: 50%;
    /* 相对于元素自己的 height-width 定位 */
    margin-left: -200px;
    margin-top: -200px;
}
<div class="wrapper">
    <div class="content">
    </div>
</div>

2. 元素不固定宽高

方案一：定位 + transform

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    background-color: red;
    width: 400px;
    height: 400px;
}
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 相对于元素的自身宽高进行平移 */
    transform: translate(-50%, -50%);
}

方案二：定位 + margin:auto

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
}
.content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

方案三：display:flex

.wrapper {
    height: 900px;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
}

方案四：display:table-cell + vertical-align:middle 需要父元素固定宽高

.wrapper {
    width: 900px;
    height: 900px;
    background-color: gray;
    display: table-cell;
    vertical-align: middle;

}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

对于display: tabel-cell的元素，height和padding同时设置会出现问题：

当padding与内容高度超过设置的高度时，元素的高度取决于padding和内容的高度，最初为元素设置的高度就不生效了；
当padding与内容的高度小于设置的高度时，元素的高度取决于设置的高度；

5. 元素种类的划分

CSS元素可分为行内元素，行内块级元素以及块级元素。

行内元素设置宽高无效，可以设置左右外边距，上下外边距无效。如：span，a，em，label，strong

行内块级元素可以设置宽高，可以设置外边距。如：img，input，video，audio

块级元素独占一行。如：div，p，ul，li，h1-h6，table，form

通过 display 可以更改元素的表现形式

5. 盒子模型及其理解

CSS盒模型包含了元素内容区域（content）、边框（border）、内边距（padding）、外边距（margin）。在标准盒模型中，元素的width和height属性为元素的content的宽高。但是在实践中发现，当我们想要一个固定宽高的盒子，并给元素增加padding之后，元素的实际宽高会变大，需要我们自己去手动修改height和width的值，很不方便。因此在 CSS3 中提供了 box-sizing 属性用来改变标准盒模型。

box-sizing: content-box：元素的height和width为元素content区域的宽高

box-sizing: border-box：元素的height和width为元素 content+padding+border的宽高，当设置padding或border时，内容content会自动缩小

box-sizing: inherit

6. margin塌陷及合并问题

margin塌陷：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

如下所示：

.parent {
    width: 300px;
    height: 300px;
    background-color: red;
    margin-top: 100px;
}
.child {
    background-color: blue;
    width: 50px;
    height: 50px;
}
<div class="parent">
    <div class="child"></div>
</div>

当给子元素设置 margin-top: 150px 的时候，子元素会带着父元素往下移动50px。

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位。但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。

解决方法：

position:absolute/fixed
float:left/right
display:inline-block
overflow:hidden

这四种方法都能触发BFC，但是使用的时候会带来不同的麻烦，需要根据具体情况解决 margin 塌陷。

margin合并：两个兄弟结构的元素在垂直方向上的 margin 是合并的

如下所示：

.div1 {
    height: 200px;
    margin: 20px 0;
    background-color: red;
}
.div2 {
    height: 100px;
    margin: 10px 0;
    background-color: blue;
}
<div class="div1"> </div>
<div class="div2"></div>

div1 与 div2 的之间的 margin 取两者的最大值。

参考文章

7. 浮动模型及清除浮动的方法

父元素添加 overflow:hidden

在父元素添加最后一个子元素，并设置 clear:both

<style>
    .parent p {
      clear:both
    }
    .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      float: right;
      height: 200px;
      width: 100px;
      background-color: blue;
    }
</style>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <p></p>
  </div>
</body>

通过伪元素清除浮动

<style>
    .parent::after {
      content: "";
      display: block;
      clear: both;
    }
    .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      float: right;
      height: 200px;
      width: 100px;
      background-color: blue;
    }
</style>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

通过BFC的方式清除浮动
- position:absolute/fixed，不为 static 或 relative
- float:left/right
- display:inline-block，table-cell
- overflow:hidden，scroll，不为 visible

8. IFC与BFC

9. 圣杯布局与双飞翼布局

圣杯布局与双飞翼布局是为了实现一个两侧固定宽度，中间自适应的三栏布局。两者需要遵循以下要点：

两侧固定宽度，中间自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的 div 标签

核心是左边的 div margin-left:-100%。

参考文章

除此之外，两者还可以用 flex 布局实现。

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      min-width: 500px;
      margin: 0;
      padding: 0;
    }
    .container {
      padding: 0 200px 0 150px;
      overflow: hidden;
    }
    .center {
      background-color: blue;
      height: 800px;
      width: 100%;
    }
    .left {
      background-color: yellow;
      width: 150px;
      height: 200px;
      margin-left: -100%;
      position: relative;
      left: -150px;
    }
    .right {
      background-color: red;
      width: 200px;
      height: 200px;
      margin-right: -200px;

    }
    .container > div {
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

圣杯布局的flex实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局的flex实现</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
    }
    .center {
      background-color: blue;
      height: 800px;
      flex: 1;
    }
    .left {
      background-color: red;
      height: 400px;
      width: 200px;
      order: -1;
    }
    .right {
      background-color: yellow;
      height: 400px;
      width: 150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 500px;
    }
    .left {
      background-color: red;
      width: 150px;
      height: 150px;
      margin-left: -100%;
    }
    .right {
      background-color: yellow;
      width: 200px;
      height: 150px;
      margin-left: -200px;
    }
    .container {
      width: 100%;

    }
    .center {
      margin-left: 150px;
      margin-right: 200px;
      height: 300px;
      background-color: blue;
    }
    .column {
      float: left;
    }
  </style>
</head>
<body>
  <div class="container column">
    <div class="center"></div>
  </div>
  <div class="left column"></div>
  <div class="right column"></div>
</body>
</html>

10. Flex 布局

flex 布局意为“弹性布局”，用来为盒模型提供最大的灵活性。任何一个元素都可以指定为 flex 布局。

注意，设为 flex 布局以后，子元素的 float、clear、vertical-align 属性将失效。

容器的属性

属性	描述
flex-direction	决定主轴的方向，即项目的排列方向。row \| row-reverse \| column \| column-reverse，默认为 row
flex-wrap	默认情况下项目都在一条轴线上，该属性定义，如果一行排不下，该如何换行。 wrap \| nowrap \| wrap-reverse
flex-flow	是 flex-direction 和 flex-wrap 的简写形式，默认为 row nowrap
justify-content	定义项目在主轴上的对齐方式：flex-start \| flex-end \| center \| space-between \| space-around
align-items	定义项目在交叉轴上如何对齐：flex-start \| flex-end\| center \| baseline \| stretch
align-content	定义了多根轴线的对齐方式。flex-start \| flex-end \| center \| space-between \| space-around \| stretch;

项目的属性

属性	描述
order	定义项目的排列顺序。默认为0，数值越小，排列越靠前。
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
flex-shrink	定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	定义在分配多余空间之前，项目占据的主轴空间。他可以设为跟width一样的属性值，则项目将占据固定空间。
flex	是flex-grow、flex-shrink、flex-basis的简写，默认值为 0 1 auto。
align-self	属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性。

11. px,em,rem的区别

px：像素px是相对于显示器屏幕分辨率而言的。

em：相对于当前父元素的字体大小

rem：rem相对于根元素设置字体大小

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem

12. 媒体查询

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

13. HTML5 新特性

音频、视频、地理位置、localStorage、sessionStorage

14. 理解 BFC

参考文章

15. Grid 布局

Flex 布局是轴线布局，只能指定”项目“针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分为 ”行“ 和 ”列“，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。

16. 行内元素的间距怎么解决

行内元素写在一行，中间不留空格
父元素 font-size 设为 0
使用 float

17. 伪类和伪元素有什么不同

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素不是 DOM 中的真实元素，但是存在于最终的渲染树中，可以为其添加样式，比如说，我们可以通过：before来在一个元素前增加一些文本。

#学习路径##前端#