web知识点整理（二）CSS部分（持续更新中）

web知识点整理（二）CSS部分（持续更新中）

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点：
（1）有两种盒子模型：IE 盒模型（border-box）、W3C 标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE 盒模型和 W3C 标准盒模型的区别：
（1）W3C 标准盒模型：属性 width，height 只包含内容 content，不包含 border 和 padding
（2）IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content
+padding+border。
在 ie8+浏览器中使用哪个盒模型可以由 box-sizing（CSS 新增的属性）控制，默认值为 content-box，即标准盒模型； 如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。如果在 ie6，7，8 中 DOCTYPE 缺失会将盒子模型解释为 IE盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模型。
回答：
盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。
标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同。标准盒模型的 width 和 height 属性的范围只包含了 content，而 IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。
一般来说，我们可以通过修改元素的 box-sizing 属性来改变元素的盒模型。

CSS 选择符有哪些？

（1） id 选择器（#myid）
（2） 类选择器（.myclassname）
（3） 标签选择器（div,h1,p）
（4） 后代选择器（h1 p）
（5） 相邻后代选择器（子）选择器（ul>li）
（6） 兄弟选择器（li~a）
（7） 相邻兄弟选择器（li+a）
（8） 属性选择器（a[rel=”external”],[src $= “.png”]结尾匹配,[src ^= “img”]开头匹配，[src = “3”]通配）
（9） 伪类选择器（a:hover,li:nth-child）
（10） 伪元素选择器（::before、::after）
（11） 通配符选择器（）

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

相关知识点：
单冒号（:）用于 CSS3 伪类，双冒号（::）用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after 等，
而新的在 CSS3 中引入的伪元素则不允许再支持旧的单冒号的写法。想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after 生成的内容也比::before 生成的内容靠后。
如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上。
回答：
在 css3 中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如 hover、link 等，而伪元素一般匹配的特殊的位置，比如 after、before 等。

伪类与伪元素的区别

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover 来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be fore 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是 CSS3 的一部分，并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

CSS 中哪些属性可以继承？

每个 CSS 属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。
当元素的一个非继承属性（在 Mozillacode 里有时称之为 resetproperty）没有指定值时，则取属性的初始值 initialv alue（该值在该属性的概述里被指定）。
有继承性的属性：
（1） 字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
（2） 文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、 text-transform、direction、color
（3） 表格布局属性
caption-sideborder-collapseempty-cells
（4） 列表属性
list-style-type、list-style-image、list-style-position、list-style
（5） 光标属性
cursor
（6） 元素可见性
visibility
（7） 还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性
注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。
回答：每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。
一般具有继承性的属性有，字体相关的属性，font-size 和 font-weight 等。文本相关的属性， color 和 text-align 等。表格的一些布局属性、列表属性如 list-style 等。还有光标属性 cursor、元素可见性 visibility。
当一个属性不是继承属性的时候，我们也可以通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。

CSS 优先级算法如何计算？

