1.1 目标
- 尺寸
- 媒体类型
- !important 规则
1.2 重点
- 尺寸
- 媒体类型
1.3 难点
- 尺寸
2 尺寸
2.1 设置高度和宽度
height
和 width
属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
2.2 高度和宽度值
height
和 width
属性可设置如下值:
auto
- 默认。浏览器计算高度和宽度。length
- 以 px、cm 等定义高度/宽度。%
- 以包含块的百分比定义高度/宽度。initial
- 将高度/宽度设置为默认值。
2.3 高度和宽度实例
请记住,height 和 width 属性不包括内边距、边框或外边距!它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度!
2.4 设置 max-width
max-width
属性用于设置元素的最大宽度。
可以用长度值(例如 px、cm 等)或包含块的百分比(%)来指定 max-width(最大宽度),也可以将其设置为 none(默认值。意味着没有最大宽度)。
同理,max-height
属性可以设置元素的最大高度。
2.5 设置 min-width
min-width
属性用于设置元素的最小宽度。
在设计响应式表格时,min-width 会更显作用。
同理,min-height
属性可以设置元素的最小高度。
3 媒体类型
3.1 CSS2 引入了媒体类型
CSS2 中引入了 @media
规则,它让为不同媒体类型定义不同样式规则成为可能。
3.2 CSS3 引入了媒体类型
CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念:它们并不查找设备类型,而是关注设备的能力。
媒体查询可用于检查许多事情,例如:
- 视口的宽度和高度
- 设备的宽度和高度
- 方向(平板电脑/手机处于横向还是纵向模式)
- 分辨率
使用媒体查询是一种流行的技术,可以向台式机、笔记本电脑、平板电脑和手机(例如 iPhone 和 Android 手机)提供定制的样式表。
3.3 媒体查询语法
媒体查询由一种媒体类型组成,并可包含一个或多个表达式,这些表达式可以解析为 true 或 false。
如果指定的媒体类型与正在显示文档的设备类型匹配,并且媒体查询中的所有表达式均为 true,则查询结果为 true。当媒体查询为 true 时,将应用相应的样式表或样式规则,并遵循正常的级联规则。
除非使用 not 或 only 运算符,否则媒体类型是可选的,且隐含 all 类型。
3.5 CSS3媒体类型
值 | 描述 |
---|---|
all | 用于所有媒体类型设备。 |
用于打印机。 | |
screen | 用于计算机屏幕、平板电脑、智能手机等等。 |
speech | 用于大声“读出”页面的屏幕阅读器。 |
3.5 媒体查询的简单实例
使用媒体查询的一种方法是在样式表内有一个备用的 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; }
}
3.5.1 菜单的媒体查询
在本例中,我们使用媒体查询来创建响应式导航菜单,该菜单在不同的屏幕尺寸上会有所不同。
3.5.2 列的媒体查询
媒体查询的常见用法是创建弹性布局。在本例中,我们创建了一个布局,该布局在四列、两列和全宽列之间变化,具体取决于不同的屏幕尺寸:
4 !important 规则
CSS 中的 !important
规则用于增加样式的权重。
!important 与优先级无关,但它与最终的结果直接相关,使用一个 !important 规则时,此声明将覆盖任何其他声明。
使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则,使得调试找 bug 变得更加困难了。
当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
使用建议:
- 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
- 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
- 永远不要在你的插件中使用 !important
- 永远不要在全站范围的 CSS 代码中使用 !important
5 章节总结
- 尺寸
- 媒体类型
- !important 规则