HTML5andCSS3面试题大全-369IT编程

admin管理员组
文章数量:1130349

HTML5andCSS3面试题大全

一.HTML5
- - 1.html5有哪些新特性、移除了那些元素？
  - 2.有⼏种前端储存的⽅式？这些⽅式的区别是什么？（追问）✨✨✨✨
  - 3.你对HTML语义化的理解？✨
  - 4.html文档解析
  - 5.用websocket搭建实验聊天室
  - 6.什么是doctype的作用是什么？✨
  - 7.HTML、XHTML、XML有什么区别
  - 8.什么是data-属性？
  - 9. HTML5与HTML4的不同之处
  - 10. 有哪些常⽤的meta标签？
  - 11.src和href的区别？
  - 12.script标签中defer和async的区别？✨✨✨
  - 13.（Drag）拖和放（Drop）
  - 14.24个强大的HTML属性与实用小技巧
  - 15.Emmet语法总结
  - 16.Iframe的同源策略与通信机制
  - 17.RequestAnimationFrame
二.CSS
- 核心基础知识
- - 语法
  - @规则
  - 继承性
  - 视觉格式化模型
  - 1.块元素和行内元素、行内块元素的区别
  - 2.CSS选择器
  - - (1) CSS选择器种类
    - (2)CSS选择器的优先级
    - (3)类选择的命名规范
    - （4）特殊选择器的使用示例和妙用
  - 3.CSS伪类和伪元素
  - - (1)伪类和伪元素种类
  - 1.CSS引入
  - - (1)有哪些引入方式？通过link和@import引入有什么区别？（* ）
    - (2)Style 标签写在 body 后和 body 前有什么区别？
    - (3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC
  - 4.CSS盒模型✨
  - 7.display 布局(行内元素和块级元素)
  - 9.overflow溢出
  - 10.格式化上下文
  - - (一)BFC块级格式上下文
    - (二)IFC行内格式上下文
  - 12.z-index层叠上下文
  - 13.CSS浏览器兼容性
  - 15.em\px\rem区别？
  - 18.学习布局
  - - (一)布局方式
    - - 1.流式布局
      - 2.浮动布局
      - 3.定位布局
      - 4.表格布局
      - 5.弹性布局
      - 6.栅格布局
      - 7.响应式布局
    - (二)布局实践
    - - 1.水平垂直居中
      - 2.常用布局
      - 布局一：两栏布局（边栏定宽主栏自适应）
        
        布局二：三栏布局（两侧栏定宽主栏自适应）
        
        布局三：多列等高布局
        
        布局四：三行布局（头尾定高主栏自适应）
    - 3.自适应的优秀布局方案实践
  - 19.CSS 动画有哪些？
  - 21.为什么要初始化 CSS 样式
  - 22.手写题：实现一个两栏布局。三列的布局，并且要求三列等高，且以内容最多的一列的高度为准。
  - - 1.两栏布局的方式
    - 2.实现三列布局的方式
  - 23.CSS实现自适应正方形、等宽高比矩形
  - 24.CSS sprites 的理解及其好处
  - 26.WEB标准以及W3C
  - 27.css实现瀑布流布局
  - 28.TailwindCSS v3.0 一大波新特性来袭！
  - 29.CSS预编译
  - - 1.scss是什么及其几大特性？
    - 2.安装和使用Sass的步骤是什么？
    - 3.Sass和Less有什么区别？
    - 4.什么是CSS预处理器/后处理器？
    - 5.UI组件库中三大预编译的样式穿透
    - 6.当Sass和新CSS功能发生冲突时的解决方案
    - 7.SCSS的应用
  - 30.进阶：玩转 CSS 变量
  - 31.CSS代码整洁之道
  - 32.CSS性能优化
  - 33.提高用户体验技巧
  - 34.12种增强CSS技能并加快开发速度的资源
- 二.常见需求
- - 1.自定义属性
  - 3.PC端兼容性问题汇总
  - - (1)消除浏览器默认样式
  - 5.长文本省略处理
  - 6.水平垂直居中
  - - 单行的文本、inline 或 inline-block 元素
    - 固定宽高的块级盒子
    - 不固定宽高的块级盒子
  - 8.CSS 实现优惠券的技巧
  - 10.常见面试题
  - - (1)面试官：让Chrome支持小于12px 的文字方式有哪些？区别？
    - (2)面试官：flex：7 1 100px中这三个参数你知道什么意思吗？
    - (3)有哪些方式（CSS）可以隐藏页面元素？[visibility \display\opacity的差别]
- 三.CSS奇巧淫技
- - 1.有意思！奇妙的 CSS shapes(CSS图形)
  - 2.5个你可能不知道的很棒CSS功能
  - 3.Github -- iCSS
  - 4.不可思议的纯 CSS 滚动进度条效果
  - 6.N个常见的CSS3动效技巧大全
  - 7.CSS @property，让不可能变可能
  - 8.N款非常实用的CSS3工具
参考链接

一.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进⾏操作会⾮常⽅便。

深入浅出前端本地储存
Cookie、localStorage、sessionStorage及Storage
面试官：你确定多窗口之间sessionStorage不能共享状态吗？？？

二次封装最佳实践
①你还在直接用 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）

前端里的拖拖拽拽了解一下？
掌握原生拖拽，类似拖拽需求，一网打尽
详解HTML中的拖拽案例和难点分析
使用 Vue 自定义拖放文件上传
vue3新拖拽组件库推荐，web开发拖拽必备

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

24个强大的HTML属性，建议每位前端工程师都应该掌握！
HTML实用小技巧

15.Emmet语法总结

Emmet语法总结

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

Iframe的同源策略与通信机制
如何优雅进行IFrame通信
iframe父子通信，看这篇就够了
当被问到你使用过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

HTML5andCSS3面试题大全
- 一.HTML5
- - - 1.html5有哪些新特性、移除了那些元素？
    - 2.有⼏种前端储存的⽅式？这些⽅式的区别是什么？（追问）✨✨✨✨
    - 3.你对HTML语义化的理解？✨
    - 4.html文档解析
    - 5.用websocket搭建实验聊天室
    - 6.什么是doctype的作用是什么？✨
    - 7.HTML、XHTML、XML有什么区别
    - 8.什么是data-属性？
    - 9. HTML5与HTML4的不同之处
    - 10. 有哪些常⽤的meta标签？
    - 11.src和href的区别？
    - 12.script标签中defer和async的区别？✨✨✨
    - 13.（Drag）拖和放（Drop）
    - 14.24个强大的HTML属性与实用小技巧
    - 15.Emmet语法总结
    - 16.Iframe的同源策略与通信机制
    - 17.RequestAnimationFrame
- 二.CSS
- - 核心基础知识
  - - 语法
    - @规则
    - 继承性
    - 视觉格式化模型
    - 1.块元素和行内元素、行内块元素的区别
    - 2.CSS选择器
    - - (1) CSS选择器种类
      - (2)CSS选择器的优先级
      - (3)类选择的命名规范
      - （4）特殊选择器的使用示例和妙用
    - 3.CSS伪类和伪元素
    - - (1)伪类和伪元素种类
    - 1.CSS引入
    - - (1)有哪些引入方式？通过link和@import引入有什么区别？（* ）
      - (2)Style 标签写在 body 后和 body 前有什么区别？
      - (3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC
    - 4.CSS盒模型✨
    - 7.display 布局(行内元素和块级元素)
    - 9.overflow溢出
    - 10.格式化上下文
    - - (一)BFC块级格式上下文
      - (二)IFC行内格式上下文
    - 12.z-index层叠上下文
    - 13.CSS浏览器兼容性
    - 15.em\px\rem区别？
    - 18.学习布局
    - - (一)布局方式
      - 1.流式布局
        
        2.浮动布局
        
        3.定位布局
        
        4.表格布局
        
        5.弹性布局
        
        6.栅格布局
        
        7.响应式布局
      - (二)布局实践
      - 1.水平垂直居中
        
        2.常用布局
        
        布局一：两栏布局（边栏定宽主栏自适应）
        
        布局二：三栏布局（两侧栏定宽主栏自适应）
        
        布局三：多列等高布局
        
        布局四：三行布局（头尾定高主栏自适应）
      - 3.自适应的优秀布局方案实践
    - 19.CSS 动画有哪些？
    - 21.为什么要初始化 CSS 样式
    - 22.手写题：实现一个两栏布局。三列的布局，并且要求三列等高，且以内容最多的一列的高度为准。
    - - 1.两栏布局的方式
      - 2.实现三列布局的方式
    - 23.CSS实现自适应正方形、等宽高比矩形
    - 24.CSS sprites 的理解及其好处
    - 26.WEB标准以及W3C
    - 27.css实现瀑布流布局
    - 28.TailwindCSS v3.0 一大波新特性来袭！
    - 29.CSS预编译
    - - 1.scss是什么及其几大特性？
      - 2.安装和使用Sass的步骤是什么？
      - 3.Sass和Less有什么区别？
      - 4.什么是CSS预处理器/后处理器？
      - 5.UI组件库中三大预编译的样式穿透
      - 6.当Sass和新CSS功能发生冲突时的解决方案
      - 7.SCSS的应用
    - 30.进阶：玩转 CSS 变量
    - 31.CSS代码整洁之道
    - 32.CSS性能优化
    - 33.提高用户体验技巧
    - 34.12种增强CSS技能并加快开发速度的资源
  - 二.常见需求
  - - 1.自定义属性
    - 3.PC端兼容性问题汇总
    - - (1)消除浏览器默认样式
    - 5.长文本省略处理
    - 6.水平垂直居中
    - - 单行的文本、inline 或 inline-block 元素
      - 固定宽高的块级盒子
      - 不固定宽高的块级盒子
    - 8.CSS 实现优惠券的技巧
    - 10.常见面试题
    - - (1)面试官：让Chrome支持小于12px 的文字方式有哪些？区别？
      - (2)面试官：flex：7 1 100px中这三个参数你知道什么意思吗？
      - (3)有哪些方式（CSS）可以隐藏页面元素？[visibility \display\opacity的差别]
  - 三.CSS奇巧淫技
  - - 1.有意思！奇妙的 CSS shapes(CSS图形)
    - 2.5个你可能不知道的很棒CSS功能
    - 3.Github -- iCSS
    - 4.不可思议的纯 CSS 滚动进度条效果
    - 6.N个常见的CSS3动效技巧大全
    - 7.CSS @property，让不可能变可能
    - 8.N款非常实用的CSS3工具
- 参考链接
一.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" />

```
延伸提问：怎样处理移动端 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进⾏操作会⾮常⽅便。
1. 深入浅出前端本地储存
2. Cookie、localStorage、sessionStorage及Storage
3. 面试官：你确定多窗口之间sessionStorage不能共享状态吗？？？
二次封装最佳实践
①你还在直接用 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）
1. 前端里的拖拖拽拽了解一下？
2. 掌握原生拖拽，类似拖拽需求，一网打尽
3. 详解HTML中的拖拽案例和难点分析
4. 使用 Vue 自定义拖放文件上传
5. vue3新拖拽组件库推荐，web开发拖拽必备
14.24个强大的HTML属性与实用小技巧
1. 24个强大的HTML属性，建议每位前端工程师都应该掌握！
2. HTML实用小技巧
15.Emmet语法总结

Emmet语法总结

16.Iframe的同源策略与通信机制
1. Iframe的同源策略与通信机制
2. 如何优雅进行IFrame通信
3. iframe父子通信，看这篇就够了
4. 当被问到你使用过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
  本文标签：面试题大全
  版权声明：本文标题：HTML5andCSS3面试题大全内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1763921655a2971645.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

HTML5andCSS3面试题大全

HTML5andCSS3面试题大全

一.HTML5

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

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

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

4.html文档解析

5.用websocket搭建实验聊天室

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

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

8.什么是data-属性？

9. HTML5与HTML4的不同之处

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

11.src和href的区别？

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

13.（Drag）拖和放（Drop）

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

15.Emmet语法总结

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

17.RequestAnimationFrame

二.CSS

核心基础知识

语法

@规则

继承性

视觉格式化模型

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

2.CSS选择器

HTML5andCSS3面试题大全

一.HTML5

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

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

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

4.html文档解析

5.用websocket搭建实验聊天室

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

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

8.什么是data-属性？

9. HTML5与HTML4的不同之处

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

11.src和href的区别？

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

13.（Drag）拖和放（Drop）

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

15.Emmet语法总结

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

17.RequestAnimationFrame

二.CSS

核心基础知识

语法

@规则

继承性

视觉格式化模型

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

2.CSS选择器

更多相关文章

busybox命令大全

电脑C盘清理方法大全：释放空间提升性能的实用技巧

毕业设计选题不会选？信息安全专业选题大全分享（含数据加密认证与授权方向）

【免费】Linux命令行与Shell脚本编程大全 第3版 PDF全本 21MB 百度网盘下载

Linux下Clamav 杀毒软件安装使用文档，2024年最新软件测试面试题高级

win10 环境变量及其作用大全

电脑故障维修大全 [3]

Windows新建设置用户命令大全

设置计算机关机时间快捷键,怎么让电脑定时关机设置大全

设备面试题+蓝队知识题+流量

黑客工具大全

计算机硬件报警声音,电脑开机报警声音大全详解及处理

工业软件下载大全202108

电子邮件注册帐号大全_电子邮件

【面试题】5年前端 - 历时1个月收获7个offer

PostgreSQL VIP故障切换的大全，非常的实用

统信UOS命令大全 麒麟系统命令大全 Linux常用命令操作大全(非常全非常详细) ubuntu命令大全常用操作命令大全

【免费下载】 安防监控工程图标大全（CAD）

软件测试面试题整理(六）之app测试篇

乐高ev3搭建图纸大全_乐高拼装步骤图纸制作软件分享

发表评论

推荐文章

python3爬取torrent种子链接实例

【免费】Linux命令行与Shell脚本编程大全第3版 PDF全本 21MB 百度网盘下载

统信UOS命令大全麒麟系统命令大全 Linux常用命令操作大全(非常全非常详细) ubuntu命令大全常用操作命令大全

【免费下载】安防监控工程图标大全（CAD）

【免费下载】爱普生打印机固件恢复神器：一键还原您的打印机

Sublime 32位激活码

【亲测免费】抖音直播伴侣推流密钥获取工具使用教程