盒模型 | CSS权重 | CSS层叠

span{ color:red;}
*{ font-family:"楷体";line-height:2em; font-size:18px;}

盒模型

CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域

网页中的大部分对象，实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。

盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。

包含：margin border padding content(内容)


padding(内边距)

设定页面中一个元素内容到元素边缘（边框）之间的距离

规定了内容到达元素边缘的位置关系

规定了子元素与父元素的位置关系

注* Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值

border(边框属性)

语法：border:边框宽度 边框风格 边框颜色

border-style:设定边框风格 border-style:none(无)/solid(实现)/dotted(点划线)/dashed(虚线)/double(双线)

border-width:设定边框宽度 border-width:数值 单位px

border-color:设定边框颜色 border-color:颜色

边框类型：（不常用属性值）groove定义3D凹槽边框 ridge定义3D垄状边框 inset outset定义3D边框（都取决于边框颜色）

margin(外边距，外补丁)

设定一个元素所占空间的边缘（边框）到相邻元素边框的距离

四个值：上 右 下 左

三个值：上 左右 下

两个值：上下 左右

一个值：四个方向

margin-top解决办法（三种）

给父元素添加overflow:hidden;

给父元素添加盒模型相关属性（border）

给其中一个元素添加浮动

补充说明

margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。

margin可以定义负值，但border和padding不支持负值。

如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。

每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。

浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看作是最大的盒子。

盒模型尺寸

盒子的实际大小（公式）

    宽：左右margin+左右border+左右padding+width
    高：上下margin+上下border+上下padding+height

CSS权重

    类型选择符的权重为：0001
    类(CLASS)选择符的权重为：0010
    ID选择符的权重为：0100
    子选择符（E>F）的权重为：0000
    属性选择符的权重为：0010
    伪类选择符的权重为：0010
    伪元素选择符的权重为：0001
    包含选择符的权重为：包含的选择符权重值之和
    内联样式的权重为：1000
    继承的样式的权重为：0000

CSS层叠

css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

!important作用是提高指定CSS样式规则的应用优先权

层叠与权重的关系：

层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠。

如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器