细节你知道多少（二）CSS基础补充

伪类：

条件伪类

:lang() ：根据元素语言匹配页面元素；
:dir() ： 与特定文本的书写方向相匹配的元素 ;
：有（） : 匹配包含指定元素的元素；
：是（） ：匹配指定选择器列表中的元素；
：不是（） ： 用于匹配不匹配一组选择器的元素 ;

行为伪类

：积极的 : 被鼠标激活的元素；
：徘徊 : 鼠标悬停的元素；
::选择 : 鼠标选中的元素

状态伪类

：目标 ：当前锚点的元素；
：关联 : 未访问的链接元素；
:访问过 : 被访问的链接元素；
：重点 : 输入焦点表单元素；
：必需的 ： 输入所需的表单元素 ;
：有效的 ： 输入有效的表单元素 ;
：无效的 : 输入非法表单元素；
：在范围内 : 输入范围内的表单元素；
：超出范围 : 输入范围之外的表单元素；
:检查 : 选项选择的表单元素；
：可选的 : option 可选表单元素；
:启用 ：启用事件的表单元素；
:禁用 ：被事件禁用的表单元素；
：只读 : 一个只读的表单元素；
:读写 ：可读可写的表单元素；
：空白的 : 输入为空的表单元素；
：当前的（） ： 正在浏览的元素 ;
：过去的（） : 浏览过的元素；
：未来（） : 未浏览的元素；

结构伪类

：根 ：文档的根元素；
：空的 ：没有子元素的元素；
:首字母 ： 元素的第一个字母 ;
：第一行 ： 元素的第一行 ;
:nth-child(n) ： 元素内指定序号索引处的元素 ;
:nth-last-child(n) : 元素中指定反向索引的元素；
：第一个孩子 : 元素中的第一个元素；
：最后一个孩子 : 元素中的尾部元素；
：唯一的孩子 ：父元素只有本元素的元素；
:nth-of-type(n) ： 指定标签中顺序索引的标签 ;
:nth-last-of-type(n) ：标签中指定反向索引的标签；
:first-of-type ：以标签为首的标签；
:last-of-type ：标签为尾部标签；
:only-of-type ：父元素只有这个标签的标签；

伪元素

：：前 ： 在元素前插入内容 ;
：：后 ： 在元素之后插入内容

格式化上下文

BFC (Block Formatting Context) 块级格式化上下文；
国际金融公司 （内联格式化上下文）内联格式化上下文；
FFC（Flex Formatting Context）灵活的格式化上下文；
GFC（网格格式化上下文）网格格式化上下文

注意：其中BFC和IFC在CSS中扮演着非常重要的角色，因为它们直接影响网页的布局，所以有必要深入了解它们的原理。

BFC 渲染规则

内盒将垂直放置，一个接一个；
box的垂直距离由margin决定，属于同一个BFC的两个相邻box的margin会重叠；
每个元素边距的左侧触及包含块边框的左侧（对于从左到右的格式，否则相反），即使存在浮动；
BFC的区域不会和float box重叠；
BFC是页面上一个孤立的独立容器，容器内的子元素不会影响到外面的元素。反之亦然。
在计算 BFC 的高度时，浮动元素也参与计算。

如何创建 BFC？

根元素：html
非溢出可见元素：溢出不可见
设置浮动：浮动属性不是无
设置定位：位置是绝对的或固定的
定义块级非块级元素： display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC应用场景

1、 响应式两列布局 ：BFC的区域不会和浮动区域重叠，所以可以固定侧边栏的宽度浮动到左边，对右边的内容触发BFC，使其宽度适应线的剩余宽度。

2、 清除内部浮动 浮动带来的问题是父元素的高度塌陷，所以清除浮动需要解决的问题是让父元素的高度恢复正常。使用 BFC 清除浮动的原理是：在计算 BFC 的高度时，浮动元素也参与计算。只需触发父元素的BFC。

防止垂直边距合并 BFC渲染的原理之一：同一个BFC下的垂直边距会被合并。因此，如果 2 个元素不在同一个 BFC 中，它会阻止垂直边距合并。那么如何使 2 个相邻的兄弟元素不在同一个 BFC 中呢？你可以在其中一个元素周围包裹一层，然后触发其包裹层的BFC，这样两个元素就不会在同一个BFC中了。

国际金融公司

成立IFC的条件很简单， 块级元素仅包含行内级元素 ，需要注意的是，当在 IFC 中插入块级元素时，会生成两个匿名块来分隔父元素，从而产生两个 IFC。

