CSS基础知识点

枣仁
271 阅读14分钟

CSS基础知识点

前端面试题系列文章：

【1】「2023」HTML基础知识点

【2】「2023」ECMAScript基础知识点

【3】「2023」CSS基础知识点

【4】「2023」计算机网络基础知识

【5】「2023」计算机网络-HTTP知识点

【6】「2023」浏览器相关知识点

【7】「2023」React相关知识点

【8】「2023」TypeScript相关知识点

【9】「2023」Webpack相关知识点

【10】「2023」代码输出结果相关知识点

【11】「2023」手动实现代码相关知识点

【12】「2023」性能优化相关知识点

【13】「2023」H5相关知识点

X-Mind原图地址：

FE-eight-part-essay

CSS盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型（怪异模型）。两种盒模型的区别在于设置width和height时，所对应的范围不同：

  • 标准盒模型的width和height属性范围只包含了content。

  • IE盒模型的width和height属性包含了 content + padding + border。

标准盒模型

IE盒模型

盒子模型的模式设置

可以通过修改元素的box-sizing属性来改变元素的盒模型：

  • box-sizeing: content-box表示标准盒模型（默认值）
  • box-sizeing: border-box表示IE盒模型（怪异盒模型）

CSS三大特性

层叠性

CSS(Cascading style Sheets) 又称为层叠样式表。样式发生冲突时，后加载的样式会覆盖先加载的样式。

继承性

在 CSS 中有一个很重要的特性就是子元素会继承部分父元素对应属性计算后的值。

设想一下，如果 CSS 中不存在继承性，那么我们就需要为不同文本的标签都设置一下 color，这样一来的后果就是 CSS 的文件大小就会无限增大。

  • 可继承属性

（1）字体相关：font-family、font-style、font-size、font-weight 等;

（2）文本相关：text-align、text-indent、text-decoration、letter-spacing、word-spacing、line-height、color 等；

（3）列表相关：list-style、list-style-image、list-style-type、list-style-position 等；

（4）元素可见相关：visibility；

（5）光标属性：cursor；

  • 不可继承属性

（1）display属性

（2）文本属性：vertical-align、text-decoration、text-shadow、white-space；

（3）盒子模型的属性：width、height、margin、border、padding；

（4）背景属性：background、background-color、background-image等；

（5）定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index等；

（6）生成内容属性：content、counter-reset、counter-increment；

（7）轮廓样式属性：outline-style、outline-width、outline-color、outline；

（8）页面样式属性：size、page-break-before、page-break-after；

（9）声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during；

优先级

优先级就是分配给指定的 CSS 声明的一个权重。

min-heigth/width > max-height/width > !important > 行内样式 > ID选择器 > 类、属性选择器、伪元素 > 元素选择器、伪元素类选择器 > 通用选择器 > 继承样式

选择器格式优先级权重
min-height/max-heightmin-height: 12px>无穷大
Important!important无穷大
内联样式style={{color: 'red'}}1,0,0,0
ID选择器#id1,0,0
类选择器#classname1,0
属性选择器a[ref="eee"]1,0
伪元素li:last-child1,0
标签选择器div1
伪元素类选择器li:after1
通用选择器*0
浏览器自定义样式、浏览器默认--

CSS选择器

  • ID选择器

    #txa {      
    width: 300px;
}

  • 类选择器

    .first {
font-weight: bold;
}

  • 属性选择器

    li[class] {
  color: red;
  background: yellow;
}

  • 标签选择器

    p {
  color: yellow;
}

  • 通配符选择器

    * {
  color: yellow;
}

文档流

概念

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

block

block元素会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性

inline

元素不会独占一行，设置width、height属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 margin 和 padding。

inline-block

将对象设置为 inline 对象，但对象的内容作为 block 对象呈现，之后的内联对象会被排列在同一行内。比如我们可以给<a/>设置一个 inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

如何脱离文档流

脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间。有两种方式可以让元素脱离文档流：浮动和定位。

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

float 和 absolute 一样，都是脱离文档流的。但是 absolute 更绝对一些。float元素会按照属性向左/向右浮动直到碰到包含框或另一个浮动框的边框为止。

BFC

什么是BFC？

BFC是块级格式上下文，在该区域内有一套渲染规则来约束块级盒子的布局，且不会对外部区域造成影响。

