层叠 比较级 三种定位

Posted 2021-03-22 mobuneng

1、层叠的含义：
需要了解层叠还有个声明冲突；声明冲突就是属性相同值却不同；而层叠就是来解决的。
那么我们就来看看这些冲突是怎么解决的吧。
2、层叠的过程：
2.1比较优先级
每一个声明都有一个优先级，当发生冲突时，优先级高的会被保留，优先级低的会淘汰，一个声明的优先级与他的来源和重要性有关。
若属性后面跟上【！important】，则表示一条重要声明，否则表示普通声明。
优先级从低到高的顺序如下：
（1）浏览器默认样式表中的声明；
（2）用户样式表中的普通声明；
（3）作者样式表中的普通声明；
（4）作者样式表中的重要声明；
（5）用户样式表中的重要声明；
2.2比较特殊性
一个声明的特殊性，取决于规则适用范围的大小。规则适用范围越大，特殊性越小。
特殊性从高到低如下：
（1）行内样式；通过<style>的标签属性来书写；
（2）ID选择器；格式；#awesome{
文档
}
（3）类选择器；格式； .awesome{
文档
}
（4）元素选择器；格式； p{
文档
}
（5）通配符选择器；格式；*{
文档
}
2.2.1权重值
！important→infinity
style: 1 0 0 0
id: 0 1 0 0
class属性：0 0 1 0
元素伪类：0 0 0 1
2.3比较源次序
选择器：如下
id选择器：#id名 { }
元素选择器：.元素名 { }
属性选择器 ：属性名 { }
其中，他们之间又可以以不同的方式进行组合，如下：
后代选择器:格式：ul li {}{ }
子代选择器:格式：ul>li{} { }
伪类选择器：格式 ol li:nth-child( )
通用(通配符)选择器:* { }……
类选择器: 格式 .类名{ }
继承：
子元素会自动拥有父元素的某些CSS属性。文本类的属性会被继承。
列表：
1.有序列表：格式：<ol>
<li>nnn</li> 显示结果： 1.nnn 会自动给你排序
<li>mmm</li> 2.mmm
</ol>
可以有多个子级。
2.无序列表： 格式：<ui>
<ui>nnn</ui> 显示结果： . nnn 会显示一个小黑点在前面
<ui>mmm</ui> . mmm
</ui> 可以有多个子级
3.定义列表：格式：<di>
<di>nnn</di> 显示结果： nnn 会让结果在下排往后移一点
<di>mmm</di> mmm
</di> 可以有多个子级
######
list-style:给列表项的样式可以有： none: 取消列表项样式 disc：默认标记是实心圆 circle: 标记的是空心圆 square: 标记的是实心方块 decimal: 数字 cower-alpha , wpper-alphe: 大小英文。还有很多
三种定位体系
1，常规流 2，浮动， 3，绝对定位
1，任何元素都会有一个定位体系
2，常规流：在没有CSS的干扰下，块级元素独占一行，宽高可设，行内元素并排显示，宽高自动。
3，浮动：格式：1，float:none :不浮动
2，float:left :左浮动：左浮动的盒子向上向左排列
3，float:right:右浮动：右浮动的盒子向上向右排列
4；若剩余空间无法放下浮动 的盒子则刻盒子向下移动直到有个可以容纳他的地方才会向左向右移
######
盒子
1，一个元素和另一个元素的距离就是外边距
2，margin: 外边距 podding: 内边距 border:边距
3,podding:10px四周，10px,20px: 上，右 10px,20px,30px: 上，右，下 10px.20px,30px,40px:上，右，下，左
但是只要改一边的距离就可以这样格式; podding - top 上
right 右
边距格式：10px solid red left 左
dashed: 虚线 bottom 下
dotted:实线
4.podding不可以取负数
5，垂直方向向上若两个外边距相邻。则会折叠 取大的值 ，，水平线的是相加。