相关知识点：
CSS 的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级，如下：
（1） 标签内选择符 x,0,0,0
（2） ID 选择符 0,x,0,0
（3） class 选择符/属性选择符/伪类选择符 0,0,x,0
（4） 元素和伪元素选择符 0,0,0,x
计算方法：
（1） 每个等级的初始值为 0
（2） 每个等级的叠加为选择器出现的次数相加
（3） 不可进位，比如 0,99,99,99
（4） 依次表示为：0,0,0,0
（5） 每个等级计数之间没关联
（6） 等级判断从左向右，如果某一位数值相同，则判断下一位数值
（7） 如果两个优先级相同，则最后出现的优先级高，!important 也适用
（8） 通配符选择器的特殊性值为：0,0,0,0
（9） 继承样式优先级最低，通配符样式优先级高于继承样式
（10） !important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为 1,0,0,0,0。
计算实例：
（1）#demo a{color:orange;}/特殊性值：0,1,0,1/ （2）div#demo a{color:red;}/特殊性值：0,1,0,2/
注意：
（1） 样式应用时，css 会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。
（2） 特殊性值越大的声明优先级越高。
（3） 相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
(4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑回答：判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，
那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。
一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，
第一个等级是行内样式，为 1000，第二个等级是 id 选择器，为 0100，第三个等级是类选择器、伪类选择器和属性选择器，为 0010，第四个等级是元素选择器和伪元素选择器，为 0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等
级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以 1 开头的特殊性值比所有以 0 开头的特殊性值要大。
比如说特殊性值为 1000 的的规则优先级就要比特殊性值为 0999 的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引入的顺序，后出现的规则的优先级最高。

a标签

a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；
当链接未访问过时：
（1） 当鼠标滑过 a 链接时，满足:link 和:hover 两种状态，要改变 a 标签的颜色，就必须将:hover 伪类在:link 伪类后面声明；
（2） 当鼠标点击激活 a 链接时，同时满足:link、:hover、:active 三种状态，要显示 a 标签激活时的样式（:active），
必须将:active 声明放到:link 和:hover 之后。因此得出 LVHA 这个顺序。
当链接访问过时，情况基本同上，只不过需要将:link 换成:visited。
这个顺序能不能变？可以，但也只有:link 和:visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

CSS3新增伪类有那些？

（1） elem:nth-child(n)选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 可以接受具体的数值，也可以接受函数。
（2） elem:nth-last-child(n)作用同上，不过是从后开始查找。
（3） elem:last-child 选中最后一个子元素。
（4） elem:only-child 如果 elem 是父元素下唯一的子元素，则选中之。
（5） elem:nth-of-type(n)选中父元素下第 n 个 elem 类型元素，n 可以接受具体的数值，也可以接受函数。
（6） elem:first-of-type 选中父元素下第一个 elem 类型元素。
（7） elem:last-of-type 选中父元素下最后一个 elem 类型元素。
（8） elem:only-of-type 如果父元素下的子元素只有一个 elem 类型元素，则选中该元素。
（9） elem:empty 选中不包含子元素和内容的 elem 类型元素。
（10） elem:target 选择当前活动的 elem 元素。
（11） :not(elem)选择非 elem 元素的每个元素。
（12） :enabled 控制表单控件的禁用状态。
（13） :disabled控制表单控件的禁用状态。
（14） :checked 单选框或复选框被选中。

如何居中 div？

-水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性 div {width: 200px; margin: 0 auto;}
-水平居中，利用 text-align:center 实现
.container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0;
}
.box { display: inline-block; width: 500px; height: 400px; background-color: pink;
}
-让绝对定位的 div 居中
div {
position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0;
bottom: 0; right: 0;
background-color: pink; /方便看效果/
}
-水平垂直居中一
/确定容器的宽高宽 500 高 300 的层设置层的外边距 div{/position:absolute;/绝对定位
/width:500px;height:300px;top:50%;left:50%;margin:-150px00-250px;/外边距为自身宽高的一半/background-color:pink;/方便看效果/
}
-水平垂直居中二
/未知容器的宽高，利用transform属性/div { position: absolute; /相对定位或绝对定位均可/
width: 500px; height: 300px; top: 50%; left: 50%;
transform: translate(-50%, -50%); background-color: pink; /方便看效果/
}
-水平垂直居中三
/利用 flex 布局实际使用时应考虑兼容性/
.container { display: flex;
align-items: center; /垂直居中/ justify-content: center; /水平居中/
}
.containerdiv { width: 100px; height: 100px; background-color: pink; /方便看效果/
}
-水平垂直居中四
/利用 text-align:center 和 vertical-align:middle 属性/
.container { position: fixed; top: 0; right: 0; bottom: 0;
left: 0; background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto;
}
.container::after { content: “”; display: inline-block; height: 100%; vertical-align: middle;
}
.box { display: inline-block; width: 500px; height: 400px; background-color: pink; white-space: normal; vertical-align: middle;
}
回答：一般常见的几种居中的方法有：对于宽高固定的元素
（1） 我们可以利用 margin:0auto 来实现元素的水平居中。
（2） 利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
（3） 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。
（4） 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。
（5） 使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

清除浮动

display 有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。

position的值relative和absolute定位原点是？

相关知识点：
absolute
生成绝对定位的元素，相对于值不为 static 的第一个父元素的 paddingbox 进行定位，也可以理解为离自己这一级元素最近的
一级 position 设置为 absolute 或者 relative 的父元素的 paddingbox 的左上角为原点的。
fixed（老 IE 不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right,z-index 声明）。
inherit
规定从父元素继承 position 属性的值。
回答：
relative 定位的元素，是相对于元素本身的正常位置来进行定位的。
absolute 定位的元素，是相对于它的第一个 position 值不为 static 的祖先元素的 paddingbox 来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个 position 的值不为 static 的祖先元素，然后相对于这个祖先元
素的 paddingbox 来定位，也就是说在计算定位距离的时候，padding 的值也要算进去。

盒子模型

我们日常可能会遇到不同的浏览器，元素的高宽不一致。除了可能是浏览器内置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型组成不同。
以下是两种不同盒子的分类：
W3C盒子模型：可通过box-sizing: content-box来设置，他包含content+padding+border+margin。
IE盒子模型：可通过box-sizing: border-box来设置，content+margin。其中content包含border，padding。

BFC

简单的个人理解，block formatting context，块级格式化上下文。产生了BFC的，形成了独立容器，他的特性就是不会再布局中影响到外边的元素。
他的特性：
1)BFC边距会重叠。
2)BFC的内外元素互相不影响
3)BFC不会与浮动元素发生重叠
4)BFC元素的高度计算会包括元素内的浮动元素的高度
触发的条件是：
1)body 根元素
2)浮动元素：float 除 none 以外的值
3)绝对定位元素：position (absolute、fixed)
4)display 为 inline-block、table-cells、flex，table-caption
5)overflow 除了 visible 以外的值 (hidden、auto、scroll)
此外，除了BFC，还有IFC、GFC、FFC的概念。我们简单了解一下。
GFC：可简单理解为grid布局
FFC：可简单理解为flex布局。
IFC:内联格式化上下文，简单理解为：inline-block。
水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。inline-block的元素的内部是一个BFC，但是它本身可以和其它inline元素一起形成IFC。

