CSS基础知识优先级提权和盒模型

CSS选择器提权

在CSS中，选择器是一种模式，用于需要添加样式的元素；说到选择器就不得不说选择机制。

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找，比如：

    <style>
        #divBox p span.red{color:red;}
    </style>

浏览器的查找顺序如下，先查找html中所有class为class='red'的span元素，找到后就查找其父辈元素中是否有p元素，然后再判断p的父辈元素中是否存在id为divBox的div元素，如果存在则匹配上。

注意：浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

特指度

特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算一个数值，数越大，越重要。这里计算公式叫做‘I-C-E’计算公式。

属性	解析
I	Id
C	Class
E	Element

下面举几个css表达式的特指度计算结果：

CSS选择器表达式	特指度计算结果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

根据特指度计算公式计算，哪个的计算结果大，浏览器就会以哪个为优先；选择器优先级提权有一个规则：id > class > 标签；[0,0,1][0,1,0][1,0.2]

盒模型

在HTML中，可以把所以元素都看作成盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上就是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

元素框最内部是内容区，包围内容区的是内边距；内边距的边缘是边框；边框外是外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           /* 边框 通过border设置，值由3部分组成，边框粗细（px）、边框样式、边框颜色。
           border-winth:1px;设置边框粗细；
           border-style:solid;设置边框样式，solid (实线)、dashed (虚线)、dotted (点线)。
           border-color:red; 设置边框颜色； */
           border: 1px solid violet;
           /* 内边距(边框与内容之间的距离)padding 的简写语法：padding 是按顺时针的方式赋值；[上、右、下、左] */
           padding: 30px;
           /* margin外边距（盒子与盒子之间的距离）；简写语法和padding一样；是按顺时针的方式赋值；[上、右、下、左] */
           margin: 30px;
           background: red;
           /* 设置盒子模型为ie盒子模型  （不影响盒子总体大小） */
           box-sizing: border-box;
       }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS选择器提权

特指度

盒模型

相关文章