HTML - 标签 - 菠菜眾長https://lruihao.cn/tags/html/HTML - 标签 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Sun, 12 Feb 2023 19:40:43 +0800浏览器 IMG 图片原生懒加载 loading="lazy"https://lruihao.cn/posts/native-img-loading-lazy/Sun, 12 Feb 2023 19:40:43 +0800Lruihaohttps://lruihao.cn/posts/native-img-loading-lazy/记录使用 HTML 原生方案实现图片的懒加载。

语法规范

HTML loading 属性适用于 img 和 iframe，语法规范见 HTML Standard - Lazy loading attributes。

关键词 状态 描述
lazy 懒惰的 用于延迟获取资源，直到满足某些条件。
eager 渴望的 用于立即获取资源；默认状态。

属性的 缺失值默认值 和 无效值默认值 都是 Eager状态。

实际应用

基于 FixIt 主题 版本大于 v0.2.18 的博客网站使用就是原生的懒加载方案，大致如下：

1
2
3
4
5
6
7
8

<img
  loading="lazy"
  src="./example.jpg"
  data-title="title text"
  data-alt="alt text"
  onload="this.title=this.dataset.title;this.alt=this.dataset.alt;for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute(a);}this.dataset.lazyloaded='';"
  onerror="this.title=this.dataset.title;this.alt=this.dataset.alt;for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute(a);}"
/>

为了达到 loading 的效果，以上代码中在 onload 后会给图片加上一个 data-lazyloaded 属性，所以我们可以这样来写 css 以达到显示 loading 图标的效果：

1
2
3

img[loading='lazy']:not([data-lazyloaded]) {
  background: url(loading.svg) no-repeat center;
}

设置 data-title 和 data-alt 是因为移动浏览器大多数只要有 title 或 alt 就会显示图片的替代字符，所以等到图片加载完或加载失败后再回填。

懒加载特性的研究

以下结论来自 浏览器 IMG 图片原生懒加载 loading=”lazy”实践指南 « 张鑫旭-鑫空间-鑫生活 总结部分。

  1. Lazy loading 加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系.
  2. Lazy loading 加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。
  3. Lazy loading 加载没有缓冲，滚动即会触发新的图片资源加载。
  4. Lazy loading 加载在窗口 resize 尺寸变化时候也会触发，例如屏幕高度从小变大的时候。
  5. Lazy loading 加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。

参考链接

]]>浏览器渲染原理https://lruihao.cn/posts/browser-rendering/Sun, 05 Feb 2023 21:02:52 +0800Lruihaohttps://lruihao.cn/posts/browser-rendering/

浏览器是如何渲染页面的？

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。

这样，整个渲染流程就形成了一套组织严密的生产流水线。

渲染的第一步是解析 HTML。

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。

如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

渲染的下一步是样式计算。

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。

在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成px

这一步完成后，会得到一棵带有样式的 DOM 树。

接下来是布局，布局完成后会得到布局树。

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。

大部分时候，DOM 树和布局树并非一一对应。

比如display:none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。

下一步是分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。

再下一步是绘制

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

合成线程首先对每个图层进行分块，将其划分为更多的小区域。

它会从线程池中拿取多个线程来完成分块工作。

分块完成后，进入光栅化阶段。

合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。

GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

光栅化的结果，就是一块一块的位图

最后一个阶段就是画了

合成线程拿到每个层、每个块的位图后，生成一个个「指引（quad）」信息。

指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。

变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。

合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。

什么是 reflow？

reflow 的本质就是重新计算 layout 树。

当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。

也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。

浏览器在反复权衡下，最终决定获取属性立即 reflow。

什么是 repaint？

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发 repaint。

由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

为什么 transform 的效率高？

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。

]]>Web 开发规则，代码规范https://lruihao.cn/posts/dev-rules/Thu, 15 Aug 2019 18:30:31 +0000Lruihaohttps://lruihao.cn/posts/dev-rules/精神
  • 绝不写死代码，硬编码
  • 不留不要用的、垃圾代码

