HTML5andCSS3面试题大全_html5和css3的新面试题-优快云博客

HTML5andCSS3面试题大全

一.HTML5
二.CSS
参考链接

一.HTML5

1.html5有哪些新特性、移除了那些元素？

新增功能：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

本地存储 localStorage 和 sessionStorage
语意化标签 article、footer、header、nav、section
新增选择器 document.querySelector、document.querySelectorAll
绘画 canvas\svg
历史管理 history
拖拽释放(Drag and drop) API
媒体播放的 video 和 audio
离线应用 manifest
桌面通知 Notifications
增强表单控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任务 webworker
全双工通信协议 websocket
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
Form Data 对象

移除的元素：

纯表现的元素：basefont、big、center、font、 s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 
    width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    device-width  设备宽度
    height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
    minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
    maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
    user-scalable    是否允许手动缩放
-->

延伸提问：怎样处理移动端 1px 被渲染成 2px问题？

局部处理

meta标签中的 viewport属性，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

全局处理

meta标签中的 viewport属性，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

2.有⼏种前端储存的⽅式？这些⽅式的区别是什么？（追问）✨✨✨✨

cookies、localstorage、sessionstorage、Web SQL、IndexedDB？

cookies：在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，
⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装,联系XSS攻击和单点登录
localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删
除），⼤⼩为5M，兼容IE8+ 联系单点登录和Vuex持久化插件(vuex-persistedstate)(解决一刷Vuex数据就没有了的问题)
sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式
Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实
现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐。
IndexedDB：是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便。

二次封装最佳实践
①你还在直接用 localStorage 么？该提升下逼格了

②还在直接用localStorage么？全网最细：本地存储二次封装（含加密、解密、过期处理）

3.你对HTML语义化的理解？✨

HTML5–语义化标签
语义化是指使⽤恰当语义的html标签，让⻚⾯具有良好的结构与含义，⽐如 <p> 标签就代表段落， <article> 代表正⽂内容等等。
语义化的好处主要有两点：

开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护
机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录。

这对于简书、知乎这种富⽂本类的应⽤很重要，语义化对于其⽹站的内容传播有很⼤的帮助，但是对于功能性的web软件重要性⼤打折扣，⽐如⼀个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。

4.html文档解析

参考：html文档解析为AST语法树

5.用websocket搭建实验聊天室

2万字长文肝了一个实时聊天室，只为让她学会websocket

6.什么是doctype的作用是什么？✨

DOCTYPE (Document Type Declaration)是一种位于HTML或XML 文档开头的声明，也是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。用于告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。

DOCTYPE的作用包括以下几个方面：

①文档类型定义(DTD) 引用: DOCTYPE 声明通常包含文档的 DTD 引用，它告诉浏览器或解析器文档的元素和属性应该遵循哪种规范。这有助于确保文档的结构是有效的，并提供了关于文档中允许的元素和属性的信息。

②渲染模式切换: DOCTYPE 声明还影响浏览器的渲染模式, 不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析⽂档。渲染模式一般分为标准模式 (Standards Mode) 或怪异模式(Quirks Mode) 。标准模式通常会按照标准规范来呈现页面，而怪异模式可能会尝试以更传统的方式呈现页面，以保持对旧网页的兼容性。

BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个模式）

CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。

IE8还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。
这三种模式的区别是什么？

标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染。
怪异模式(quirks mode)模式：会模拟更旧的浏览器的⾏为。
近乎标准(almost standards)模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义。

③.验证和错误处理: 一些浏览器或解析器可能会根据 DOCTYPE 来执行文档的验证和错误处理。如果文档与其声明的 DTD 不一致，可能会触发错误或警告。

④.帮助开发者和工具理解文档: DOCTYPE 也有助于开发者和开发工具理解文档的类型和结构。它是文档的元信息之一，可以帮助开发者确定如何处理文档。

7.HTML、XHTML、XML有什么区别

HTML(超⽂本标记语⾔): 在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散
XML(可扩展标记语⾔): 主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼效，所以XML现在市场越来越⼩了
XHTML(可扩展超⽂本标记语⾔): 基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了
HTML5，开头加⼊的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。

8.什么是data-属性？

HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数
据的⽬的。

<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>

前端框架出现之后，这种⽅法已经不流⾏了

9. HTML5与HTML4的不同之处