IFC 渲染规则内联元素默认为 IFC

子元素水平方向依次排列，垂直方向从容器顶部向下排列；
节点不能声明宽度和高度，其中margin和padding在水平方向有效，在垂直方向无效；
节点以不同的形式垂直对齐；
将一条直线上的框完全包围起来的矩形区域称为该直线的线框。行框的宽度由包含框和其中的浮点数决定；
IFC 中的线框通常粘在其包含块的左侧和右侧，但浮动元素优先。
IFC中的line box高度由line-height计算规则决定，同一个IFC下多个line box的高度可能不同；
当行内级别框的总宽度小于包含行框时，它们的水平渲染规则由 text-align 属性的值决定；
当一个行内框超过父元素的宽度时，它被拆分成多个框，分布在多个行框之间。如果子元素没有设置强制换行，行内框不会被拆分，会溢出父元素

国际金融公司应用场景

水平居中：当一个block要在环境中水平居中时，设置为inline-block会在外层生成IFC，text-align可以使其水平居中。
垂直居中：创建一个IFC，使用其中一个元素拉伸父元素的高度，然后设置它的vertical-align:middle，其他内联元素可以在这个父元素下垂直居中。

堆叠上下文

级联顺序

如果同一个堆叠上下文中有多个元素，它们之间的堆叠顺序是什么？

值和单位

像素

设备像素

设备屏幕的物理像素表示屏幕的水平和垂直方向有多少像素；它类似于屏幕分辨率。

设备像素比 (DPR)！！！

设备像素比是指 1 个 CSS 像素等于几个物理像素。

计算公式：DPR=物理像素数/逻辑像素数；

在浏览器中，可以通过window.devicePixelRatio获取当前屏幕的DPR。

像素密度 (DPI/PPI)

像素密度也称为显示密度或屏幕密度，缩写为DPI（Dots Per Inch）或PPI（Pixel Per Inch）。从技术上看，PPI只存在于电脑显示领域，而DPI只出现在印刷或印刷领域。

计算公式：像素密度=屏幕对角线像素尺寸/物理尺寸

例如，对于分辨率为 750*1334 的 iPhone 6，其像素密度为：

 数学.sqrt(750 * 750 + 1334 * 1334) / 4.7 = 326ppi  
 复制代码  
 复制代码

设备独立像素 (DIP)

DIP 是专门为 Android 设备派生的。原因是Android屏幕有很多尺寸。因此，为了尽可能地独立于设备进行显示，提出了这个概念。它是根据屏幕密度计算的，认为屏幕密度为160时，px = DIP。

计算公式：dip = px * 160 / dpi

远程计算

 （函数（文档，赢）{  
 var docEl = 文档。文档元素，  
 resizeEvt = 'orientationchange' 在窗口中？ 'orientationchange' : '调整大小',  
 psdWidth = 750, // 设计宽度  
 重新计算 = 函数 () {  
 var clientWidth = docEl。客户端宽度；  
 如果（！clientWidth）返回；  
 如果（客户端宽度> = 640）{  
 文档。风格。字体大小 = 200 * ( 640 / psdWidth ) + 'px';  
 } 别的 {  
 文档。风格。 fontSize = 200 * (clientWidth / psdWidth) + 'px';  
 }  
 };  
  
 如果（！doc。addEventListener）返回；  
 // 绑定事件时最好配合防抖功能  
 赢。 addEventListener(resizeEvt, debounce(recalc, 1000), false);  
 博士。 addEventListener('DOMContentLoaded', recalc, false);  
      
 功能去抖（功能，等待）{  
 变量超时；  
 返回函数（）{  
 变量上下文 = 这个；  
 var args = 参数；  
 清除超时（超时）  
 超时 = setTimeout（函数（）{  
 功能应用（上下文，参数）  
 }， 等待）;  
 }  
 }  
 })( 文档，窗口);  
 复制代码

颜色关键字

透明关键字

transparent 关键字代表一种完全透明的颜色，即颜色会显示为背景色。它在技术上是黑色的，至少有一个 alpha 通道，是 rgba(0,0,0,0) 的缩写。
轻松实现三角形

使用透明实现三角形的原理 ：

首先，宽高必须为0px，内容由边框的粗细填充；
边缘需要上色，不需要的边缘是透明的；
你想要什么样的三角形完全由四个边的彩色边和透明边的位置决定；
等腰三角形：设置一侧为彩色，则相邻的两条边透明，宽度为彩色边的一半；直角三角形：设置一侧为彩色，然后任何相邻的一侧是透明的。