BFC的布局规则

  • 内部的BOX会在垂直方向上从上往下放置；

  • 垂直方向上的距离由margin决定（完整的说法是： 属于同一个BFC中相邻的BOX的margin会发生重叠，取较大那个）；

  • 每个元素的左边距与包含块的左边距接触，即使是浮动元素也是如此。（这也就说明了BFC的子元素是不会超出它的包含块的，absolute绝对定位例外）；

  • BFC的区域不会与float元素区域重叠；

  • 计算BFC的高度时，浮动子元素也参与计算；

  • BFC就是页面上一个隔离的独立容器，里面的子元素不会影响到外面的元素，反之亦然;

创建BFC的方法

  • 设置 overflow 值为：hidden、auto、scroll；
  • display 值为：flow-root（推荐，无副作用）、inline-block、table-cell、table-caption、flex等；
  • 设置position为:absolute、fixed；

BFC的应用

  • 用于BFC进行页面布局 （规则一）
  • 解决margin高度塌陷问题，将其中一个元素设为BFC （规则二）
  • 阻止元素被浮动元素覆盖（可以触发其中一个元素为BFC）（规则四）
  • 当浮动元素发生高度塌陷时候，可以使用BFC（规则五）

值和单位：px、em、rem、vw

px

px 被定义为相对单位，是因为它取决于显示器的分辨率。一旦分辨率确定，设置为 px 的尺寸就成为固定尺寸，不会自动缩放。

em

1em 被定义为一种给定字体的 font-size 值。假设父元素的font-size为16px。当前元素的font-size为1.5em则为 24px。

rem

rem和em类似，em是相对于父元素来计算。而rem，是相对于根(root)元素计算。

vw/vh

1vw、1vh: 视口宽度/高度的 1/ 100

字体图标、iconfont

font-family

通常说的字体并不只是单个字体，而是字体系列。例如：font-family: Times, TimesNR, Georgia, 'New Century Schoolbook', 'New York', serif;当我们去设置字体时，会优先取前面的字体，如果当前浏览器不支持则取下一个字体（所以最好将font-family的最后一个字体属性设为通用字体）。

5种通用字体

  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

@font-face

使用@font-face 规则可以声明自己的字体，也可以在@font-face中引入自定义的icon-font。

伪类和伪元素

伪类选择器

如a:link、a:hover、a:active、:first-child、:last-child等。

优点：在CSS中就可以实现逻辑判断，减少了JS的代码，简化开发。

伪元素

如::section、::placeholder、:before、:after

优点：不占用DOM、减少DOM节点

缺点：没有加入到DOM中，不易于被搜索引擎找到。

两栏布局

两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，有一下几种实现的方式：

float + margin

左边元素使用float布局浮动到左边，右边设置margin-left

.left {
  float: left;
  width:200px;
  height: 100px; 
  background: tomato;
}

.right {
  width: auto;
  height: 100px;
  margin-left: 200px;
  background: red;
}

float + BFC

左边元素使用float布局浮动到左边，右边元素创建BFC（BFC的区域不会与浮动元素重叠）

.left{
     width: 100px;
     height: 100px;
     background: red;
     float: left;
 }

 .right{
     height: 100px;
     background: blue;
     overflow: hidden;
 }

绝对定位

使用绝对定位，父元素设置为相对定位，左边元素固定宽度200px，右边元素使用绝对定位设置left为200px。

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

flex：1

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1

.outer {
  display: flex;
  height: 100px;
}

.left{
     width: 100px;
     background: red;
 }

 .right{
    background: blue;
    flex:1;
 }

三栏布局

绝对定位

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin。

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

flex:1

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

圣杯布局

圣杯布局，将三个元素浮动，父元素设置padding属性。然后左右元素设置margin-left使得三个元素任然保持一行，最后通过relative移动左右元素的位置。

.container3 {
  width: 600px;
  height: 100px;
  padding-left: 200px;
  padding-right: 200px;
}
.left3 {
  position: relative;
  left: -200px;

  float: left;
  margin-left: -100%;

  width: 200px;
  height: 100px;
  background: red;
}

.right3 {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: blue;
}

.center3 {
  float: left;
  width: 100%;
  height: 100px;
  background: green;
}