⽂件类型声明（<!DOCTYPE>）仅有⼀型：。
新的解析顺序：不再基于SGML。
新的元素：section, video, progress, nav, meter, time, aside, canvas,
command, datalist, details, embed, figcaption, figure, footer,
header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary,
wbr。
input元素的新类型：date, email, url等等。
新的属性：ping（⽤于a与area）, charset（⽤于meta）, async（⽤于script）。
全域属性：id, tabindex, repeat。
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden,
spellcheck。
移除元素：acronym, applet, basefont, big, center, dir, font, frame,
frameset, isindex, noframes, strike, tt

10. 有哪些常⽤的meta标签？

meta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义name。

charset，⽤于描述HTML⽂档的编码形式

<meta charset="UTF-8" >

http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期

＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞

viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉，为了⾃定义评估⼯具栏的颜⾊。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

11.src和href的区别？

src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。
href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

知道img的srcset的作⽤是什么？（追问）

可以设计响应式图⽚，我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的⼀个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。
sizes 定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。
所以，有了这些属性，浏览器会：

查看设备宽度
检查 sizes 列表中哪个媒体条件是第⼀个为真
查看给予该媒体查询的槽⼤⼩
加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像

srcset提供了根据屏幕条件选取图⽚的能⼒

<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w,
clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">

还有哪⼀个标签能起到跟srcset相似作⽤？（追问）

<picture> 元素通过包含零或多个 <source> 元素和⼀个<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的⼦ <source> 元素如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在 <img> 元素占据的空间中

picture同样可以通过不同设备来匹配不同的图像资源

<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

12.script标签中defer和async的区别？✨✨✨

script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
async：与defer同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适⽤。
defer：浏览器指示脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执⾏。

在这里插入图片描述
参考阅读：
图解 script 标签中的 async 和 defer 属性

13.（Drag）拖和放（Drop）

14.24个强大的HTML属性与实用小技巧

15.Emmet语法总结

Emmet语法总结

16.Iframe的同源策略与通信机制

17.RequestAnimationFrame

浅析requestAnimationFrame的用法与优化

二.CSS

在这里插入图片描述

核心基础知识

语法

CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。

color: red;

而如果将一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。

{
   
   
    color: red;
    text-align: center;
}

声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集（CSS ruleset），常简称为 CSS 规则。
在这里插入图片描述

span {
   
   
    color: red;
    text-align: center;
}

规则集中最后一条声明可以省略分号，但是并不建议这么做，因为容易出错。

CSS 中的注释：

/* 单行注释 */

/*
    多行
    注释
*/

在 CSS 文件中，除了注释、CSS 规则集以及 @规则外，定义的一些别的东西都将被浏览器忽略。

@规则

CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。

而 @规则就是这样的语句。CSS 里包含了以下 @规则：

@namespace 告诉 CSS 引擎必须考虑XML命名空间。
@media 如果满足媒体查询的条件则条件规则组里的规则生效。
@page描述打印文档时布局的变化.
@font-face 描述将下载的外部的字体。
@keyframes 描述 CSS 动画的关键帧。
@document 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)
除了以上这几个之外，下面还将对几个比较生涩的 @规则进行介绍。

@charset

@charset[1] 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的

注意：值必须是双引号包裹，且和

@charset "UTF-8";

平时写样式文件都没写 @charset 规则，那这个 CSS 文件到底是用的什么字符编码的呢？

某个样式表文件到底用的是什么字符编码，浏览器有一套识别顺序（优先级由高到低）：

文件开头的 Byte order mark[2] 字符值，不过一般编辑器并不能看到文件头里的 BOM 值；
HTTP 响应头里的 content-type 字段包含的 charset 所指定的值，比如：

Content-Type: text/css; charset=utf-8

CSS 文件头里定义的 @charset 规则里指定的字符编码；
标签里的 charset 属性，该条已在 HTML5 中废除；
默认是 UTF-8。

@import

@import[3] 用于告诉 CSS 引擎引入一个外部样式表。

link 和 @import 都能导入一个样式文件，它们有什么区别嘛？

link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；
link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；
link 没有兼容性问题，@import 不兼容 ie5 以下；
link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以。

@supports
@supports[4] 用于查询特定的 CSS 是否生效，可以结合 not、and 和 or 操作符进行后续的操作。

/* 如果支持自定义属性，则把 body 颜色设置为变量 varName 指定的颜色 */
@supports (--foo: green) {
   
   
    body {
   
   
        color: var(--varName);
    }
}

@property
CSS @property，让不可能变可能

继承性