flex布局

flex，即弹性布局。一个由css3引入，为我们的盒子属性带来灵活性的一种布局方式。一旦父级采用了flex布局，里边的子控件将收flex布局限制，部分原本的样式（如float:left）也会失效。
基本api不做讲解，不熟悉可以看看：www.ruanyifeng.com/blog/2015/0…
特别注意：flex:0 0 30%的意义：等于flex-grow=0（默认不放大）+flex-shrink=0（不缩小）+flex-basis=30%（ 项目占据主轴的空间）
display:flex;开始flex布局
横向
justify-content:flex-start/flex-end/center/space-evenly/space-around/space-between;
默认/右对齐/居中对齐/项目之间间隔平分/项目加左右间距后平分/两端对齐
竖向
align-item:flex-end/center;靠下对齐/居中对齐
改变轴模式
flex-direction:column;
flex:1; flex:2;flex:1;调整块的宽度

grid布局

两列布局，三列布局

css3新特性

背景，支持RGBA透明度，一次多背景图
支持媒体查询
支持阴影，渐变，阴影
支持边框图片，border-image: url(border.png) 30 30 round
支持transform位移系列
支持过渡效果transition
支持自定义字体
引入flex/grid布局
引入多种选择器
其他不做详细说明，有兴趣搜一下css3新特性

图片格式

前端的图片分类格式,其实是性能优化的很大部分。选择好图片的类型，对前端的性能影响非常大。
而前端对图片的精髓，一方面是对图片大小的评估，一方面是对图片的类型选择。
他的大小可以这样判断：
比如一张200*200的图片大小，这时候，他的像素点有40000个。每个像素有 4 个通道， 所以一共有160000个字节,所以，我们评估该图片的大小大概为：160000/1024 约等于 156（KB）， 如果大很多，说明图片大小有优化控件。如果小很多，说明此时是模糊的。
图片类型 介绍 使用场景
png 适合颜色简单，但是对图片质量比较高。日常用的png8，此外还有png32, 适合logo体积太大一般不用
jpeg 不影响图片质量的情况有损压缩，banner图。适合大图。 压缩后大小可省略很多，一般大图使用
svg 对性能有损耗，体积小，压缩性抢。可在质量不下降的过程被放大 部分浏览器兼容性不太好
webp 只针对谷歌，兼容性不好。图片大小能压缩30~40%。 谷歌浏览器用，如有非常注重性能的产品，可判断浏览器加载不同类型图片
base64 压缩成字符流，实际大小是变大了，但是好处就是减少了http请求 一般也针对小图标

移动端适配

列举一下笔者所知道的适配方式：
1）媒体查询。该方案的话，个人觉得是最佳的方案，也是常用UI库非常喜欢的用处理方式之一。唯一不好的是：多套媒体方案，也意味多份的工作量。
2）vw/vh 利用单位vw/vh进行布局。该方案的话，对整体的布局还是相对稳定，但是对部分细节等处理还是不优化。且遇到手机屏幕差异较大的话，会出现严重的视差。
3）rem 相对稳定的方法。根据屏幕大小计算出font-size;但是只能求良好，很难求精。如果UI对一像素非常的敏感，这个方案可能是个非常糟糕的选择。
4）类似小程序rpx。相信原生小程序开发者都用过rpx。这里其实原理有点类似rem。但是，却不是按屏幕大小去计算，而是不同的屏幕定义了自己的标准。

响应式

常见兼容性

这个问题本次只列举了几个常见的，非全部列出。如需具体，可另查资料。
1）间距差异是否大，导致文本换行，或者间隔太大。原因：每个浏览器的margin和padding的默认值不同。解决方案：全局文件设置统一默认margin和padding。
2）图片默认有间距 原因：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用） 解决方案：使用float属性为img布局
3）较小的高度（小于10px），时，ie可能会超出高度 原因：IE有一个默认的行高的高度 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
为min-height本身就是一个不兼容的CSS属性
4）透明度兼容设置 原因：不同浏览器各自透明度关键字不统一。解决方案：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
5）IE的hover图片会闪烁 原因：IE6的每次触发 hover 的时候都会重新加载 解决方案：提前缓存文件。document.execCommand(“BackgroundImageCache”, false, true);

样式优化（**模糊）

初步聊聊个人的样式优化方案如下：
1.避免css层级太深。有兴趣了解一下css tree如何跟html tree融合成dom tree。2.首屏（特别是缓冲效果图）可适当使用内联元素。这样有利于更快的显示。3.异步加载CSS。非首次重要引入的css文件，不放在head里边。这样会引起阻塞。4.减少 回流 的属性。如display:none可以考虑使用visibility 5.适当使用GPU渲染。如tranfrom等。6.css动画的性能，是远远的大于js动画性能。7.利用工具压缩，去重。

选择器

• ~