层叠的过程与盒子的组成

Posted 2020-12-30 zhangzhiyong

一、层叠

1. 什么是层叠？

       层叠是一种机制，用于解决CSS声明冲突。即**当出现声明冲突时，浏览器自动触发层叠机制**。

       层叠的过程（3步走，通过后只剩1条样式）：

       ①比较优先级：一个声明的优先级，与它的**来源**和**重要性**有关。

          按来源分为：作者样式表、浏览器默认样式表、用户样式表。

          若属性值后面跟上 !important ，则表示一条重要声明，否则表示普通声明。

  例如：color：red;  普通声明
      color: red!important; 重要声明

        ②比较特殊性：  一个声明的特殊性，取决于规则使用范围的大小。规则使用范围越大，特殊性越低，反之特殊性越大。

          特殊性（权重）从高到低排序：行内样式表>ID选择器>类选择器>元素选择器>通配符选择器

          特殊性比较方法 ：在比较特殊性时，每一个冲突的声明，会生成4个数字（用abcd分别表示），以比较特殊性：

          - a：若声明是行内样式，则为1，否则为0；

          - b：规则中ID选择器的个数；

          - c：规则中类选择器、伪类选择器和属性选择器的个数；

          - d：规则中元素选择器、伪类选择器的个数。

         注：通配符选择的特殊性为0。当计算选择器分组（并集选择器）的时候，要分开计算。 .

      .main>div  #nav  *.home  a:link{color:green;}
      其中.main 为类选择器，div为元素选择器，#nav为ID选择器，*为通配符选择器，.home为属性选择器，a为元素选择器，:link为伪类选择器。
      则：  a    b     c     d
            0     1    3     2 

　　③比较源次序： 特殊性相同的情况下，最后出现的声明胜出，其他全部淘汰。

         内部和外部样式表在特殊性相同的情况下，位置靠后的胜出。

二、盒子的组成

       ①margin：

        - 外边距，与其他盒子之间的距离。

       - 分为上（top）下（bottom）左（left）右（right）

       - margin-top：上外边距，不可继承，默认值：0px，其他可取：em，%（其他三个和这个一样）。

       - margin里简化取值为顺时针方向：

如：1个值时（margin：10px）：四边都一样
  2个值时（margin：10px  20px）：上下都是10px，左右都是20px
  3个值时（margin：10px 20px 30px）：上10px，左右20px，下30px
  4个值时（margin：10px 20px 30px 40px）：上上10px，左20px，下30px，右40px

　　②border：

        - 分割内部和外部的界限，也分上下左右。

        - 边框样式：border-top-style，不可继承，默认值none，其他取值：solid（实线），dashed（虚线），dotted（点线），double（双实线）

        - 边框厚度：border-top-width，不可继承，默认值：medium（中等边框，3px），其他取值：px，em

        - 边框颜色：border-top-color，不可继承，默认值：currentcolor（目前区域中字体的颜色）。

        - 简化书写：border-top：厚度 样式 颜色

       ③padding：与margin相同用法。

       ④content：

        - 用于存放文本或其他元素的区域。

        - 属性：width宽，height高，overflow：hidden（超出部分文本隐藏），min-width（最小宽度），max-width（最大宽度），min-height（最小高度），max-height（最大高度）。