尺寸、媒体类型、!important 规则

最新推荐文章于 2024-10-10 17:36:40 发布

LikY03321

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

文章标签：媒体前端 css

本文链接：https://blog.csdn.net/LikY03321/article/details/128336540

本文详细介绍了CSS中设置元素尺寸的方法，包括高度、宽度、max-width和min-width属性的使用。同时，讨论了媒体类型的演变，从CSS2的媒体类型到CSS3的媒体查询，以及如何根据设备能力定义样式。最后，阐述了!important规则的作用及其在CSS优先级中的位置，提醒开发者谨慎使用!

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尺寸

设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

高度和宽度值

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。

高度和宽度实例

实例1：

div.percent {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

设置 max-width

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

在上个案例中，当浏览器窗口小于元素的宽度（500px）时，浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理：

div.max {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

同理，max-height 属性可以设置元素的最大高度。

设置 min-width

min-width 属性用于设置元素的最小宽度。

在设计响应式表格时，min-width 会更显作用。

例如以下表格：

<div style="width: 100%;">    <table>        <thead>            <tr>                <th>部门</th>                <th>姓名</th>                <th>家庭地址</th>            </tr>        </thead>        <tbody>            <tr>                <td>技术部</td>                <td>张三</td>                <td>赛虹桥街道小行村9号</td>            </tr>            <tr>                <td>业务部</td>                <td>李四</td>                <td>江苏省南京市雨花台区赛虹桥街道菊花里10幢104号</td>            </tr>            <tr>                <td>业务部</td>                <td>王五</td>                <td>赛虹桥街道工农新村25号</td>            </tr>        </tbody>    </table></div>

当浏览器窗口变小时，文本可能会自动换行，对布局造成一定影响：

<div style="width: 500px; overflow: scroll;">    <table>        <thead>            <tr>                <th style="min-width: 80px;">部门</th>                <th style="min-width: 60px;">姓名</th>                <th style="min-width: 400px;">家庭地址</th>            </tr>        </thead>        <tbody>            <tr>                <td style="min-width: 80px;">技术部</td>                <td style="min-width: 60px;">张三</td>                <td style="min-width: 400px;">赛虹桥街道小行村9号</td>            </tr>            <tr>                <td style="min-width: 80px;">业务部</td>                <td style="min-width: 60px;">李四</td>                <td style="min-width: 400px;">江苏省南京市雨花台区赛虹桥街道菊花里10幢104号</td>            </tr>            <tr>                <td style="min-width: 80px;">业务部</td>                <td style="min-width: 60px;">王五</td>                <td style="min-width: 400px;">赛虹桥街道工农新村25号</td>            </tr>        </tbody>    </table></div>

同理，min-height 属性可以设置元素的最小高度。

媒体类型

CSS2 引入了媒体类型

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体类型

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

你还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

body {
	background-color: pink;    
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

#leftsidebar { width: 100%; float: none; }#main { margin-left: 0; }@media screen and (min-width: 480px) {  #leftsidebar { width: 200px; float: left; }  #main { margin-left: 216px; }}

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

.topnav {
    overflow: hidden;
    background-color: #dddddd;
}

.topnav a {
    color: #333333;
	line-height: 50px;
    float: left;
    display: block;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
}

.topnav a.on {
    color: white;
    background-color: darkcyan;
}

@media screen and (max-width: 600px) {
    .topnav a {
	   	text-align: left;
		line-height: 40px;
        float: none;
        width: 100%;
    }
}

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

.column {
	width: calc(25% - 20px);
	float: left;
	color: white;
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	background-color: lightgray;
	margin: 0 10px;
}

@media screen and (max-width: 992px) {
    .column {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

更现代的创建列布局方法是使用 CSS Flexbox。

!important 规则

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

实例：

#myid {
  background-color: blue;
}
 
.myclass {
  background-color: gray;
}
 
p {
  background-color: red !important;
}

[解析] 以上实例中，尽管 ID 选择器和类选择器具有更高的优先级，但文本段落背景颜色将显示为红色，因为 !important 规则会覆盖 background-color 属性。

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则，使得调试找 bug 变得更加困难了。

当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

实例：

#myid {
  background-color: blue !important;
}
 
.myclass {
  background-color: gray !important;
}
 
p {
  background-color: red !important;
}

使用建议：

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important