Git

  • Master 的 BUG 必须最少且趋近于零，为最稳定的版本
  • 每次 Commit 信息应该准确填写。不可模棱两可，eg: 修复 BUG、增加功能
  • 禁止 Commit IDE 的 project data，e.g: .vscode
  • 禁止上传垃圾代码

更多规则详见文档 Commit 规范

分支（Branch）

  • 命名规则：应以此分支主要目的命名（修复什么 BUG，新增特定功能）
  • 合并后的分支应该删除

commit

  • 遵循一个功能一个 commit 的原则

Restful

  • 资源名词站在 API 的角度思考

    • 复数名词：可以复数笔数据，回传结果为 Array

      举例：GET/users 取得多笔使用者资料

      • 刪除，放在复数名词內，让 Router 保持一致性
      • 增加，放在复数名詞內，让 Router 保持一致性

    • 单数名词：仅取得单笔数据，必须指定 PK，两两一组，回传结果为 Object 举例：GET/user/{accont} 取得单笔使用者资料，必须指定 PK

  • URL 中一律不带 id 参数

1
2

正确范例： calendar_manager/calendar/29
错误范例： calendar_manager/calendar/29?id=29

更多规则详见文档 RESTful

命名

  • 命名应根据内容做有意义的命名，让后续维护人员可以顾名思义！
  • 即使不会发生错误，代码英文大小写也需明确区分。

语意

类型 命名规则 说明
属性 (Attribute, Property) 名词 user_name、userName
方法 (Method, Function) 动词 + 名词 getUserName、get_user_name 常見的动词有：get、set、update、delete、remove

字母与分隔

语言 变量 (Variable, Parameter, Argument) 常量 (Constant) 面向对象 - 类名 (Class Name) 面向对象 - 成员 (mebmer)
HTML 全部小写，不同单词以「-」分隔
e.g: user-id
CSS、SCSS 全部小写，不同单词以「-」分隔，CSS 变量以「–」开头，SCSS 变量以「$」开头
e.g: .user-id、–header-height、$header-height
JavaScript 驼峰式命名法
首字小写，不同单字「首字以大写」分隔
e.g: userId		 全部大写，不同单字以「_」分隔 MAX_COUNT 驼峰式命名法
首字大写，不同单字「首字以大写」分隔
一个文件放一个 Class, 文件名即为 Class Name
e.g: User		 驼峰式命名法
公有 (public) : 首字小写，不同单词「首字以大写」分隔
e.g: name, getName
私有 (private): _公有命名规则
e.g: _name,_getName
Vue
Java
PHP 全部小写，不同单词以「_」分隔
e.g: user_id
Python
SQL 由使用者定义的：表名、字段名
全部小写，不同单词以「_」分隔		 SQL 语法、函数全部大写
e.g: SELECT、INSERT INTO

通用

  • 代码编写
  • 每个函数应该使用块注释，注释应包含函数功能说明、参数说明。规则见：JSDoc、JavaDoc
  • 不必要的代码不要写，也应禁止放到注释里面！
  • if-else 的 {} 严禁省略
  • 代码规范、代码排版等可通过 eslint 等工具做统一处理

正确写法

1
2
3
4
5
6

public function test () {
  // do something
  if (a === b) {
    // do something
  }
}

错误写法

1
2
3
4
5
6
7
8

public function test ()
{
  // do something
  if (a === b)
  {
    // do something
  }
}
  • 代码排版
    • 任何代码应该以 2 个 space 为一个缩进做好排版、不可使用 tab
  • 函数 (Function, Methd)
    • 函数声明时需在函数上方加上函数注释，注释应包含函数说明、参数内容（参数类型、参数英文名称、参数说明）、返回值内容（返回值类型、返回值说明）
  • 类 (Class)
    • 一个类（Class）的声明只能存在一个文件
    • 类（Class）的声明文件，文件名必须为类名
  • 其他
    • 连接本地任何其他资源（图片、文件、网站）皆使用相对路径，禁止使用绝对路径，非本地资源除外

HTML

代码编写

  • 禁止在 HTML 使用 <style>、<script>，一律使用外部档案引用方式引用 CSS、JavaScript 文件
  • HTML 标签需成双成对，有头有尾
  • 块级标签：<tag></tag>
  • 单标签：<tag />
  • 禁止使用已被 HTML 舍弃的旧标签、属性，如：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- html tag -->
