你所不知道的css秘密（持续更新）

目录

壹、浏览器解析css选择器的顺序

贰、css的权重关系

叁、font-weight属性无效

肆、font-size属性设置的是字体的宽or高or对角

伍、多张图片间的空白来源

陆、清除浮动的更好方法

---

 

壹、浏览器解析css选择器的顺序

浏览器解析css选择器的顺序为从右往左。

举个栗子（setion div ul li a em）说明比较形象：

如果把你当作浏览器，dom树当作苹果树，em则是树上的苹果。

你事先不知道树的高度（dom树层次）、树上有多少颗苹果(满足条件的em)、也不知道苹果在哪个树杈上(em的位置)，那么你需要找遍树杈，才知道苹果在哪从而去摘苹果。是不是感觉挺麻烦的，效率也不高。

假如换一种方法，先找到苹果(em)，然后再去找em是在哪个树杈(em的祖先元素)，一直找到树干（选择器条件）为止，即可得到一条完整的路径，即先em，然后a em，然后li a em，然后ul li a em，直到setion div ul li a em。

可能说的没听懂，来张图：

如果浏览器从左往右解析，则需要先遍历所有dom节点，找到setion，然后再找到setion div，有【1】和【12、13】，然后找到setion div ul，剩下【1、5】，然后找到setion div ul li，有【1、5、6】和【1、5、7】，然后找到setion div ul li a，剩下【1、5、7、8】，然后找到setion div ul li a em，有【1、5、7、8、9、10】，至此找到。

很麻烦是吧。来看第二种方法吧。

如果浏览器从右往左解析，则需要先遍历所有dom节点，找到em，然后找到a em，有【9、10】和【14、15】，然后找到li a em，剩下【8、9、10】，然后找到ul li a em，有【7、8、9、10】，然后找到div ul li a em，有【5、7、8、9、10】，然后找到setion div ul li a em，有【1、5、7、8、9、10】，这就是最后的路径。

综合两种方法来看，第一步都是需要先遍历所有的dom节点，去遍历找到目标标签元素，从第二步开始逐层查找，但第二种方法相比第一种方法少走很多“岔路”，只要父节点不满足，就排除，第一种还需要去深层次的遍历看后代元素是否含有目标元素，因而第二种方法效率会比第一种方法高。

 

贰、css的权重关系

众所周知，css的权重关系如下：

!important  >  内联样式  >  id  >  class | 属性 | 伪类  >  标签 | 伪元素  >  * ，以数字表示，

即是：∞ > 1000 > 100 > 10 > 1 > 0，这里的100， 10代表的是256进制，而不是10进制。所以11个标签选择器并不等于一个类选择器，切记！

另，在数学上，1 + ∞ = ∞，但是在css中，∞ + 1 > ∞。

咱们举个栗子：

html:

<div id="div1">我是div1</div>

css:

div {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    line-height: 100px;
    text-align: center;
}

div#div1 {
    background-color: red !important;
}

#div1 {
    background-color: blue !important;
}

咱们来计算一下权重，背景色是红色的权重是1 + 100 + ∞，背景色是蓝色的权重是 100 + ∞，依结果来看，两者的权重大小明显是红色>蓝色。

叁、font-weight属性无效

在用法正确，字体包（宋体、楷体、微软雅黑这种）无误的情况下，如果出现设置font-weight: lighter或者font-weight: bolder属性无效的情况，那么很有可能是你网页使用的字体包里没有更细或者更粗的字体，既然没有，浏览器自然显示不出来，所以会出现font-weight好像不起作用，其实只是字体包里没有你要的变细或加粗的字体。

 

肆、font-size属性设置的是字体的宽or高or对角

font-size设置的是字体的高度，w3c介绍如下：

w3c  font-size介绍

 

伍、多张图片间的空白来源

当我们编写网页时，图片img标签是经常会使用到的，但是有时候会发现多张图片间会有一段空白缝隙，如图：

html:

<div>
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    你好，世界！
</div>
<img src="1.jpg" alt="">

css:

img {
    width: 60px;
}

讲常用的，一般解决的办法有两种：

