前端开发基础知识整理--css篇

时间 2019-12-08

标签前端开发基础知识整理 css 栏目 CSS 繁體版

原文原文链接

awesome-frontend-interviews是一个用于整理、收集前端基础知识的开源项目，放在Github上，内容会一直更新，欢迎提交好的内容共同进步，欢迎star。css

CSS优先级如何计算？

同权重下，优先级就近原则（离被设置元素越近优先级别越高），载入样式以最后载入的为准：html

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

不一样权重下，优先级关系：前端

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照“就近原则”来判断

参考：CSS 样式优先级css3

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。解决方法：把样式表放到文档的headgit

考虑下面的代码,`<h1>`和`<p>`元素的`margin-bottom`的值分别应该是多少px？(假设`<h1>`和`<p>`是同级元素)

html {
  font-size: 100%;
}
h1 { 
  font-size: 2em;
  margin-bottom: 1em;
} 
p { 
  font-size: 1em;
  margin-bottom: 1em;
}

<h1>的margin-bottom是32px，<p>的margin-bottom是16pxgithub

这种现象的发生在于 1em等同于它当前的 font-size。由于 <h1>中的 font-size被设置为了 2em,其用在 <h1>内的em来计算的属性，就为 1em = 32px。(对于大多数的用户(和浏览器)， font-size的值为 100%，就会默认为 16px，除非用户经过浏览器设置来改变 font-size的默认值)

引伸部分：web

面试题中，通常em会跟rem、px、vh、vw等单位进行比较使用场景和区别，px、em和rem应该是被比较的比较多的，简单介绍一下：面试

px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，若是px要换算成物理长度，须要指定精度DPI
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，所以并非一个固定的值
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素

css清除浮动的几种方式

clear:both
overflow（hidden和auto能够清除浮动，visible不行）
clearfix

clearfix方法一：

利用:after和:before来在元素内部插入两个元素块,其实现原理相似于clear:both方法(只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug)

.clearfix:before,
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

clearfix方法二：

Nicolsa在《Better float containment in IE using CSS expressions》中介绍的方法

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
  overflow:hidden;
}
.clearfix {
  zoom:1; /* IE < 8 */
}

参考：Clear Float

BFC是什么?怎么触发？有什么用？

BFC 即 Block Formatting Contexts (块级格式化上下文)，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。

只要元素知足下面任一条件便可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 之外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)

BFC做用：

不和浮动元素重叠
清除元素内部浮动
解决上下相邻两个元素重叠

重绘和回流（重排）是什么，如何优化？

Reflow（回流）：当Render Tree中的一部分（或所有）由于元素的尺寸、布局、隐藏等改变而须要从新构建。这就称为回流
Repaint（重绘）：当Render Tree中的一些元素须要更新属性，而这些属性只是影响元素的外观、风格、而不会影响布局的，就是重绘

重绘（Repaint）不必定会引发回流（Reflow重排），但回流必将引发重绘（Repaint）

致使Reflow（回流）的状况：

页面首次加载
添加或者删除可见的DOM元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变——resize事件发生时；

减小回流、重绘其实就是须要减小对render tree的操做（合并屡次多DOM和样式的修改），并减小对一些style信息的请求，尽可能利用好浏览器的优化策略。具体方法有：

直接改变className，若是动态改变样式，则使用cssText（考虑没有优化的浏览器）
让要操做的元素进行”离线处理”，处理完后一块儿更新
不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，利用缓存
让元素脱离动画流，减小回流的Render Tree的规模

参考：页面重绘和回流以及优化

rgba()和opacity的透明效果有什么不一样？

rgba()和opacity都能实现透明效果，但最大的不一样是opacity做用于元素，以及元素内的全部内容的透明度，而rgba()只做用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60＊1000ms ＝ 16.7ms

怎么解决移动端Retina屏幕1px边框问题？

viewport + rem 实现
0.5px方案
border-image
background-image
多背景渐变实现
使用box-shadow模拟边框
伪类 + transform 实现

css hack原理及经常使用hack

因为不一样的浏览器和浏览器各版本对CSS的支持及解析结果不同，以及CSS优先级对浏览器展示效果的影响，咱们能够据此针对不一样的浏览器情景来应用不一样的CSS。

CSS Hack大体有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不一样版本之间的表现差别而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" "，IE7能识别星号" "，但不能识别下划线"_"，IE6~IE10都认识"9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对全部IE(注：IE10+已经再也不支持条件注释)： IE浏览器显示的内容，针对IE6及如下版本：。这类Hack不只对CSS生效，对写在判断语句里面的全部代码都会生效。

史上最全的CSS hack方式一览

css布局

通常布局相关的整理:

如何水平居中一个元素（区分单行、多行）
如何竖直居中一个元素（区分居中元素有高度和没有高度的状况）
左侧固定，右侧自适应
右侧固定，左侧自适应
两边固定，中间自适应
Flex布局
Grid布局

布局相关的文章：