优先级啊~

Posted 2020-10-31 瑶狗屎狗屎瑶i

优先级第三种比较方法

3，比较源次序：最后出现的声明胜出，其他的全部淘汰

该规则的实际应用：

 css Reset代码前置
 a元素的伪类书写顺序

继承

继承是指子元素会自动拥有父元素的某些css属性

 某些css属性：并不是所有css属性都可以被子元素继承
 继承是自动发生的，开发者不需要书写任何额外的代码

可被继承的属性：（文本内属性，都可以继承）

 color
 font-size
 font-weight(取值范围：1，数值（字）：100-500；500-700；700-900；2，关键词）
 text-align

不可被继承的属性：

 background-color

一，继承须有传递性

有些属性在页面的某个区域中具有通用性

若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

二，继承发生的场景

一个元素的某个css属性只有满足下面两个条件，才会继承父元素

 该属性是可继承的属性
 该属性在样式表中没有声明

强制继承

强制继承也叫做显示继承，是指将css属性值设置为inherit

 提示：结构元素包含其它标签（元素）
 不要用文本类元素嵌套其它标签和元素

盒模型概述

盒子的分类：不同的元素产生的盒子类型可能不同

一个元素产生什么样的盒子，取决于它css的display属性

 属性：display
 是否能继承：否
 默认值：inline
 display：block块盒
 display：none不生成盒子（不占用页面空间）
 display：inline行盒
 inline-block行内块
 块盒套行盒，行盒不能套块盒

盒子的组成

一个盒子由：margin，border，padding，content组成

margin：外边距（与其他盒子之间的距离）

border：边框

padding：内边距

content：内容（内容的宽度和高度）；用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间

相关css属性

width：

宽度；不可继承，默认值auto（暂认为撑满整个可用区域）

top：上；right：右；bottom：下；left：左

百分比是取父级宽度的百分之多少

overflow：hidden：超出的内容隐藏

注：设置最大最小宽度,高度是为了提高用户体验，保证当前页面的布局

取值范围：

 1个值代表：四个方向
 2个值代表：上下，左右
 3个值代表：上，左右，下
 4个值代表：上，右，下，左

border：分割线内部和外部的界限，由上，右，下，左四个部分组成（类似于箱子壁）

border-style：

 solid：实线
 dashed:虚线
 double：双线
 dotted:点线

transparent：透明色

border粗细取值：

 medium：中等；预设值
 thin：细
 thick：粗

border颜色的默认值是当前标签color的取值

书写格式为：厚度 样式 颜色

否定选择器

格式：

：not（不添加样式的元素）

例子：

nav a:not(:last-child){border-right:1px solid red;}

margin:表示边框和相邻盒子的距离；类似于箱子与箱子之间的距离

margin:边框外

padding：边框内（里）