在这里插入图片描述

在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。比如页面根元素 html 的文本颜色默认是黑色的，页面中的所有其他元素都将继承这个颜色，当申明了如下样式后，H1 文本将变成橙色。

body {
   
   
    color: orange;
}
h1 {
   
   
    color: inherit;
}

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

CSS 属性很多，但并不是所有的属性默认都是能继承父元素对应属性的，那哪些属性存在默认继承的行为呢？一定是那些不会影响到页面布局的属性，可以分为如下几类：

字体系列属性：font-family[字体系列]、font-style[字体风格]、font-size[字体大小]、font-weight[字体粗细] 等；
文本系列属性：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；
列表布局属性：list-style[列表风格]、list-style-image、list-style-type、list-style-position 等；
其他属性：visibility、cursor 等；
对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：
inherit：继承父元素对应属性的计算值；
initial：应用该属性的默认值，比如 color 的默认值是 #000；
unset：如果属性是默认可以继承的，则取 inherit 的效果，否则同 initial
revert：效果等同于 unset，兼容性差。

视觉格式化模型

视觉格式化模型（Visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。CSS 中一切皆盒子，而视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去，这个模型在计算的时候会依赖到很多的因素，比如：盒子尺寸、盒子类型、定位方案（是浮动还是定位）、兄弟元素或者子元素以及一些别的因素。
在这里插入图片描述
从上图中可以看到视觉格式化模型涉及到的内容很多，有兴趣深入研究的可以结合上图看这个 W3C 的文档 Visual formatting model[6]。所以这里就简单介绍下盒子类型。

盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型（display type）：

outer display type（对外显示）：决定了该元素本身是如何布局的，即参与何种格式化上下文；
inner display type（对内显示）：其实就相当于把该元素当成了容器，规定了其内部子元素是如何布局的，参与何种格式化上下文；

outer display type
对外显示方面，盒子类型可以分成 2 类：block-level box（块级盒子）和 inline-level box（行内级盒子）。

依据上图可以列出都有哪些块级和行内级盒子：

块级盒子：display 为 block、list-item、table、flex、grid、flow-root 等；
行内级盒子：display 为 inline、inline-block、inline-table 等；
所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列。

除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？

block

占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列；
设置 width/height 将会生效；
设置 padding 和 margin 将会生效；

inline

不会占满一行，宽度随着内容而变化；多个 inline 元素将按照从左到右的顺序在一行里排列显示，如果一行显示不下，则自动换行；
设置 width/height 将不会生效；
设置竖直方向上的 padding 和 margin 将不会生效；

inline-block

是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素；
设置 width/height 将会生效；
设置 padding 和 margin 将会生效；

inner display type

对内方面，其实就是把元素当成了容器，里面包裹着文本或者其他子元素。container box 的类型依据 display 的值不同，分为 4 种：

block container：建立 BFC 或者 IFC；
flex container：建立 FFC；
grid container：建立 GFC;
ruby container：接触不多，不做介绍。

值得一提的是如果把 img 这种替换元素（replaced element）申明为 block 是不会产生 container box 的，因为替换元素比如 img 设计的初衷就仅仅是通过 src 把内容替换成图片，完全没考虑过会把它当成容器。

1.块元素和行内元素、行内块元素的区别

参考文章：块、行内元素和行内块元素的区别
(一).块级元素

(1)常见的块元素有哪些？

常见的块元素有div、p、h1~h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr等，其中 <div> 标签是最典型的块元素。

(2)块级元素有什么特点？

自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内或者块级元素

(3)注意问题：

只有文字才能组成段落，因此 p 标签里面不能放块级元素，特别是 p 标签不能放 div。同理还有这些标签
h1,h2,h3,h4,h5,h6,dt ，他们都是文字类块级标签，里面不能放其他块级元素。

(二)行内元素

(1)常见行内元素有哪些？

常见的行内元素有 span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u等，其中 span标签最典型的行内元素，也称内联元素。

(2)行内元素有哪些特点？

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
只可以设置水平方向的内外边距
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

(3)注意问题：

链接里面不能再放链接。
特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

(三)行内块元素

(1) 常见行内块儿元素有哪些？

在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

(2)行内块元素有什么特点？

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

(四). 块级元素、行内元素和行内块元素的区别
在这里插入图片描述

(五) 块级元素、行内元素和行内块元素互转

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display: inline-block;

2.CSS选择器

CSS选择器的解析是从上到下，从右向左解析，为了避免对所有元素进行解析