一是设置div的font-size: 0; 但是这样“你好，世界！”这一段文本就消失了，因为font-size属性为0啊，因此这种方法仅适合仅仅包含图片（如果用一个div包含所有图片，然后给这个div设置font-size: 0，这样也可以，但这样又带来一个问题，假如文本是多处地方出现呢？就会带来html多层嵌套，而且还是毫无意义的嵌套，影响当前html页面的结构性）。

第二种方法是改变html的排版，将回车去除，变成这样：

<div>
    <img src="1.jpg" alt=""><img src="1.jpg" alt=""><img src="1.jpg" alt="">
    你好，世界！
</div>

但这样也不是很舒服，有两个问题，一是编写的习惯性是img标签一行一行的放，二是当需要展示的图片比较多的时候，难道全部img标签排成一行吗？因此需要搞懂根本原因。

凡是带有inline的元素，都有文本特性。就是这个文本特性造成了图片间的空白缝隙。

（ps：带有inline的元素包括inline元素和inline-block元素。）

因此，在开发阶段可以给img元素设置margin-left属性，如下：

img {
    width: 60px;
    margin-left: -6px;
}

开发好后是需要压缩包体的，而压缩的过程中压缩工具会自动去除多余的空格、回车等等，因此开发完毕后记得将margin-left去除，避免造成定位不准。

 

陆、清除浮动的更好方法

先来看张图：

html:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

css:

.container {
    margin: 100px auto;
    width: 300px;
    border: 10px solid red;
}
        
.item {
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
}

场景是这样的，我们需要将标号1、2、3的三个方块排成一行，既然是排成一行，采用浮动是最简单的方法（其他方法不讨论），给 .item加了 float: left; 后变成了这样

清楚地看到父级没有包裹住子级元素。在这里的情况就是，三个方块设置了浮动，它的父级看不到，以为它没有子元素，单单是

<div class="container"></div>

自然会出现上面那种情况，我们一般称此为父级元素高度坍塌。原理是对于浮动元素，块级元素是无法“看到的”，所谓无法看到，就是指对于浮动元素，块级会以为它不存在。

解决方法有很多种，比如给父级元素触发bfc，或者添加一层空标签，给该标签添加 clear: both; 

前者触发bfc这种方法假如因为页面需要，已经触发过自然无可非议，没什么不对。但应该知道如果仅仅是为了清除浮动而去触发bfc，就不建议使用，毕竟触发bfc的条件各有缺点。

后者代码如下：

html：

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="clear"></div>    <!-- 多了这一层 -->
</div>

.clear {
    clear: both;
}

但这种方法有违结构样式行为相分离的原则。我们不应该为了清除浮动这一功能而去改变html的结构，且添加的这一层div是毫无意义的（对于页面的结构来说）。本人并不是说此方法不行，谁也没说不能这样写，多一层div少一层div也没多大关系，但是这就好比建好的房子墙壁上突出了一块砖头，谁也不能说房子不可以这样建，但确实是不美观还带有点别扭。

还有一种方法，伪类元素。给父级伪类元素添加三行css代码即可，如下：

css：

.container::after {
    content: "";
    display: block; /* 不能改成inline-block，因为clear属性只在块级元素上生效*/
    clear: both;
}

(ps: 假如因为页面需要，已经给父元素触发过bfc，自然不用再考虑清除浮动)

 

柒、4位的十六进制(#f00f)怎么理解

写网页的颜色代码一般有以下几种

1. 英文颜色，如green，red；
2. RGB颜色，如rgba(255, 0, 0) / rgba(255, 0, 0, 1)
3. HEX颜色 ，如常用的白色为#ffffff（在十六进制中，如果每两位的值相同，那就可以缩写，如#ffffff可以缩写成#fff）
4. HSL颜色，是工业界的一种颜色标准，不常用。

今天刷题的时候刷到一道题目，如图：

写了这么多代码，看过那么多视频，真没见过有人使用过4位的十六进制颜色代码，故此，上网查了一些资料，终于充实了一下自己。

原来4位的十六进制中前3位表示rgb三原色，最后一位表示透明度。换句话说，4位的十六进制颜色代码里的每一位其实就分别代表了rgba里的r，g，b，a。本题的＃f00f，其实等于rgba(255, 0, 0, 1)。

但是这里就出问题了，既然我 rgba(255, 0, 0, 1)可以表示红色，何必再用＃f00f 呢？这个问题暂未解决，留待将来自己更厉害再来。