<center>
<font>
<basefont>
<s>
<strike>
<u>
<listing>
<plaintext>
<xmp>
<!-- html attribute -->
align
bgcolor
color

CSS

CSS 的定义应该独立一个 CSS 文件，禁止使用 <style> 或 style 属性直接在 HTML 中定义样式。

JavaScript

禁止使用 HTML 字串，一律使用 Dom 产生 HTML, e.g: document.createDocumentFragment()

注释

JavaScript 注释应该遵循 JSDoc 的标准撰写

全局变量 (Global)

1

/* global ZT */

常量 (Constant)

1
2
3
4

/**
 * 常量說明
 * @type {常量类型}
 */

Example

1
2
3
4
5

/**
 * 请求地址
 * @type {String}
 */
const REQUEST_URL = 'http://localhost:8080';

函數、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param {参数类型} 参数名称参数说明
 * @param {参数类型} [选择性参数名称] 参数说明
 * @param {参数类型} [选择性参数名称=参数预设值] 参数说明
 * @returns {返回值类型} 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/**
 * 取得使用者
 * @param {Int} userId 使用者 ID
 * @param {Object} [options] 其他选项
 * @param {String} [options.query='a'] 查询关键词 默认为 'a'
 * @returns {Object} 使用者资料
 */
function getUser(userId, options) {
  // do something
  return user;
}

Vue

  • 待补充

Java

Java 注释应该遵循 JavaDoc 的标准撰写

  • 待补充

PHP

前端参数取得

参数取得需通过 filter_input 函数取得，不得使用 _GET 、_POST

输出到前台

参数命名必须为：全部小写，不同单字以「_」分隔

注解

PHP 注解应该遵循 PHPDoc 的标准撰写

成员变量 (Member)

成员变量只的是 Class 内的成员变数，我们都会要求替成员变量增加注解说明。通常 Function 的变量除非太特别否则都不需要特别注解说明。

1
2
3
4

/**
 * 成员变量說明
 * @type {类型}
 */

Example

1
2
3
4
5

/**
 * 使用者 ID
 * @type {String}
 */
$userId = 'Hello';

函数、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param 参数型态 参数名称 参数说明
 * @option 参数选项类型 参数选项名称 参数选项说明
 * @uses 全局变量 全域变数说明
 * @returns 返回值类型 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/**
 * 取得使用者
 * @param int userId 使用者 ID
 * @param object options 其他选项
 * @option string options['query'] 查询关键字
 * @uses $_POST['role_id'] 从前端以 POST 取得角色 ID
 * @returns object 使用者资料
 */
function getUser ($userId, $options) {
  // do something
  return $user;
};

Python

  • 待补充

Database

  • 禁止使用 Table Join。
  • 禁止使用 Oracle Trigger。
  • 禁止将查询数据库的 SQL 放在循环中查询