可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；
不可继承的样式：border, padding, margin, width, height👉

(1) CSS选择器种类

① id选择器
根据提供的唯一id号快速获取标签对象
用于充当label标签for属性的值：用户名：，表示单击此label标签时，id为userid的标签获得焦点

② 类选择器 (class )
③ 标签选择器 (h1)
④ 相邻选择器 /子选择器(ul>li)/ 后代选择器(li a)
相邻选择器分为直接相邻元素选择器 (h1+p)和普通相邻元素选择器（h2 ~ h2）
层次选择器（父子、后代、兄弟、相邻）

⑤通配符选择器(*)
⑥属性选择器（a[rel = “XXX”]）
⑦伪类选择器( :hover :first-child ···)
⑧伪元素选择器( :before :after ···)
⑨分组选择器

(2)CSS选择器的优先级

优先级由高到低 !important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器>继承
优先级算法(权重)

元素标签（派生选择器）：1
class选择符：10
id选择符：100
内联样式最大：1000
元素选择符的权值
继承得到的样式的优先级最低
比较多个权重相同的CSS选择器优先级，定义的位置决定一切。从位置上由高到低分为六级：

      1.位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
      2. 位于 <style/>标签中的 @import 引入样式表所定义。
      3. 由<link/>标签所引入的样式表定义。
      4. 由<link/>标签所引入的样式表内的 @import 导入样式表定义。
      5. 用户设定。
      6. 浏览器默认。

同位置情况下样式定义最近者为准（优先级相同，选择最后出现的样式）👉

参考链接:你必须懂的css样式权重和优先级

(3)类选择的命名规范

传统起名法

• 布局类：header, footer, container, main, content, aside, page, section 
• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, overlay 
• 状态类：active, current, checked, hover, fail, success, warn, error, on, off 
• 包裹类：wrapper, inner, box, block 
• ⼤⼩类：s, m, l, xl, large, small 
• 主次类：primary, secondary, sub, minor 
• 样式类：text-large, color-primary, m-0, mt-10 
• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span 
• 列表类：list, item, field 
• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

BEM 命名
[block]__[element]–[modifier]
• Block 我的容器是谁
• Elemnt 我是谁
• Modifier 我是什么形态

范例1：

• .nav__logo，.photo__img, .photo__img--framed 
• .btn--secondary 
• .hero__text--small, .hero__text--big

范例2：

<figure class="photo"> 
 <img class="photo__img photo__img--framed" src="me.jpg"> 
 <figcaption class="photo__caption photo__caption--large">Look at me!</figcaption> 
</figure> 
<style> 
 .photo__img{
   
    
 /* photo⾥图⽚的默认样式*/
 } 
.photo__img--framed {
   
    
 /* 在默认基础上新增的样式 */
 } 
 .photo__caption--large {
   
    
 /* 在默认基础上新增的样式 */
 } 
</style

（4）特殊选择器的使用示例和妙用

学会这些CSS特殊选择器，轻松写样式，提升开发效率
①巧用not选择器

有些情况下所有的元素都需要某些样式，唯独最后一个不需要，这时候使用not选择器将会特别方便

如下图：最后一个元素没有下边框
在这里插入图片描述

//html
<ul>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
</ul>
//css
li:not(:last-child){
   
   
  border-bottom: 1px solid #ebedf0;
}

②用where简化代码

:where 深入了解 CSS 中的 :where() 和 :is() 函数

当对多个元素应用相同的样式时，CSS 可能如下：

.parent div,
.parent .title,
.parent #article {
   
   
  color: red;
}

这样代码看起来可读性不是很好，:where() 伪类这时就派上用场了。:where() 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

上面的代码使用:where()就可以这么写：

.parent :where(div, .title, #article) {
   
   
  color: red;
}

代码是不是看起来简洁了很多？

③:empty 选择器
在这里插入图片描述
平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。

一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：

<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暂无数据</div>
    </template>
</div>

但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干。

.container {
   
   
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
   
   
    content: "暂无数据";
}

通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？

④使用CSS伪元素来生成分隔符
好处是无需容错处理，避免 JS 报错，比如 list.map is not a function…

<span v-for="el in list">{
   
   {
   
   el.name}}</span>
<style>
span:not(:first-child)::before {
   
   
   content:'、'
}
</style>

3.CSS伪类和伪元素

(1)伪类和伪元素种类

CSS伪元素包含以下

