介绍
这篇文章将为大家详细讲解有关CSS中优先级和叠加等背景下高级特性是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
CSS优先级
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个p标签增加一个类(类),运行后类中的部分属性并未发生改变,及CSS选择器存在优先级问题。
常见的选择器种类:
- <李>内联样式(内联样式),如& lt;跨风格=把丈?black"在…& lt;/span>; <李> ID选择符(ID选择器),如# ID; <李>类选择符(类),如. class {…}, (href=https://www.yisu.com/zixun/?:悬停; <李>标签选择符(标签),如p:之前李
每一类选择器的权值不相同,各选择器的优先级是由权值决定的,
- <李>内联样式:1,0,0,0 <李> ID选择符:1,0,0 <李>类选择符:1,0 <李>标记选择符:1
<强>来源优先级顺序,如图所示
样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。
<强> CSS <>强优先级法则:
- <李>选择器都有一个权值,权值越大越优先;李 <>李当权值相等时,后出现的样式表设置要优于先出现的样式表设置,李 <>李创作者的规则高于浏览者:即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式;李 <>李继承的CSS样式不如后来指定的CSS样式;李 <>李在同一组属性设置中标有”!重要”规则的优先级最大;
CSS常用模型
盒子模型(盒子模型)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
基本属性
- <李>宽/高李 <李>填充李 <李>保证金 <李>边界李 <李> <李>轮廓偏移量属性
- <李>上/左/下/右李
- <李>默认情况下宽度/高度不包含填充李 <李>保证金/填充属性的四个值的顺序是右上方左下角(顺时针)
纵向缘合并
如果& lt; p>的纵向边缘是12 px,那么两个& lt; p>之间纵向的距离是多少?按常理来说应该是12 + 12=24 px,但是答案仍然是12 px。因为纵向的保证金是会重叠的,大的会覆盖下的。
位置属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。以下是Posistion属性取值范围如下:
- <李>静态普通流布局(正常流动),默认值。没有定位,元素出现在正常的流中(忽略顶部,底部,左、右或者z - index声明)。 <李>相对支持偏移量属性的普通流布的局,生成相对定位的元素,相对于其正常位置进行定位,因此,“左:20“;会向元素的左位置添加20像素。 <李>绝对在容器元素内绝对定位的布局,生成绝对定位的元素,相对于静定位以外的第一个父元素进行定位。元素的位置通过“left"“top",“right"以及“bottom"李属性进行规定。 <李>固定在显示范围内的绝对定位布的局,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left"“top",“right"以及“bottom"null