双飞翼布局

使用双飞翼布局，将三个元素浮动，中间元素添加子元素margin，左右元素设margin-left。

.container4 {
  width: 1000px;
  height: 100px;
}
.left4 {
  float: left;
  width: 200px;
  height: 100px;
  margin-left: -100%;
  background-color: red;
}
.right4 {
  float: left;
  width: 200px;
  height: 100px;
  margin-left: -200px;
  background-color: blue;
}
.center4 {
  float: left;
  width: 100%;
  height: 100px;
  background-color: green;
}
.center4-inner {
  height: 100px;
  margin: 0 200px;
}

圣杯布局、双飞翼布局的经典之处

虽然圣杯布局和双飞翼布局比较难以理解，且没有flex:1这种方法简单，但是也有自己的优点：中间的content标签是优先加载的。

水平垂直居中的方法

行高 + text-align

将 line-height 属性设置成和height一样，并且设置 text-algin 为 center 。

绝对定位 + transform

使用 absolute 定位，并设置 left: 50%. top: 50%,trasnfrom:(-50%,-50%)。

绝对定位 + margin

使用 absolute 定位，并设置 left,top,right,bottom为0， margin:auto。

flex布局

设置 display 为 flex，并且指定 align-items:center; justify-content:center。

巧用table属性

可以让我们把普通元素，变为table元素的现实效果。设置 display 为table-cell，并且指定text-align:center；vertical-align:middle。

CSS动画

transition

css的过渡效果，将元素上的某个属性过渡到另外一个属性。但是用 transition 做动画，会存在一些缺陷：

  • 动画效果需要主动触发，比如:hover,:focus。
  • 在页面刚加载的时候不能展示。
  • 一次性的，不能重复触发。
  • 不能涉及多个属性。

animation

animtion 可以看做是对 transition 的拓展，通过设置关键帧来定义每个节点的状态。使用方法：

animation: name duration timing-function delay iteration-count direction play-state fill-mode;
  • name 用来调用@keyframe 定义好的动画，与@keyframe定义的名称一致。
  • durition 指定元素播放动画所持续的时间。
  • timing-function 规定速度效果的速度曲线，是针对每一个动画所在的时间范围的变化速率。
  • delay: 定义在浏览器开始执行动画之前的等待时间，即整个animation执行之前的等待时间。
  • interator-count 定义动画的播放次数，可选具体次数或者无限次(infinite)。
  • direction 设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)。
  • play-state 控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停)。
  • fill-mode 控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次)。

requestAnimationFrame

HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。

MDN对该方法的描述：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame动画的优势：

  • CPU节能：使用 setInterval 实现的动画，当页面被隐藏或最小化时，setInterval 仍然在后台执行动画任务，由于此时的页面处于不可见状态，刷新动画是没有任何意义的，浪费CPU资源。而 requestAnimationFrame 则不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停。当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
  • 函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
  • 减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

CSS工程化

CSS预处理

使用less，sass等CSS预处理器，给我们的开发提供了便利，大大提升了开发效率，比如：

  • 嵌套代码的能力，通过嵌套反映不同css属性之间的层级关系
  • 支持定义css变量
  • 提供计算函数
  • 允许对代码片段进行extend 和 mixin
  • 允许循环语句的使用
  • 支持将css文件模块化，实现复用

PostCSS

PostCss和预处理器不同，预处理器处理的是类CSS。而PostCss处理的就是CSS本身，他有点类似于Babel的功能，能编译尚未被浏览器支持的先进CSS语法，还支持autoPrefix。由于PostCss广泛的插件机制，支持各种各样的拓展，极大的强大了PostCss的能力

Webpack（*-loader）

Webpack默认是不能处理CSS，类CSS文件的，Webpack本身是一个面向JavaScript且只能处理JavaScript的打包工具。但是Webpack的loader机制使得其不仅能处理CSS，还能处理less等类CSS。以css-loader和style-loader为例：

  • css-loader：将 CSS 模块转换为一个 JS 模块。
  • style-loader: 将 css-loader 中所加载到的所有样式模块，通过创建 style 标签的方式添加到页面上。

CSS预处理器也有对应的loader，如less-loader、sass-loader

avatar
文章
阅读
粉丝