::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
:after 在元素在该元素之后添加内容
:before 在元素在该元素之前添加内容

CSS伪类

:root 选择文档的根元素，等同于html元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:first-child 选取当前选择器下第一个元素。
:last-child 和 first-child 相反，选取当前选择器下最后一个元素。
:only-child 选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。
:only-of-type 选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。

条件伪类

:lang()：基于元素语言来匹配页面元素；
:dir()：匹配特定文字书写方向的元素；
:has()：匹配包含指定元素的元素；
:is()：匹配指定选择器列表里的元素；
:not()：用来匹配不符合一组选择器的元素；
:where 深入了解 CSS 中的 :where() 和 :is() 函数

行为伪类

:active：鼠标激活的元素；
:hover：鼠标悬浮的元素；
::selection：鼠标选中的元素；

状态伪类

:target：当前锚点的元素；
:link：未访问的链接元素；
:visited：已访问的链接元素；
:focus：输入聚焦的表单元素；
:required：输入必填的表单元素；
:valid：输入合法的表单元素；
:invalid：输入非法的表单元素；
:in-range：输入范围以内的表单元素；
:out-of-range：输入范围以外的表单元素；
:checked：选项选中的表单元素；
:optional：选项可选的表单元素；
:enabled：事件启用的表单元素；
:disabled：事件禁用的表单元素；
:read-only：只读的表单元素；
:read-write：可读可写的表单元素；
:blank：输入为空的表单元素；
:current()：浏览中的元素；
:past()：已浏览的元素；
:future()：未浏览的元素；

结构伪类

:root：文档的根元素；
:empty：无子元素的元素；
:first-letter：元素的首字母；
:first-line：元素的首行；
:nth-child(n)：元素中指定顺序索引的元素；
:nth-last-child(n)：元素中指定逆序索引的元素；；
:first-child ：元素中为首的元素；
:last-child ：元素中为尾的元素；
:only-child：父元素仅有该元素的元素；
:nth-of-type(n) ：标签中指定顺序索引的标签；
:nth-last-of-type(n)：标签中指定逆序索引的标签；
:first-of-type ：标签中为首的标签；
:last-of-type：标签中为尾标签；
:only-of-type：父元素仅有该标签的标签；

静态伪类（只用于a标签）

:link 指示这个“超链接”（即 a 元素里有一个 href 属性）未被访问
:visited 指示这个“超链接”已被访问👉

动态伪类（使用时鼓励“LVHT”顺序）

:focus 指示这个元素拥有输入“焦点”——即可以接受键盘输入，或通过某种方式可以激活
:hover 指示当鼠标停留在这个元素上时，外观可以作相应改变
:active 指示这个元素可以被用户输入“激活”，如，用户停留在一个超链接上，当点击鼠标时，这个链接就会“激活”👉
被点击访问过的超链接样式不再具有hover和active了, 解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

伪类和伪元素的根本区别

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）。伪类用一个冒号表示 :first-child，伪元素则使用两个冒号表示 ::first-line，为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。👉
它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
伪元素在一个选择器里只能出现一次，并且只能出现在末尾。
伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

面试回答作用

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

从青铜到王者10个css3伪类使用技巧和运用

1.CSS引入