SQL 撰写

  • 属于 SQL 语法使用大写（SELECT，WHERE，INSERT etc..）
  • 属于使用者自己定义的使用小写（表名 table name，字段名 column name etc..）
  • 表名、字段名前后需加上 `

Example

1

INSERT INTO `user` VALUES('a', 'b');

统一用词

系统中常用词，例如弹出框按钮、搜索框等，仅为举例，不限与此。

用词 统一
最后、最终 最后
关闭、Cancel、取消 取消
存储、保存、修改、OK、确定 确定
搜寻、查询、查找、搜索 搜索
]]>条件注释判断浏览器版本<!--[if lt IE 9]>;https://lruihao.cn/posts/ifzhushi/Fri, 10 May 2019 13:08:27 +0000Lruihaohttps://lruihao.cn/posts/ifzhushi/

<!--[if !IE]><!--> 除 IE 外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的 IE 可识别 <![endif]-->
<!--[if IE 6]> 仅 IE6 可识别 <![endif]-->
<!--[if lt IE 6]> IE6 以及 IE6 以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6 以及 IE6 以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅 IE7 可识别 <![endif]-->
<!--[if lt IE 7]> IE7 以及 IE7 以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7 以及 IE7 以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅 IE8 可识别 <![endif]-->
<!--[if IE 9]> 仅 IE9 可识别 <![endif]-->

项目范例说明
![if !IE]The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
NOT 运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
小于运算符。如果第一个参数小于第二个参数，则返回 true。
lte[if lte IE 6]The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回 true。
gt[if gt IE 5]The greater-than operator. Returns true if the first argument is greater than the second argument.
大于运算符。如果第一个参数大于第二个参数，则返回 true。
gte [if gte IE 7]The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回 true。
( )[if !(IE 7)]Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
&[if (gt IE 5)&(lt IE 7)]The AND operator. Returns true if all subexpressions evaluate to true
AND 运算符。如果所有的子表达式计算结果为 true，返回 true
|[if (IE 6)|(IE 7)]The OR operator. Returns true if any of the subexpressions evaluates to true.
OR 运算符。返回 true，如果子表达式计算结果为 true。
1
2
3
4
5

<!--[if lt IE 9]>
加载 CSS1
<!--[else]>
加载 CSS2
<![endif]-->

这样有效是有效，但是用 HTML VALIDATOR 里，报错，因为这个不符合 XHTML 1.1 的规范， 如果把 ELSE 语句去掉，则正确。

1
2
3
4

加载 CSS2
<!--[if lt IE 9]>
加载 CSS1（可以把要重写的写在这里）.
<![endif]-->
]]>前端面试题 - HTML+CSShttps://lruihao.cn/posts/ms-html-css/Sat, 30 Mar 2019 22:58:39 +0000Lruihaohttps://lruihao.cn/posts/ms-html-css/

原文链接
“卓越班”到了大三突然掀起一股毕业慌，一部分人投身于考研的热潮中，一部分人选择了培训机构学习技术。而我出于种种原因既不考研也不培训，选择自学 java 和 web 相关的知识，也希望因此能在以后谋得一份心仪的工作。

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

HTML

1. Doctype 作用，HTML5 为什么只需要写

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 html 标签之前

HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML5 中只有一种

SGML: 标准通用标记语言，是现时常用的超文本格式的最高层次标准

2. 行内元素有哪些，块级元素有哪些，空 (void) 元素有那些

行内元素：a span i img input select b 等

块级元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

3. 简述一下你对 HTML 语义化的理解

简单来说，就是合适的标签做合适的事情，这样具有以下好处：

  • 有助于构架良好的 HTML 结构，有利于搜索引擎的建立索引、抓取，利于 SEO
  • 有利于不同设备的解析
  • 有利于构建清晰的机构，有利于团队的开发、维护

4. 常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

Trident 内核：IE

Gecko 内核：NETSCAPE6 及以上版本，火狐

Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]

Webkit 内核：Safari，Chrome 等。[Chrome 的：Blink（WebKit 的分支）]

浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

5. html5 有哪些新特性

  • 语义化标签：header footer nav section article aside 等
  • 增强型表单：date（从一个日期选择器选择一个日期） email（包含 e-mail 地址的输入域） number（数值的输入域） range（一定范围内数字值的输入域） search（用于搜索域） tel（定义输入电话号码字段） 等
  • 视频和音频：audio video
  • Canvas 绘图 SVG 绘图
  • 地理定位：Geolocation
  • 拖放 API：drag
  • web worker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
  • web storage: localStorage sessionStorage
  • WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

6. 描述一下 cookie，sessionStorage 和 localStorage 的区别

特性 Cookie localStorage sessionStorage
生命周期 可设置失效时间，没有设置的话，默认是关闭浏览器后失效 除非被手动清除，否则将会永久保存 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
存放数据大小 4KB 左右 可以保存 5MB 的信息 可以保存 5MB 的信息
http 请求 每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信

7. 如何实现浏览器内多个标签页之间的通信

  • 使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
  • websocket 协议
  • webworker

多个标签页之间的通信

8. HTML5 的离线存储怎么使用，解释一下工作原理

HTML5 的离线存储

9. src 与 href 的区别

区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系

<link href="style.css" rel="stylesheet" />浏览器加载到这里的时候，html 的渲染和解析不会暂停，css 文件的加载是同时进行的

<script src="script.js"></script>当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个 js 文件

10. 表单提交中 Get 和 Post 方式的区别

  • Get 一般用于从服务器上获取数据，Post 向服务器传送数据
  • Get 传输的数据是拼接在 Url 之后的，对用户是可见的；Post 的传输数据对用户是不可见的
  • Get 传送的数据量较小，不能大于 2KB。Post 传送的数据量较大，一般被默认为不受限制
  • Get 安全性非常低，Post 安全性较高
  • 在 FORM 提交的时候，如果不指定 Method，则默认为 Get 请求

CSS

1. css 盒子模型，box-sizing 属性的理解

css 的盒模型由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。但盒子的大小由 content+padding+border 这几部分决定

box-sizing 是一个 CSS3 属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing 有三个属性：

1

box-sizing: content-box|border-box|inherit:
  • content-box 使得元素的宽高即为内容区的宽高（默认模式）
  • border-box: 计算方式 content + padding + border = 本身元素大小，即缩小了 content 大小
  • inherit 指定 box-sizing 属性的值，应该从父元素继承

2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

清除浮动的方式：

  • 为父元素设置高度
  • 为父元素添加overflow:hidden
  • 伪元素
1
2
3
4
5

.fix::after {
  content: '';
  display: block;
  clear: both;
}

使用伪元素的好处：不增加冗余的 DOM 节点，符合语义化

overflow:hidden 可以触发 BFC 机制。BFC：块级格式化上下文，创建了 BFC 的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算 BFC 的高度时，浮动元素也参与计算

3. 如何让一个不定宽高的盒子水平垂直居中

定位的方式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

css3 属性

1
2
3
4
5
6
7
8
9

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 布局

1
2
3
4
5

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. px 和 em 和 rem 的区别

px: 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em的值并不是固定的，会继承父级元素的字体大小，代表倍数

rem的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数

5. position 的值有哪些

static： 默认值。没有定位，元素出现在正常的流中

relative（相对定位）：生成相对定位的元素，相对于其正常（原先本身）位置进行定位

absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

6. display:none 与 visibility：hidden 的区别

区别 display:none visibility：hidden 的
是否占据空间 不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中） 该元素空间依旧存在
是否渲染 会触发 reflow（回流），进行渲染 只会触发 repaint（重绘），因为没有发现位置变化，不进行渲染
是否是继承属性 不是继承属性，元素及其子元素都会消失 是继承属性，若子元素使用了 visibility:visible，则不继承，这个子孙元素又会显现出

link 属于 XHTML 标签，@import 完全是 CSS 提供的一种方式，只能加载 CSS

加载顺序的差别，当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载

兼容性的差别。由于@import 是 CSS2.1 提出的所以老的浏览器不支持，而 link 标签无此问题

当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的

8. 什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

9. 为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异

初始化样式会对 SEO 有一定的影响

10. CSS3 有哪些新特性

  • 实现圆角border-radius，阴影box-shadow，边框图片border-image
  • 对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
  • 实现旋转transform:rotate(90deg), 缩放scale(0.85,0.90),translate(0px,-30px)定位，倾斜skew(-9deg,0deg);
  • 增加了更多的 CSS 选择器、多背景、rgba()
  • 唯一引入的伪元素是::selection；
  • 实现媒体查询@media，多栏布局flex
  • 过渡transition 动画animation

11. ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用

单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成）, 双冒号是在当前规范中引入的，用于区分伪类和伪元素

12. CSS 优化、提高性能的方法有哪些

  • 移除空的 css 规则（Remove empty rules）
  • 正确使用 display 的属性
  • 不滥用浮动、web 字体
  • 不声明过多的 font-size
  • 不在选择符中使用 ID 标识符
  • 遵守盒模型规则
  • 尽量减少页面重排、重绘
  • 抽象提取公共样式，减少代码量

13. 重绘和回流

重绘和回流

14. flex 布局

flex 布局教程–阮一峰

15. css 预处理器

提供了一种 css 的书写方式，常见的就是 SAAS 文档 和 LESS 文档

]]>