整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我们开发系统的时候，可能会接到这样的需求：不要让用户复制页面上的文字或者图片，不要让用户调试我们的页面，更甚至也不要让用户进行打印操作等等。
听起来是不是让人很头大，这咋实现啊？这有必要吗？这能禁住么？
如果你没做过这些，或者没接到过这样的需求，那你也应该看到过某个网站做了一些这样的措施。
既然要做，我们就得想方案，先来看看禁止复制都有哪些方法。
假设我们有这样一段代码：
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre>
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
</pre>接下来就通过这个例子来论述我们的方案：
x效果
这是一个css属性，标识了元素及其子元素的文本不可被选中，因此设定之后，文本将不能够被选中，因此也就不能复制：
<pre style="user-select: none;">
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
</pre>我们在这段文本上，加上这个样式。
效果
可以看到，文字压根就不能选择，从鼠标形状也能看出来。
由于用在进行复制操作的时候，会触发copy事件，我们可以通过监听它来做一些处理，使得复制的行为发生改变：
<div>
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre id="content">
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
</pre>
</div>
<script>
let c=document.getElementById('content')
c.removeEventListener("copy", copyFilter)
c.addEventListener("copy", copyFilter)
function copyFilter(e) {
let cp=e.clipboardData || window.clipboardData
if(!cp) {
return
}
let text=window.getSelection().toString()
if(text) {
e.preventDefault()
cp.setData("text/plain", "你复制了一段魔法")
}
}
</script>先获取到我们要禁止复制的元素，然后给它添加一个copy的事件监听，在添加监听之前，要先移除一下，这样是为了避免局部刷新的时候重复添加，然后我们通过copyFilter函数来对这次操作进行处理。
先获取剪贴板对象，如果当前事件对象里不存在，那就从window里面取，然后我们通过getSelection再拿到选取的内容，因为我们对剪贴板对象进行修改，所以要阻止默认行为，然后把剪贴板的内容重新赋值，可以是示例中那样的一段文字，也可以设置为空，甚至是任意其他内容，然后我们就可以看到产生的效果了：
效果
虽然能复制文本，但是由于我们拦截了复制操作，更改了它的行为，因此再粘贴的时候就变成了我们更改的样子，也做到了禁止复制的功能。
这种方式对于使用快捷键或者右键的方式都是有效的。
这种情况主要是在可编辑区域，比如文本框、文本域、设置为contenteditable的元素等，用户可以对文字进行剪切操作，虽然上面禁止了复制，但是剪切是另一个操作，不拦截的话还是相当于能复制出来。
copy和cut只是触发的事件不同而已，但是它们都是执行相同的逻辑处理：
<div>
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre id="content" contenteditable>
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
</pre>
</div>
<script>
let c=document.getElementById('content')
c.removeEventListener("cut", copyFilter)
c.addEventListener("cut", copyFilter)
function copyFilter(e) {
let cp=e.clipboardData || window.clipboardData
if(!cp) {
return
}
let text=window.getSelection().toString()
if(text) {
e.preventDefault()
cp.setData("text/plain", "你复制了一段魔法")
}
}
</script>这里我为了方便，给元素添加了contenteditable属性，让它变成可编辑的，copyFilter函数没有变化，我们只是添加了一个剪切事件的监听，然后它们的处理函数都是copyFilter。看下效果：
效果
可以看到，首先我们对文字进行剪切，没有出现预期的效果，这时因为我们在代码里面对剪切进行了拦截，并阻止了它的默认行为，然后我们在粘贴的时候，文字也改变成我们设置的了。
虽然我们可以通过上面的几种方法禁止在页面上复制，但是用户也可能开启打印预览模式，在这种情况下，也是可以进行复制的，我们要想对打印页面进行一些控制，那么就要用到媒体查询，先看下打印的样子：
效果
虽然我们做了限制，但是在打印页面没有生效，现在我们针对这个场景更改一下代码：
@media print {
html {
display: none;
}
}通过添加上面这个样式规则，我们能够使页面在打印的时候，内容隐藏起来，这样就无法进行复制了：
效果
能够看到，点击打印的时候，预览页面一片空白，，这样就禁止了在打印页面进行复制的操作。当然了，你其实也可以设置其他的样式属性来做些控制，但要记住写在打印的媒体查询里面，只有这样才会在打印页面生效。
还有一种方式就是，通过设定一个伪元素，让它全面覆盖文本内容，这样鼠标就不能选到实际的文本，改造一下代码：
.content {
position: relative;
}
.content::before {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
<pre id="content" class="content">
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
</pre>现在就不能在元素上面选中文字了，不过用户也可能还有一些操作，比如在内容区域外面ctrl+a全选，或者在外面拖动鼠标来全选，如果是这种情形，那么我们可以通过监听键盘和鼠标事件来禁止全选等操作。
由于用户有很多种操作的方式，键盘全选、鼠标全选、键盘右键、鼠标右键等等，我们如果穷举的话，情况太多了，因此我们只监听鼠标按下和抬起事件，以及键盘的按下事件：
document.removeEventListener("mousedown", haveSelect)
document.addEventListener("mousedown", haveSelect)
document.removeEventListener("mouseup", haveSelect)
document.addEventListener("mouseup", haveSelect)
document.removeEventListener("keydown", haveSelect)
document.addEventListener("keydown", haveSelect)
function haveSelect() {
window.getSelection().removeAllRanges()
}主要就是在removeAllRanges方法上面，能够在触发上面事件的时候，将所选区域清空，也就是不管你选没选，咋选的，反正就是你只要进行了操作，那我就那可能选择的区域给你清空，这样你就啥也干不了了。
效果
好，这样就可以啦，无论怎么选，即使出现了选区，但是只要你再按了鼠标或者键盘，那么选区就会直接消失，就能达到不能复制的效果，因为你发现啥都做不了。
这里额外说明一下，对于事件的监听，一定要用addEventListener来实现，因为它会将多个绑定的事件都添加上去，当触发的时候就会按照绑定的顺序进行执行，如果是用赋值的方式，那么后面的会覆盖前面的，而且赋值的方式很容易被篡改，可以很轻松的让你的绑定函数不能执行从而失效，而使用addEventListener就不会被人为覆盖，只能通过绑定的函数句柄来手动移除，也就是说要移除的时候，必须使用跟绑定时使用同一个函数才行。
通过CSS的方式禁止复制，可以很容易的被用户解除，只能是设置的稍微复杂一点，增加难度。而通过JS的方式禁止复制，也可以通过禁用页面JavaScript代码来解除，因此我们可以将内容通过js来渲染，这样如果页面禁用了js，那么内容也不会渲染。
对于禁止调试，主要是指用户打开控制台，控制台也就是开发者工具，我为了方便称之为控制台，想要对页面进行调试时，我们做一些处理，阻止这种行为，最大可能的拦截通过控制台对系统的调试。
主要的方法有几种，由于打开控制台是浏览器提供的调试功能，因此我们没法拦截打开操作，即使通过事件监听不允许快捷键这样做，但是也可以通过其他方式进行打开，因此我们的主要关注点就在于打开控制台之后，我们能做哪些事情来限制用户行为。
打开控制台的快捷键主要有F12和ctrl+shift+i，我们先把这俩给禁用了：
document.removeEventListener("keydown", disableDevShortcut)
document.addEventListener("keydown", disableDevShortcut)
function disableDevShortcut(e) {
console.log(e)
if(e.keyCode===123) {
e.preventDefault()
}else if(e.keyCode===73 && e.ctrlKey && e.shiftKey) {
e.preventDefault()
}
}这样在使用这两个快捷键的时候，页面没有任何反应，控制台也不会唤起，因为我们阻止了它们的默认行为。
除了通过快捷键，还可以使用右键的方式，并点击检查也会调出控制台。
效果
这种情景，我们可以通过禁止在页面上使用右键的方式，来阻止打开控制台：
document.removeEventListener("contextmenu", cancelContextmenu)
document.addEventListener("contextmenu", cancelContextmenu)
function cancelContextmenu(e) {
e.preventDefault()
}现在就不能通过右键打开控制台了，但是相应的整个右键功能也都不能使用了。
如果用户最终打开了控制台，比如通过在浏览器的更多功能中来打开的话，那么我就需要采取其他的措施，其中之一就是给代码设置无限断点，因为断点只在控制台打开的时候才会发生作用，从而不必担心非调试模式下的程序正常运行。
无限断点的主要思路就是利用定时器等手段，频繁的触发断点效果，使得不能轻松的调试程序，先看下代码：
;(()=> {
function breakDebugger() {
if(new checkDebugger().check) {
breakDebugger()
}
}
function checkDebugger() {
const now=new Date();
eval('(function () {debugger;false;})()')
const dur=Date.now() - now
if(dur < 5) {
return {check: false}
}else {
return {check: true}
}
}
setInterval(()=> {
eval('(function () {debugger;true;})()')
breakDebugger()
}, 500)
})()我们利用一个立即执行的自执行函数，来使我们的代码被封装在一个固定块内，不与其他部分有任何影响。
这里主要做了两步：
第一步设置一个重复执行的定时器，其中包括了一个断点和一个函数调用。
第二步通过函数来递归调用断点，主要使用了实例化对象的方式和时间差的判断。
这样做的主要作用就是在设置无限断点的同时，也能够让每次的断点都是被重新生成的，看下效果，一目了然：
效果
发现没有，我们通过这种方式，只要打开了控制台，那么就会进入到无限断点的循环中，使得不能做任何其他事情，而且每个断点的生成都会开辟一个新的虚拟运行环境，这种情况下，只有关闭控制台，才能结束断点。
即使使用右键选择Never parse here，也毫无作用，虽然可以通过Deactive breakpoints按钮来彻底禁用断点，就是下面这个按钮：
按钮
但是，如果这样做的话，那么用户也就同时失去了调试其他代码的能力。
况且，我们接下来还会介绍其他的控制手段，可以配合着使用。
我们如果能有一种手段，可以知道用户开启了控制台，换句话说只要控制台被打开，就通知我们或者被我们监测到，那么我们就可以执行一些控制手段，这种效果肯定是很理想的，遗憾的是还没有这种api暴露给我们去让我们能够这样做。
不过我们可以通过其他的方式，利用既有的一些能力来实现这一点，这里我还是使用循环定时器，来不断的去嗅探用户是否开启了控制台，直接看代码：
;(()=> {
setInterval(function() {
let foo=document.createElement('a')
let a1=+new Date()
console.table(foo)
let a2=+new Date()
if(a2 - a1 > 1) {
location.href='about:blank'
}
console.clear()
}, 500)
})()同样，通过一个自执行函数，我们开启了一个循环定时器，然后在回调方法里面，我们就去实现上面的目标，也是分为了两步：
第一步创建一个a元素，然后通过表格的形式将它打印出来，并记录下消耗的时间。
第二步判断耗时的长短来控制是否跳转到空白页，然后清空控制台。
这种方式主要是利用了console.table的特性，它会将元素以表格的形式输出到控制台，大概就像下面的样子：
效果
由于太多了，我就没有全部截下来，如果没有打开控制台的话，使用console.table输出我们创建的a标签是很快的，有多快呢，就是js执行一条语句的速度，所以打印a1和a2的时间间隔非常短，几乎为0，因为他们快到差不多是同时执行的，给大家打印看一下：
效果
我们先不打开控制台，等输出完毕再打开，很清楚的发现，我们没打开控制台的时候，输出的a就是它标签，而且时间间隔是0毫秒。
现在我们打开控制台的时候刷新一下页面，看看控制台的输出：
效果
这次就变成了以table的形式输出a元素，而且它的耗时明显增多，不再是0毫秒，而是耗费了10毫秒，虽然打开控制台的时候多次刷新页面，每次输出的毫秒数是不同的，但是跟关闭控制台的时候输出的耗时差距非常明显，因此我们就可以在这个上面做文章。
我在上面的代码中假定了，只要是大于1毫秒的耗时，那就表示用户打开了控制台，然后我们就把页面给跳转到空白页，当然了你也可以做一些任何你想做的操作，比如弹出一个提示，或者把body内容置空等等等等。
回到我们上面的代码，看一下它实际发生的作用和带给我们的效果：
效果
哈哈，古德古德，平时浏览一切正常，只要刚一打开控制台，瞬间页面就被跳转走了，什么都干不了。这样我们就通过这种方式，达到了限制打开控制台的目的，也就是在当前页没法调试，一打开就跳转。
这种办法由于是绕路实现的，那么你可能会有疑问，它稳定吗？会不会误判，我可以对它绝对放心吗？
理论上来说，通过输出的执行时间是不太能精确掌握的，但是我们可以再做一些其他的措施来逼近真相：
;(()=> {
setInterval(function() {
let foo=document.createElement('a')
let a1=+new Date()
console.table(foo)
let a2=+new Date()
if(a2 - a1 > 1) {
let time=0
for(let i=0; i < 10; i++) {
let a1=+new Date()
console.table(foo)
let a2=+new Date()
time +=a2 - a1
}
if(time > 20) {
location.href='about:blank'
}
}
console.clear()
}, 500)
})()我又改造了一下判断的逻辑，当发现输出耗时为2毫秒甚至更多的时候，我立马再进行一次真伪判断，也就是说，万一由于其他的影响，导致我第7行的代码误判了，那么我再同步执行一个循环，连续输出10次，把他们的耗时总和计算出来，然后判断是否大于20毫秒，如果还是耗时过高的话，那么就可以非常肯定的知道用户是打开了控制台，这个时候就可以放心的做一些处理了。
其实限制用户行为的方法有很多很多，上面列出了一些主要的，多种方法还是要结合着使用。你也可以自由发挥，多使用一些其他的手段，也会增加用户复制或者调试的难度，比如防止用户重写console的方法，或者清除所有定时器等。
甚至也可以将你的内容绘制到canvas上面来防止复制，多加一些js的处理工作，防止禁用js的时候，我们的代码不生效，只有在js可用的时候再去渲染内容等。也可以在综合考虑的情况下加上代码混淆、代码加密等措施。
话说回来，大家都是同路人，何必相互为难，哈哈哈，不过提这个需求的人也着实会为难我们，既然提了那就尽力去做，能做到什么程度，只能说是尽量做到极致。
希望上面的内容能够帮助到你，也希望能够对你有所启发。
谢谢
篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。
这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。
小tip：后续内容更精彩哦。
CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。
css复制代码color: red;
而如果将一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。
css复制代码{
color: red;
text-align: center;
}
声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集（CSS ruleset），常简称为 CSS 规则。
css复制代码span {
color: red;
text-align: center;
}
规则集中最后一条声明可以省略分号，但是并不建议这么做，因为容易出错。
CSS 中的注释：
css复制代码/* 单行注释 */
/*
多行
注释
*/
在 CSS 文件中，除了注释、CSS 规则集以及 @规则 外，定义的一些别的东西都将被浏览器忽略。
CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。
而 @规则 就是这样的语句。CSS 里包含了以下 @规则：
除了以上这几个之外，下面还将对几个比较生涩的 @规则 进行介绍。
@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的 <style> 元素内使用。
注意：值必须是双引号包裹，且和
css复制代码@charset "UTF-8";
平时写样式文件都没写 @charset 规则，那这个 CSS 文件到底是用的什么字符编码的呢？
某个样式表文件到底用的是什么字符编码，浏览器有一套识别顺序（优先级由高到低）：
@import 用于告诉 CSS 引擎引入一个外部样式表。
link 和 @import 都能导入一个样式文件，它们有什么区别嘛？
@supports 用于查询特定的 CSS 是否生效，可以结合 not、and 和 or 操作符进行后续的操作。
css复制代码/* 如果支持自定义属性，则把 body 颜色设置为变量 varName 指定的颜色 */
@supports (--foo: green) {
body {
color: var(--varName);
}
}
层叠样式表，这里的层叠怎么理解呢？其实它是 CSS 中的核心特性之一，用于合并来自多个源的属性值的算法。比如说针对某个 HTML 标签，有许多的 CSS 声明都能作用到的时候，那最后谁应该起作用呢？层叠性说的大概就是这个。
针对不同源的样式，将按照如下的顺序进行层叠，越往下优先级越高：
理解层叠性的时候需要结合 CSS 选择器的优先级以及继承性来理解。比如针对同一个选择器，定义在后面的声明会覆盖前面的；作者定义的样式会比默认继承的样式优先级更高。
CSS 选择器无疑是其核心之一，对于基础选择器以及一些常用伪类必须掌握。下面列出了常用的选择器。 想要获取更多选择器的用法可以看 MDN CSS Selectors。
属性选择器
条件伪类
行为伪类
状态伪类
结构伪类
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。为了记忆，可以把权重分成如下几个等级，数值越大的权重越高：
可以看到内联样式（通过元素中 style 属性定义的样式）的优先级大于任何选择器；而给属性值加上 !important 又可以把优先级提至最高，就是因为它的优先级最高，所以需要谨慎使用它，以下有些使用注意事项：
在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。比如页面根元素 html 的文本颜色默认是黑色的，页面中的所有其他元素都将继承这个颜色，当申明了如下样式后，H1 文本将变成橙色。
css复制代码body {
color: orange;
}
h1 {
color: inherit;
}
设想一下，如果 CSS 中不存在继承性，那么我们就需要为不同文本的标签都设置一下 color，这样一来的后果就是 CSS 的文件大小就会无限增大。
CSS 属性很多，但并不是所有的属性默认都是能继承父元素对应属性的，那哪些属性存在默认继承的行为呢？一定是那些不会影响到页面布局的属性，可以分为如下几类：
对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：
在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流。文档流就像水一样，能够自适应所在的容器，一般它有如下几个特性：
如何脱离文档流呢？
脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间。有两种方式可以让元素脱离文档流：浮动和定位。
在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
盒模型有 2 种：标准盒模型和 IE 盒模型，本别是由 W3C 和 IExplore 制定的标准。
如果给某个元素设置如下样式：
css复制代码.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #eee;
margin: 10px;
}
标准盒模型认为：盒子的实际尺寸=内容（设置的宽/高） + 内边距 + 边框
所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width=200 + 10 + 10 + 1 + 1=222。
IE 盒模型认为：盒子的实际尺寸=设置的宽/高=内容 + 内边距 + 边框
.box 元素所占用的实际宽度为 200px，而内容的真实宽度则是 width - padding-left - padding-right - border-left-width - border-right-width=200 - 10 - 10 - 1 - 1=178。
现在高版本的浏览器基本上默认都是使用标准盒模型，而像 IE6 这种老古董才是默认使用 IE 盒模型的。
在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：
视觉格式化模型（Visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。CSS 中一切皆盒子，而视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去，这个模型在计算的时候会依赖到很多的因素，比如：盒子尺寸、盒子类型、定位方案（是浮动还是定位）、兄弟元素或者子元素以及一些别的因素。
从上图中可以看到视觉格式化模型涉及到的内容很多，有兴趣深入研究的可以结合上图看这个 W3C 的文档 Visual formatting model。所以这里就简单介绍下盒子类型。
盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型（display type）：
对外显示方面，盒子类型可以分成 2 类：block-level box（块级盒子） 和 inline-level box（行内级盒子）。
依据上图可以列出都有哪些块级和行内级盒子：
所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列。
除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？
block
inline
inline-block
对内方面，其实就是把元素当成了容器，里面包裹着文本或者其他子元素。container box 的类型依据 display 的值不同，分为 4 种：
值得一提的是如果把 img 这种替换元素（replaced element）申明为 block 是不会产生 container box 的，因为替换元素比如 img 设计的初衷就仅仅是通过 src 把内容替换成图片，完全没考虑过会把它当成容器。
参考：
格式化上下文（Formatting Context）是 CSS2.1 规范中的一个概念，大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。
不同类型的盒子有不同格式化上下文，大概有这 4 类：
其中 BFC 和 IFC 在 CSS 中扮演着非常重要的角色，因为它们直接影响了网页布局，所以需要深入理解其原理。
块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。
BFC 渲染规则
如何创建 BFC？
BFC 应用场景
1、 自适应两栏布局
应用原理：BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。
html复制代码<div class="layout">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
css复制代码.aside {
float: left;
width: 100px;
}
.main {
<!-- 触发 BFC -->
overflow: auto;
}
2、清除内部浮动
浮动造成的问题就是父元素高度坍塌，所以清除浮动需要解决的问题就是让父元素的高度恢复正常。而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可。
css复制代码.parent {
overflow: hidden;
}
3、 防止垂直 margin 合并
BFC 渲染原理之一：同一个 BFC 下的垂直 margin 会发生合并。所以如果让 2 个元素不在同一个 BFC 中即可阻止垂直 margin 合并。那如何让 2 个相邻的兄弟元素不在同一个 BFC 中呢？可以给其中一个元素外面包裹一层，然后触发其包裹层的 BFC，这样一来 2 个元素就不会在同一个 BFC 中了。
html复制代码<div class="layout">
<div class="a">a</div>
<div class="contain-b">
<div class="b">b</div>
</div>
</div>
css复制代码.demo3 .a,
.demo3 .b {
border: 1px solid #999;
margin: 10px;
}
.contain-b {
overflow: hidden;
}
针对以上 3 个 示例 ，可以结合这个 BFC 应用示例 配合观看更佳。
参考：CSS 原理 - Formatting Context
IFC 的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。
IFC 渲染规则
针对如上的 IFC 渲染规则，你是不是可以分析下下面这段代码的 IFC 环境是怎么样的呢？
html复制代码<p>It can get <strong>very complicated</storng> once you start looking into it.</p>
对应上面这样一串 HTML 分析如下：
参考：Inline formatting contexts
IFC 应用场景
偷个懒，demo 和图我就不做了。
在电脑显示屏幕上的显示的页面其实是一个三维的空间，水平方向是 X 轴，竖直方向是 Y 轴，而屏幕到眼睛的方向可以看成是 Z 轴。众 HTML 元素依据自己定义的属性的优先级在 Z 轴上按照一定的顺序排开，而这其实就是层叠上下文所要描述的东西。
我们对层叠上下文的第一印象可能要来源于 z-index，认为它的值越大，距离屏幕观察者就越近，那么层叠等级就越高，事实确实是这样的，但层叠上下文的内容远非仅仅如此：
在看层叠等级和层叠顺序之前，我们先来看下如何产生一个层叠上下文，特定的 HTML 元素或者 CSS 属性产生层叠上下文，MDN 中给出了这么一个列表，符合以下任一条件的元素都会产生层叠上下文：
层叠等级
层叠等级指节点在三维空间 Z 轴上的上下顺序。它分两种情况：
普通节点的层叠等级优先由其所在的层叠上下文决定，层叠等级的比较只有在当前层叠上下文中才有意义，脱离当前层叠上下文的比较就变得无意义了。
层叠顺序
在同一个层叠上下文中如果有多个元素，那么他们之间的层叠顺序是怎么样的呢？
以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）：
如何比较两个元素的层叠等级？
参考：彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
CSS 的声明是由属性和值组成的，而值的类型有许多种：
而还有些值是需要带单位的，比如 width: 100px，这里的 px 就是表示长度的单位，长度单位除了 px 外，比较常用的还有 em、rem、vw/vh 等。那他们有什么区别呢？又应该在什么时候使用它们呢？
屏幕分辨率是指在屏幕的横纵方向上的像素点数量，比如分辨率 1920×1080 意味着水平方向含有 1920 个像素数，垂直方向含有 1080 个像素数。
而 px 表示的是 CSS 中的像素，在 CSS 中它是绝对的长度单位，也是最基础的单位，其他长度单位会自动被浏览器换算成 px。但是对于设备而言，它其实又是相对的长度单位，比如宽高都为 2px，在正常的屏幕下，其实就是 4 个像素点，而在设备像素比(devicePixelRatio) 为 2 的 Retina 屏幕下，它就有 16 个像素点。所以屏幕尺寸一致的情况下，屏幕分辨率越高，显示效果就越细腻。
讲到这里，还有一些相关的概念需要理清下：
设备像素（Device pixels）
设备屏幕的物理像素，表示的是屏幕的横纵有多少像素点；和屏幕分辨率是差不多的意思。
设备像素比（DPR）
设备像素比表示 1 个 CSS 像素等于几个物理像素。
计算公式：DPR=物理像素数 / 逻辑像素数；
在浏览器中可以通过 window.devicePixelRatio 来获取当前屏幕的 DPR。
像素密度（DPI/PPI）
像素密度也叫显示密度或者屏幕密度，缩写为 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。从技术角度说，PPI 只存在于计算机显示领域，而 DPI 只出现于打印或印刷领域。
计算公式：像素密度=屏幕对角线的像素尺寸 / 物理尺寸
比如，对于分辨率为 750 * 1334 的 iPhone 6 来说，它的像素密度为：
js复制代码Math.sqrt(750 * 750 + 1334 * 1334) / 4.7=326ppi
设备独立像素（DIP）
DIP 是特别针对 Android设备而衍生出来的，原因是安卓屏幕的尺寸繁多，因此为了显示能尽量和设备无关，而提出的这个概念。它是基于屏幕密度而计算的，认为当屏幕密度是 160 的时候，px=DIP。
计算公式：dip=px * 160 / dpi
em 是 CSS 中的相对长度单位中的一个。居然是相对的，那它到底是相对的谁呢？它有 2 层意思：
我们都知道每个浏览器都会给 HTML 根元素 html 设置一个默认的 font-size，而这个值通常是 16px。这也就是为什么 1em=16px 的原因所在了。
em 在计算的时候是会层层计算的，比如：
html复制代码<div>
<p></p>
</div>
css复制代码div { font-size: 2em; }
p { font-size: 2em; }
对于如上一个结构的 HTML，由于根元素 html 的字体大小是 16px，所以 p 标签最终计算出来后的字体大小会是 16 * 2 * 2=64px
rem(root em) 和 em 一样，也是一个相对长度单位，不过 rem 相对的是 HTML 的根元素 html。
rem 由于是基于 html 的 font-size 来计算，所以通常用于自适应网站或者 H5 中。
比如在做 H5 的时候，前端通常会让 UI 给 750px 宽的设计图，而在开发的时候可以基于 iPhone X 的尺寸 375px * 812px 来写页面，这样一来的话，就可以用下面的 JS 依据当前页面的视口宽度自动计算出根元素 html 的基准 font-size 是多少。
js复制代码(function (doc, win) {
var docEl=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth=750, // 设计图宽度
recalc=function () {
var clientWidth=docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >=640 ) {
docEl.style.fontSize=200 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize=200 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 绑定事件的时候最好配合防抖函数
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context=this;
var args=arguments;
clearTimeout(timeout)
timeout=setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
比如当视口是 375px 的时候，经过计算 html 的 font-size 会是 100px，这样有什么好处呢？好处就是方便写样式，比如从设计图量出来的 header 高度是 50px 的，那我们写样式的时候就可以直接写：
css复制代码header {
height: 0.5rem;
}
每个从设计图量出来的尺寸只要除于 100 即可得到当前元素的 rem 值，都不用经过计算，非常方便。偷偷告诉你，如果你把上面那串计算 html 标签 font-size 的 JS 代码中的 200 替换成 2，那在计算 rem 的时候就不需要除于 100 了，从设计图量出多大 px，就直接写多少个 rem。
vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位：
在 JS 中 100vw=window.innerWidth，100vh=window.innerHeight。
vw/vh 的出现使得多了一种写自适应布局的方案，开发者不再局限于 rem 了。
相对视口的单位，除了 vw/vh 外，还有 vmin 和 vmax：
CSS 中用于表示颜色的值种类繁多，足够构成一个体系，所以这里就专门拿出一个小节来讲解它。
根据 CSS 颜色草案 中提到的颜色值类型，大概可以把它们分为这几类：
颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，比如 white（白），黑（black）等；
可接受的关键字列表在CSS的演变过程中发生了改变：
如下这张图是 16 个基础色，又叫 VGA 颜色。截止到目前为止 CSS 颜色关键字总共有 146 个，这里可以查看 完整的色彩关键字列表。
需要注意的是如果声明的时候的颜色关键字是错误的，浏览器会忽略它。
transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有 alpha 通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。
透明关键字有什么应用场景呢？
实现三角形
下面这个图是用 4 条边框填充的正方形，看懂了它你大概就知道该如何用 CSS 写三角形了。
css复制代码div {
border-top-color: #ffc107;
border-right-color: #00bcd4;
border-bottom-color: #e26b6b;
border-left-color: #cc7cda;
border-width: 50px;
border-style: solid;
}
用 transparent 实现三角形的原理：
看下示例：
增大点击区域
常常在移动端的时候点击的按钮的区域特别小，但是由于现实效果又不太好把它做大，所以常用的一个手段就是通过透明的边框来增大按钮的点击区域：
css复制代码.btn {
border: 5px solid transparent;
}
currentColor 会取当前元素继承父级元素的文本颜色值或声明的文本颜色值，即 computed 后的 color 值。
比如，对于如下 CSS，该元素的边框颜色会是 red：
css复制代码.btn {
color: red;
border: 1px solid currentColor;
}
RGB[A] 颜色是由 R(red)-G(green)-B(blue)-A(alpha) 组成的色彩空间。
在 CSS 中，它有两种表示形式：
十六进制符号
RGB 中的每种颜色的值范围是 00~ff，值越大表示颜色越深。所以一个颜色正常是 6 个十六进制字符加上 # 组成，比如红色就是 #ff0000。
如果 RGB 颜色需要加上不透明度，那就需要加上 alpha 通道的值，它的范围也是 00~ff，比如一个带不透明度为 67% 的红色可以这样写 #ff0000aa。
使用十六进制符号表示颜色的时候，都是用 2 个十六进制表示一个颜色，如果这 2 个字符相同，还可以缩减成只写 1 个，比如，红色 #f00；带 67% 不透明度的红色 #f00a。
函数符
当 RGB 用函数表示的时候，每个值的范围是 0~255 或者 0%~100%，所以红色是 rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)。
如果需要使用函数来表示带不透明度的颜色值，值的范围是 0~1 及其之间的小数或者 0%~100%，比如带 67% 不透明度的红色是 rgba(255, 0, 0, 0.67) 或者 rgba(100%, 0%, 0%, 67%)
需要注意的是 RGB 这 3 个颜色值需要保持一致的写法，要嘛用数字要嘛用百分比，而不透明度的值的可以不用和 RGB 保持一致写法。比如 rgb(100%, 0, 0) 这个写法是无效的；而 rgb(100%, 0%, 0%, 0.67) 是有效的。
在第 4 代 CSS 颜色标准中，新增了一种新的函数写法，即可以把 RGB 中值的分隔逗号改成空格，而把 RGB 和 alpha 中的逗号改成 /，比如带 67% 不透明度的红色可以这样写 rgba(255 0 0 / 0.67)。另外还把 rgba 的写法合并到 rgb 函数中了，即 rgb 可以直接写带不透明度的颜色。
HSL[A] 颜色是由色相(hue)-饱和度(saturation)-亮度(lightness)-不透明度组成的颜色体系。
写法上可以参考 RGB 的写法，只是参数的值不一样。
给一个按钮设置不透明度为 67% 的红色的 color 的写法，以下全部写法效果一致：
css复制代码button {
color: #ff0000aa;
color: #f00a;
color: rgba(255, 0, 0, 0.67);
color: rgb(100% 0% 0% / 67%);
color: hsla(0, 100%, 50%, 67%);
color: hsl(0deg 100% 50% / 67%);
}
小提示：在 Chrome DevTools 中可以按住 shift + 鼠标左键可以切换颜色的表示方式。
媒体查询是指针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式。
你可以通过给 <link> 加上 media 属性来指定该样式文件只能对什么设备生效，不指定的话默认是 all，即对所有设备都生效：
html复制代码<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
都支持哪些设备类型？
需要注意的是：通过 media 指定的 资源尽管不匹配它的设备类型，但是浏览器依然会加载它。
除了通过 <link> 让指定设备生效外，还可以通过 @media 让 CSS 规则在特定的条件下才能生效。响应式页面就是使用了 @media 才让一个页面能够同时适配 PC、Pad 和手机端。
css复制代码@media (min-width: 1000px) {}
媒体查询支持逻辑操作符：
媒体查询还支持众多的媒体特性，使得它可以写出很复杂的查询条件：
css复制代码/* 用户设备的最小高度为680px或为纵向模式的屏幕设备 */
@media (min-height: 680px), screen and (orientation: portrait) {}
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。
自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。
自定义属性必须通过 --x 的格式申明，比如：--theme-color: red; 使用自定义属性的时候，需要用 var 函数。比如：
css复制代码<!-- 定义自定义属性 -->
:root {
--theme-color: red;
}
<!-- 使用变量 -->
h1 {
color: var(--theme-color);
}
上图这个是使用 CSS 自定义属性配合 JS 实现的动态调整元素的 box-shadow，具体可以看这个 codepen demo。
Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。这里有篇文章列举了 7 中方案可以参考一下：7种方法解决移动端Retina屏幕1px边框问题
而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案：
只设置单条底部边框：
css复制代码.scale-1px-bottom {
position: relative;
border:none;
}
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
同时设置 4 条边框：
css复制代码.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
什么是浮动：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
为什么要清楚浮动，它造成了什么问题？
因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题。
父元素高度一旦坍塌将对后面的元素布局造成影响，为了解决这个问题，所以需要清除浮动，让父元素恢复高度，那该如何做呢？
这里介绍两种方法：通过 BFC 来清除、通过 clear 来清除。
前面介绍 BFC 的时候提到过，计算 BFC 高度的时候浮动子元素的高度也将计算在内，利用这条规则就可以清楚浮动。
假设一个父元素 parent 内部只有 2 个子元素 child，且它们都是左浮动的，这个时候 parent 如果没有设置高度的话，因为浮动造成了高度坍塌，所以 parent 的高度会是 0，此时只要给 parent 创造一个 BFC，那它的高度就能恢复了。
而产生 BFC 的方式很多，我们可以给父元素设置overflow: auto 来简单的实现 BFC 清除浮动，但是为了兼容 IE 最好用 overflow: hidden。
css复制代码.parent {
overflow: hidden;
}
通过 overflow: hidden 来清除浮动并不完美，当元素有阴影或存在下拉菜单的时候会被截断，所以该方法使用比较局限。
我先把结论贴出来：
css复制代码.clearfix {
zoom: 1;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
这种写法的核心原理就是通过 ::after 伪元素为在父元素的最后一个子元素后面生成一个内容为空的块级元素，然后通过 clear 将这个伪元素移动到所有它之前的浮动元素的后面，画个图来理解一下。
可以结合这个 codepen demo 一起理解上图的 clear 清楚浮动原理。
上面这个 demo 或者图里为了展示需要所以给伪元素的内容设置为了 ::after，实际使用的时候需要设置为空字符串，让它的高度为 0，从而父元素的高度都是由实际的子元素撑开。
该方式基本上是现在人人都在用的清除浮动的方案，非常通用。
参考：CSS中的浮动和清除浮动，梳理一下
针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认样式清除，让网页在不同的浏览器上能够保持一致。
针对清除浏览器默认样式这件事，在很早之前 CSS 大师 Eric A. Meyer 就干过。它就是写一堆通用的样式用来重置浏览器默认样式，这些样式通常会放到一个命名为 reset.css 文件中。比如大师的 reset.css 是这么写的：
css复制代码html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
他的这份 reset.css 据说是被使用最广泛的重设样式的方案了。
除了 reset.css 外，后来又出现了 Normalize.css 。关于 Normalize.css, 其作者 necolas 专门写了一篇文章介绍了它，并谈到了它和 reset.css 的区别。这个是他写那篇文章的翻译版：让我们谈一谈 Normalize.css。
文章介绍到：Normalize.css 只是一个很小的CSS文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案，现在已经有很多知名的框架和网站在使用它了。
Normalize.css 的具体样式可以看这里 Normalize.css
区别于 reset.css，Normalize.css 有如下特点：
默认：字符太长溢出了容器
字符超出部分换行
字符超出位置使用连字符
单行文本超出省略
多行文本超出省略
查看以上这些方案的示例： codepen demo
有意思的是刚好前两天看到 chokcoco 针对文本溢出也写了一篇文章，主要突出的是对整块的文本溢出处理。啥叫整块文本？比如，下面这种技术标签就是属于整块文本：
另外他还对 iOS/Safari 做了兼容处理，感兴趣的可以去阅读下：CSS 整块文本溢出省略特性探究。
让元素在父元素中呈现出水平垂直居中的形态，无非就 2 种情况：
以下列到的所有水平垂直居中方案这里写了个 codepen demo，配合示例阅读效果更佳。
水平居中
此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：
css复制代码.parent {
text-align: center;
}
垂直居中
方法一：通过设置上下内间距一致达到垂直居中的效果：
css复制代码.single-line {
padding-top: 10px;
padding-bottom: 10px;
}
方法二：通过设置 height 和 line-height 一致达到垂直居中：
css复制代码.single-line {
height: 100px;
line-height: 100px;
}
方法一：absolute + 负 margin
方法二：absolute + margin auto
方法三：absolute + calc
这里列了 6 种方法，参考了颜海镜 写的文章 ，其中的两种 line-height 和 writing-mode 方案看后让我惊呼：还有这种操作？学到了学到了。
方法一：absolute + transform
方法二：line-height + vertical-align
方法三：writing-mode
方法四：table-cell
方法五：flex
方法六：grid
针对以下这些方案写了几个示例： codepen demo
方法一：float + overflow（BFC 原理）
方法二：float + margin
方法三：flex
方法四：grid
针对以下这些方案写了几个示例： codepen demo
方法一：圣杯布局
方法二：双飞翼布局
方法三：float + overflow（BFC 原理）
方法四：flex
方法五：grid
结合示例阅读更佳：codepen demo
方法一：padding + 负margin
方法二：设置父级背景图片
列了 4 种方法，都是基于如下的 HTML 和 CSS 的，结合示例阅读效果更佳：codepen demo
html复制代码<div class="layout">
<header></header>
<main>
<div class="inner"></div>
</main>
<footer></footer>
</div>
css复制代码html,
body,
.layout {
height: 100%;
}
body {
margin: 0;
}
header,
footer {
height: 50px;
}
main {
overflow-y: auto;
}
方法一：calc
方法二：absolute
方法三：flex
方法四：grid
这是我断断续续写了 2 周完成的文章，算是自己对 CSS 的一个总结，虽然写得很长，但不足以覆盖所有 CSS 的知识，比如动画和一些 CSS3 的新特性就完全没涉及，因为这要写下来估计得有大几万字（其实就是懒 ）。
码字作图不易，如果喜欢或者对你有丝毫帮助的话，帮忙点个 哈，点赞就是我的动力。同时也希望自己能坚持认真的写下去，因为在总结提升自己的同时如果也能帮助更多的前端er，那将会让我感觉很开心。
作者：大海我来了
链接：https://juejin.cn/post/6941206439624966152
*请认真填写需求信息，我们会在24小时内与您取得联系。
