jsliang 求职系列 - 42 - CSS 基础

1898

2020.12.13

发布于未知归属地

一目录

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三 DIV + CSS 布局的优缺点
四如何解决 a 标点击后 hover 事件失效的问题？
五响应式
六脱离文档流
七块级格式化上下文（BFC）
八盒子模型
九 link 和 @import 区别
十渐进增减和优雅降级
十一 CSS 实现垂直居中
十二 CSS 单位
十三 CSS 设置隐藏元素
十四 CSS 选择器
十五层叠上下文
十六 dispaly 和 position
16.1 display
16.2 position
十七 CSS3
17.1 新特性
17.2 Flexbox 弹性盒布局模型
十八 CSS 优化
18.1 CSS 匹配规则
18.2 CSS 的 style 标签位置
十九题目
19.1 BFC
19.2 CSS 盒模型

二前言

CSS 基础有很多内容，需要细细理解，毕竟有时候用得不多，除非你是做移动端或者交互比较多的项目。

三 DIV + CSS 布局的优缺点

优点：

代码精简，且结构与样式分离，易于维护
代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户的体验
对 SEO 搜索引擎更加友好，且 H5 又新增了许多语义化标签更是如此
允许更多炫酷的页面效果，丰富了页面
符合 W3C 标准，保证网站不会因为网络应用的升级而被淘汰

缺点：

不同浏览器对 Web 标准默认值不同，所以更容易出现对浏览器的兼容性问题。

四如何解决 a 标点击后 hover 事件失效的问题？

改变 a 标签 CSS 属性的排列顺序：

LoVe HAte 原则

link -> visited -> hover -> active

a:link：简写 a，未访问的样式
a:visited：已经访问的样式
a:hover：鼠标移上去时的样式
a:active：鼠标按下的样式

在 CSS 中，如果对于相同元素针对不同条件的定义，适宜将最一般的条件放在最上面，依次向下，保证最下面的是最特殊的条件（可以理解为样式覆盖）。

这样，浏览器显示元素的时候，才会从特殊到一半、逐级向上验证条件。

五响应式

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询（@media）检测不同的设备屏幕尺寸做处理。

好处：对某些数据的修改就能自动更新视图，让开发者不需要操作 DOM，有更多的时间去思考完成业务逻辑。

六脱离文档流

文档流：将窗体自上而下分成一行一行，并在每行中按从左至右一次排放元素，成为文档流，也就普通流。

脱离文档流：脱离文档流的元素，将不再在文档流占据空间，而是漂浮在文档流上方。

float: left/right：使用之后会脱离，但是其他盒子会环绕该元素的周围。
position: absolute/fixed：absolute 为绝对定位，脱离文档流之后还是会相对于该元素的父类（做了 relative/absolute 定位的父类）进行偏移。而 fixed 就是完全脱离文档流，相对于 HTML （整个浏览器窗口）的形式展示。

七块级格式化上下文（BFC）

BFC 布局规则 是指页面上一个隔离的独立容器，容器内部的子元素不会影响到外面的元素，反之外面的元素也不会影响容器里面的元素。

特性：

在 BFC 中，盒子从顶端开始垂直地一个接一个地排列
盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠

外边距问题

<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>

这段代码产生的页面中，它们的边距是 200px，需要通过 BFC 解决边距问题。

主要用途：

清除元素内部浮动。overflow: hidden
解决外边距合并问题。创建 2 个不同 BFC，就不会发生 margin 重叠

产生 BFC 的条件：

根元素 html
float: left/right
position: absolute/fixed
display: inline-block/flex/grid
overflow: hidden

八盒子模型

box-sizing: content-box。标准盒子，总宽度等于：width + padding + border + margin。
box-sizing: border-box。IE 盒子，总宽度等于：width + margin。IE 盒子的 width 包含了 width、padding 和 border 属性。

详细看：jsliang - 盒子模型

九 link 和 @import 区别

CSS 引入方式有：

内联：style 属性（style="color: red"）
内嵌：style 标签（<style></style>）
外链：link 标签（<link href="index.css">
导入：@import（@import url('index.css') 或者 @import 'index.css'）

link 和 @import 区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

十渐进增减和优雅降级

关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

十一 CSS 实现垂直居中

方法一：Flex 布局（子元素是块级元素）

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-center{
  margin: auto;
  background-color: greenyellow;
}

方法二：Flex 布局

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
  justify-content: center;
  align-items: center;
}

.box-center{
  background-color: greenyellow;
}

方法三：绝对定位实现（定位元素定宽定高）

.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: pink;
}

.box-center{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}

