CSS-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

最新推荐文章于 2023-07-31 13:45:06 发布

sharryling

最新推荐文章于 2023-07-31 13:45:06 发布

阅读量712

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_22703205/article/details/88809896

版权

1.css样式优先级

参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221

不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。

其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，就可以避免写出无法复用的样式，同时可以快速定位样式冲突无法应用的问题的根源。

important 比内联优先级高,但内联比 id 要高

1.1、样式优先级规则：

1.根据权重值排序，应用权重值第一的样式

2.如果权重值相同，则应用最后定义的样式（应避免这种情况，若出现问题，溯源的时候比较麻烦）

1.2、权重规则：

权重分为四个等级（有一个重要级角色不在此列）  

第一等：内联样式，权重1000，即标签内的style属性设置的样式

第二等：ID选择器，权重100，例如#id{...}

第三等：类选择器，伪类选择器，属性选择器，权重10，例如.class{...}、:hover{...}、[arrtibute=value]

第四等：标签选择器，伪元素选择器，权重1，例如div{...}、::after{...}

超然地位：!important（只要我出现，不好意思，权重就是无限，优先考虑，别的靠边站）

PS:还有几个权重为0，不计入排名，他们就是通配选择器(*)，子选择器(>)，相邻同胞选择器(+)

根据样式根据以上规则，按照选择器累加计算权重，例如

#my-id .my-class div p{...}

对于p标签的来说，这个样式的权重就是100+10+1+1=112，如果p还有别的样式，只要小于(严格小于)112，就使用这个样式，别的样式无效。

1.3、举个栗子

猜猜下面这组样式设计 ，最后<p>标签的文字颜色是什么吗？

CSS样式如下:

.my-class div div p{
    color:green;
}
 
.my-class #my-id div p{
    color:red;
}
 
div #my-id div p{
    color:gray;
}
 
div p{
    color:blue;
}
 
p{
    color:yellow;
}
HTML结构如下:

<body>
<div class="my-class">
    <div id="my-id">
        <div>
            <p>猜猜我是什么颜色？</p>
        </div>
    </div>
</div>
</body>

答案揭晓，是红色！！！！为什么呢？

因为按照上面权重规则计算权重

第一组：10+1+1+1=13

第二组：10+100+1+1=112

第三组：1+100+1+1=103

第四组：1+1=2

第五组：1

不难看出第二组权重112，最高，所以最后显示的颜色为红色。

原文：https://blog.csdn.net/sinat_36521655/article/details/80140221

2.position 与 float

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

1.普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。

2.绝对定位：position:absolute/fixed;元素框脱离普通文档流。

3.浮动：float:left/right;元素脱离普通文档流。

2.1 position:static absolute relative fixed

用position使元素脱离普通流后，该元素不占据空间，用top/bottom/left/right决定位置。
用float使元素脱离普通流后，该元素占据空间，用margin,padding等决定和周围内容的距离等。
relative absolute fixed 开启定位之后，自动提高z-index等级

-	static	relative	absolute	fixed
是否有定位	×	√	√	√
left top bottom right是否起作用	×	√	√	√
left top bottom right不变	×	位置不变	位置不变	？
left top 等相对谁定位		相对原来位置	离它最近的非static上层定位，如没有都为static，则相对于body
是否存在文档流	√	√	×	×
是否会改变元素属性		× 例如，span的长宽不会受width和height改变	√ 例如，span的字大小不变，但长宽会受width和height改变
兼容性问题				旧IE有兼容性问题
对float的影响	依旧处于普通流中，再对元素应用float起作用	依旧处于普通流中，再对元素应用float起作用	不能浮动	不能浮动

关于position使用一般会引发的问题
链接：

最低0.47元/天解锁文章

sharryling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...
复制链接

扫一扫