(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）

CSS引入方式有4种内联、内嵌、外链、导入
外链 link
①属于XHTML标签;
②除了可以加载css之外,还可以定义rss、rel等属性;
③没有兼容性问题;
④支持使用javascript改变样式(使用dom控制样式时的差别);
⑤页面被加载时,link会同时被加载。
⑥link方式的样式权重高于@import的权重。
导入@import
①是css提供的；
②@import只在IE 5以上才能识别;
③ 不支持通过javascript修改样式(使用dom控制样式时的差别);
④通过@import引用的CSS会等到页面被加载完再加载并且只能用于加载css，可能出现无样式网页。

(2)Style 标签写在 body 后和 body 前有什么区别？

一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。
若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象（页面闪烁）。

(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC

当使用@import导入CSS时，会导致某些页面在IE出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称FOUC。
产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决办法：只要在之间加入一个或者元素即可。👉

4.CSS盒模型✨

盒模型分类

W3C盒模型（标准盒模型）
width = content
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
IE盒模型（怪异盒模型）
width = border + padding + content
一个块的总宽度 = width + margin

转换盒模型
Css中默认的盒模型是W3C盒模型，两者间的转换可以通过设置属性box-sizing来转换

box-sizing: content-box; // W3C盒模型标准
box-sizing: border-box; // IE盒模型标准

盒子一些相关宽度

clientWidth = width+左右padding
offsetWidth = width + 左右padding + 左右boder
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）👉

边界塌陷

CSS 中存在一个 margin collapse，即边界塌陷或者说边界重叠。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。👉

①并排 DIV 边界塌陷（兄弟）
对于上下两个并排的 DIV 块而言，上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 会塌陷，会取上下两者 margin 里最大值作为显示值，只设置单个margin。👉
②包含元素盒子塌陷（父子）
父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content(文本)中的其中一个，然后按此div 进行margin。👉

解决方法

为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border: 1px solid transparent）
为父盒子添加overflow: hidden;
为父盒子设定padding值；
为父盒子添加position：fixed；👉

负值作用

负 marign实现元素的水平垂直居中
负 marign隐藏列表 li 首尾多余的边框
负 text-indent 实现文字的隐藏
负的 z-index 参与层叠上下文排序
定位中的left、right、top、bottom👉

7.display 布局(行内元素和块级元素)

值	描述
none	元素会被隐藏，不显示
inline	元素会被设置为内联元素，内部按行从左向右排列（元素前后没有换行符）
block	元素会被设置为块级元素，内部按列从上到下排列（元素前后带有换行符）
inline-block	元素会被设置为行内块级元素，不会独占一行的块级元素
list-item	元素会作为列表显示
table	元素会作为块级表格来显示（类似table），表格前后带有换行符
flex	元素会进入flex布局模式
2.inline、block、inline-block三者区别
block块级特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline内联特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

inline-block 特点：

inline-block内联块状元素同时具备内联元素、块状元素的特点。
和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

3.使用 display:inline-block 会产生什么问题？又如何解决？（*）

两个inline-block元素放到一起会产生一段空白。

产生空白的原因

元素被当成行内元素放置的时候，元素之间的空白符（空格，回车换行等）都会被浏览器处理，根据CSS中空白属性的处理方式（否则是正常，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符较长一定长度，所以inline-block的元素之间就出现了空隙。

解决办法

将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行
父元素中设置字体大小：0，在子元素上重置正确的字体大小
为子元素设置float：left
该布局提供了一种更高效的方法对容器中的项目进行布局、对齐和分配空间，他没有方向上的限制，可以由开发人员自由操作（子元素的 vertical-align、float、clear 属性会失效）。

9.overflow溢出

scroll：必定出现滚动条
auto：子元素内容大于父元素时出现滚动条
visible：溢出的内容出现在父元素之外
hidden：溢出时隐藏👉

如何实现：单行文本溢出加 …(*)

white-space: nowrap; /* 首先，强制文本不换行；*/ 
overflow: hidden; /*其次，隐藏溢出；*/  
text-overflow: ellipsis; /*最后，对溢出的文本用 ellipsis 省略号代替。*/

全屏滚动的原理？需要哪些css属性？

原理

类似于轮播图，整体元素一直排列下去，假设有5个需要展示的全屏页面，那么高度将会是500%，但我们只能展示100%，剩下的内容可以通过transform进行Y轴定位，也可以通过margin-top实现

涉及css属性
overflow:hidden | transition:all 1000ms ease

10.格式化上下文

格式化上下文（Formatting Context）是 CSS2.1 规范中的一个概念，大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。

不同类型的盒子有不同格式化上下文，大概有这 4 类：

BFC (Block Formatting Context) 块级格式化上下文；
IFC (Inline Formatting Context) 行内格式化上下文；
FFC (Flex Formatting Context) 弹性格式化上下文；
GFC (Grid Formatting Context) 格栅格式化上下文；
其中 BFC 和 IFC 在 CSS 中扮演着非常重要的角色，因为它们直接影响了网页布局，所以需要深入理解其原理。

(一)BFC块级格式上下文

(1)什么是BFC？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

Box：css布局的基本单位
Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有，这儿先不讲了。

Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

(2)BFC的布局规则
在这里插入图片描述

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

(3)如何创建BFC

根元素 → 根元素（html）就是最大的BFC
定位元素, position:fixed/absolute
浮动元素, float 除 none 以外的值
display 为以下其中之一的值inline-block、table-cell、table-caption
overflow不为visible (hidden，auto，scroll）

(4)BFC的作用及原理

①利用BFC避免margin重叠。

<!DOCTYPE html>
<html lang="en">
<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>防止margin重叠</title>
</head>
<style