增加点击区域

移动端点击的按钮面积往往很小，但由于真实效果不是很好，不容易变大，所以常用的方法是增加按钮的点击面积按钮通过透明边框：

 .btn {  
 边框：5px 纯透明；  
 }  
 复制代码

媒体查询

媒体查询是指通过针对不同设备、特定设备功能或参数进行定制来修改网站的样式。

你可以通过给 <link> 添加 media 属性来指定样式文件只能在哪个设备上生效。如果不指定，默认为all，即对所有设备生效：

 <link  rel= "stylesheet" src= "styles.css" media= "screen" />  
 <link  rel= "stylesheet" src= "styles.css" media= "print" />  
 复制代码  
 复制代码

支持哪些设备类型？

all：适用于所有设备；
打印：用于在打印预览模式下在屏幕上查看的分页材料和文档；
screen：主要用于屏幕；
Speech：主要用于语音合成器。

媒体查询支持逻辑运算符：

and：只有满足查询条件才生效；
not：查询条件是否定；
only：只有整个查询匹配时才生效。常用词组兼容旧浏览器，使用时必须指定媒体类型；
逗号或或：如果满足查询条件之一，则可以匹配；

/* 用户设备的最小高度为 680px 或竖屏模式的屏幕设备 */
@media（最小高度：680px），屏幕和（方向：纵向）{}
复制代码
复制代码

1px边框解决方案

Retina 显示屏的分辨率比普通屏幕要高，所以移动端 1px 的边框看起来会比较粗，而且为了美观通常需要将这条线拉细。这里有一篇文章列出了 7 个解决方案供参考：解决手机 Retina 屏幕 1px 边框问题的 7 种方法

这是通过伪类和转换实现的最后一个相对完美的解决方案：

只设置一个底部边框：

 .scale-1px-bottom {  
 位置：相对；  
 边框：无；  
 }  
 .scale-1px-bottom ::after {  
 内容： '';  
 位置：绝对；  
 左：0；  
 底部：0；  
 背景：#000；  
 宽度：100%；  
 高度：1px；  
 -webkit- 变换：scaleY（0.5）；  
 变换：scaleY（0.5）；  
 -webkit-transform-origin: 0 0;  
 变换原点：0 0；  
 }  
 复制代码

同时设置4个边框：

 .scale-1px {  
 位置：相对；  
 边距底部：20px；  
 边框：无；  
 }  
 .scale-1px ::之后{  
 内容： '';  
 位置：绝对；  
 顶部：0；  
 左：0；  
 边框：1px 实心#000；  
 -webkit- box-sizing：边框框；  
 box-sizing：边框框；  
 宽度：200%；  
 高度：200%；  
 -webkit- 变换：比例（0.5）；  
 变换：比例（0.5）；  
 -webkit-transform-origin：左上角；  
 变换原点：左上角；  
 }  
 复制代码

删除浏览器默认样式

重置.css

 html, body, div, span, applet, object, iframe,  
 h1，h2，h3，h4，h5，h6，p，blockquote，pre，  
 a，缩写，首字母缩写词，地址，大，引用，代码，  
 del，dfn，em，img，ins，kbd，q，s，samp，  
 小，罢工，强，子，sup，tt，var，  
 b, 你, 我, 中心,  
 dl, dt, dd, ol, ul, li,  
 字段集、表单、标签、图例、  
 表，标题，tbody，tfoot，thead，tr，th，td，  
 文章，放在一边，画布，细节，嵌入，  
 图, figcaption, 页脚, 页眉, hgroup,  
 菜单、导航、输出、红宝石、部分、摘要、  
 时间、标记、音频、视频{  
 边距：0；  
 填充：0；  
 边框：0；  
 字体大小：100%；  
 字体：继承；  
 垂直对齐：基线；  
 }  
 /* 旧浏览器的 HTML5 显示角色重置 */  
 文章, 除了, 细节, figcaption, 图,  
 页脚，页眉，hgroup，菜单，导航，部分{  
 显示：块；  
 }  
 身体 {  
 行高：1；  
 }  
 哦，你{  
 列表样式：无；  
 }  
 块引用，q {  
 报价：无；  
 }  
 块引用：之前，块引用：之后，  
 q：之前，q：之后{  
 内容： '';  
 内容：无；  
 }  
 桌子 {  
 边框折叠：折叠；  
 边框间距：0；  
 }  
 复制代码