CSS世界中的“超越“

最新推荐文章于 2024-07-23 14:51:29 发布

与宇宙对视

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量222

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45740510/article/details/124627020

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于标题不允许出现!符号，所以再来一个清晰的标题

超越!important 超越最大max-width

超越 !important
超越最大(max-width)

超越 !important

超越 !important 指的是max-width会覆盖width,而且这种覆盖不是普通的覆盖，是超级覆盖。
大家应该都知道CSS世界中的!important的权重相当高，比直接在元素的style属性中设置CSS声明还要高，一般用在CSS覆盖JavaScript设置上。但就是这么厉害的！important,直接被max-width一个浪头就拍沉了😂。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>max-width</title>
    <style>
        img{
            max-width: 256px;
        }
    </style>
</head>
<body>
    <img src="1.jpg" style="width:480px !important">
</body>
</html>

在这里插入图片描述
图片最后呈现的宽度是256px,style、!important通通靠边站！因为max-width会覆盖width。

超越最大(max-width)

超越最大指的是min-width覆盖max-width，此规则发生在min-width大于max-width情况下，即min-width 和 max-width 冲突的时候。我们设置刚刚图片的最小宽度大于最大宽度试试

<style>
        img{
        	min-width:300px;
            max-width: 256px;
        }
    </style>

效果：
在这里插入图片描述
此时，两者必定是你死我活的状态。究竟谁死呢？遵循“超越最大”规则（注意不是“后来居上”规则），min-width活下来，max-width被忽略，于是img的宽度就是300px;

与宇宙对视

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS世界中的“超越“

由于标题不允许出现!符号，所以再来一个清晰的标题超越!important 超越最大max-width超越 !important超越最大(max-width)超越 !important超越 !important 指的是max-width会覆盖width,而且这种覆盖不是普通的覆盖，是超级覆盖。大家应该都知道CSS世界中的!important的权重相当高，比直接在元素的style属性中设置CSS声明还要高，一般用在CSS覆盖JavaScript设置上。但就是这么厉害的！important,直接被max-
复制链接

扫一扫

专栏目录