CSS-day4

day4

[css] 说说浏览器解析CSS选择器的过程？ 

浏览器的渲染过程，如图：

 

下面这个栗子，CSS选择器它是如何工作的？

.mod-nav h3 span {font-size: 16px;}

如果不知道匹配规则，可能的理解是从左向右匹配:先找到.mod-nav，然后逐级匹配h3、span，在这个过程中如果遍历到叶子节点都没有匹配就需要回溯，继续寻找下一个分支。

但事实上，CSS选择器的读取顺序是从右向左。

还是上面的选择器，它的读取顺序变成：先找到所有的span，沿着span的父元素查找h3，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程（如果有多个最右节点为span的话）。

在某条CSS规则下（比如.mod-nav h3 span），会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。

 

[css] 说说CSS的优先级是如何计算的？

浏览器计算css优先级一共有三个阶段

优先级计算的顺序

1. CSS规则的重要性和来源
2. CSS规则的特殊性
3. CSS规则在文档中出现的顺序

1. 重要性和来源

我们先看来源

• user agent stylesheet 浏览器默认样式
• author stylesheet 开发人员定义的样式
• user stylesheet 用户在浏览器中定义的样式

优先级:

1. user agent stylesheet
2. user style sheets中的normal规则
3. author style sheets中的normal规则
4. author style sheets中的important规则
5. user style sheets中的important规则

如果还没有决出胜负,进入下一阶段..

2. 按照特殊性

在这一阶段
优先级计算优先级时会有4个标识符 a, b, c, d

• 当这个方法没有使用选择器而是直接写到内联style中时, a = 1
• 当使用id时, b += 1
• 当使用其他属性(class name) 和伪类时 c += 1
• 当使用元素名和伪元素时, d += 1

a 到 d 优先级依次降低, 栗子如下:

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

3. CSS规则在文档中出现的顺序

还不能决定设优先的话, 后出现的样式规则会具有更高的优先级

css优先级计算规则

[css] 你有用过CSS预处理器吗？喜欢用哪个？原理是什么？

什么是css预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件

分类(重点)

Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS

优点

提供CSS层缺失的样式层复用机制
减少冗余代码
提高样式代码的可维护性

实现原理

取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码

优缺点

优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
 

[css] 在页面中的应该使用奇数还是偶数的字体？为什么呢？

关于浏览器的支持的最小字体：

1.iphone6-plus、iphone5：     微信、QQ直接打开、safari中字体可以从最1px字体开始；

2.小米2s：微信、QQ浏览器最小显示字体8px；自带浏览器最小字体从1px开始；

3.小米4s：firefox可以从最小字体1px开始；chrome中最小显示字体为12px；

4. pc：     360安全浏览器7：最小最示12px；firefox与ie10最小显示字体为1px。

偶数居多的原因

相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如我使用14px的字体作为正文字号，那么其他部分的字体（如标题）就可以使用14×1.5 =21px的字体，或者在一些地方使用到了14×0.5=7px的padding或者margin，如果你是在用sass或者less编写css，这时候用处就凸显出来了。
使用奇数号字体不好的地方是，文本段落无法对齐。

 

[css] 说说你对z-index的理解

z-index基础

z-index属性制定了元素及其子元素的z顺序，而z顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index属性值的元素会覆盖较低的属性值元素。
当父元素被fixed定位的时候，负z-index会出现在border上面。

z-index支持的属性值：

• z-index: auto;：默认值。
• z-index:<integer>;：整数值：0,1,2......
• z-index:inherit;：继承

z-index基本特性：

• 支持负值。
• 支持css3 animation动画。
• 在CSS2.1时代，不考虑CSS3，z-index要起作用需要和定位元素配合使用，只有定位元素position: relative / absolute / fixed / sticky设置z-index才有作用，css3中有例外。

z-index与定位元素：

如果定位元素发生了覆盖，且没有嵌套（不是一个定位元素里面嵌套着另一个定位元素），谁在上面遵守以下原则：

1. 后面的覆盖前面的。
2. z-index的值越大越在上面。
    

z-index与层叠上下文（解释z-index的实际行为表现。）

1. 定位元素默认的z-index:auto可以看成是z-index:0。
2. z-inedx不为auto的定位元素会创建层叠上下文。
3. z-index层叠顺序的比较止步于父级层叠上下文。

z-index深入理解

[css] 怎样修改chrome记住密码后自动填充表单的黄色背景？

去掉chrome记住密码后自动填充表单的黄色背景

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了：

情景一：input文本框是纯色背景的

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}

情景二：input文本框是使用图片背景的

这个比较麻烦，目前还没找到完美的解决方法，有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：

$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});

遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete="off"。

[css] rgba()和opacity这两个的透明效果有什么区别呢？

1.两者都能实现透明效果

2.opacity作用于元素，以及元素内的所有内容元素

3.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果

 

1.opacity 是属性，rgba()是函数，计算之后是个属性值；

2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；

3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；