方法四：使用 transform

父盒子设置：display: relative

div 设置：

div {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

十二 CSS 单位

px 是像素（pixel）的缩写，相对长度单位，是网页设计常用的基本基本单位，它是相对于显示器屏幕分辨率而言的。

em 是相对长度单位，相对于对象内文本的字体尺寸（参考物是父元素的 font-size。

如果当前父元素的字体元素未设置，则相对于浏览器的默认字体尺寸设置。

rem

rem 是相对于 HTML 根元素的字体大小（font-size）来计算的长度单位。

如果你没有设置 HTML 字体大小，那么以浏览器默认为主，一般为 16px。

vw/vh

vw 和 vh 是相对于 viewport - 相对视口的宽度或者高度而定的。

一般来说：1vw = npx / 100，即浏览器宽度为 200px 的时候，1vw = 200px / 100，即 1vw = 2px。

十三 CSS 设置隐藏元素

display: none：彻底消失，会导致浏览器回流和重绘，不能再触发点击事件。
visibility: hidden：元素隐藏，空间仍保留，会导致重绘，但是不能再触发点击事件。
opacity: 0：设置为透明，相当于它还在那里，但是你看不到，可以触发点击事件。

十四 CSS 选择器

CSS 选择器及样式优先级：

在属性后面使用 !important 会覆盖页面任意位置定义的元素样式
作为 style 属性写在元素内的样式（行内样式）
id 选择器
类选择器 | 伪类选择器 | 属性选择器（后面样式覆盖前面样式）
标签选择器
通配符选择器
浏览器自定义样式

十五层叠上下文

层叠上下文（stacking context），是 HTML 中一个三维的概念。在 CSS2.1 规范中，每个盒模型的位置是三维的，分别是平面画布上的 X 轴，Y 轴以及表示层叠的 Z 轴。

一般情况下，元素在页面上沿 X 轴 Y 轴平铺，我们察觉不到它们在 Z 轴上的层叠关系。

而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

触发条件：

根层叠上下文（HTML）
position
CSS3 属性
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overflow-scrolling

层叠等级：层叠上下文在 Z 轴上的排序

在同一层叠上下文中，层叠等级才有意义
z-index 的优先级最高

十六 dispaly 和 position

16.1 display

div {
  display: none;
}

inline：（默认）内联
none：隐藏
block：块显示
table：表格显示
inline-block：内联块

16.2 position

div {
  position: absolute;
}

static：默认位置。不需要特别声明，不常用。
relative：相对定位。相对于元素默认的位置进行定位，设置 top/left/right/bottom 后的元素仍占据空间。
absolute：绝对定位。如果父元素设置了 position: absolute/relative，那么这个设置成立。它会根据上一个设置了 absolute/relative 的元素进行偏移。
fixed：固定定位。相对于整个浏览器窗口进行定位，无论页面怎么滚动。
sticky：黏性定位。屏幕范围内该元素位置不受影响，超出范围后，会变成 fixed，根据设置的 left/top 等属性成固定的效果。

十七 CSS3

17.1 新特性

RGBA 和透明度
background-image、background-origin(content-box/padding-box/border-box)、background-size、background-repeat
word-wrap：对长的不可分割单词换行，例如 word-wrap：break-word
文字阴影：text-shadow: 5px 5px 5px #FF0000;，对应水平阴影，垂直阴影，模糊距离，阴影颜色
font-face 属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套 CSS，当浏览器的尺寸变化时会采用不同的属性

17.2 Flexbox 弹性盒布局模型

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。

弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在 Android 和 IOS 上也完美支持。

十八 CSS 优化

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免 !important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

18.1 CSS 匹配规则

CSS 选择器的解析是从右向左解析的。

若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

18.2 CSS 的 style 标签位置

页面加载自上而下，当然是先加载样式。

写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 Windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）。

十九题目

19.1 BFC

如果父元素都为浮动，不能解决父类高度塌陷问题的是：

A：给父元素添加 clear: both
B：给父元素添加 overflow: hidden
C：在浮动元素下方添加空 div，并添加样式 clear: both
D：设置父元素 :after { content: "", clear: both; display: block; overflow: hidden }

答案：B

19.2 CSS 盒模型

根据以下代码，两个 div 元素垂直间距为()

<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>

A：100px
B：200px
C：300px
D：400px

答案：B

原因：CSS 盒模型，块之间共享垂直外边距 margin，margin 取其最大值。（margin 塌陷问题）

jsliang 的文档库由梁峻荣采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于 https://github.com/LiangJunrong/document-library 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

一 目录

二 前言