本文共一万七千字，十六个内容点，七十个知识点
目录
一、转义字符二、表单标签1、form标签2、input元素3、label 标签4、select 标签5、button 元素三、语义化标签四、Head标签1、title 标签2、link标签3、style标签4、script 标签5、mate 标签6、base 标签五、CSS引用方式1、行内样式2、内嵌样式3、外部样式3.1 链接样式3.2 导入样式六、CSS背景属性1、background-size 属性2、background-repeat 属性3、background 属性七、CSS文本属性1、color 属性2、font-size 属性3、font-weight 属性4、font-family 属性5、text-align 属性6、line-height 属性7、text-indent 属性8、letter-spacing 属性9、word-spacing 属性10、text-decoration 属性11、text-transform 属性12、writing-mode 属性13、white-space 属性八、基础选择器1、通配选择器2、标签选择器3、id选择器4、类选择器5、组合选择器九、伪类选择器十、伪元素选择器十一、CSS优先级1、CSS优先级2、选择器权重计算十二、块级元素与行内元素1、块级元素2、行内元素3、行内块级元素十三、盒子模型1、概念2、盒子模型组成部分3、标准盒模型与怪异盒模型的区别3.1标准盒模型3.2怪异盒模型十四、定位1、脱离文档流2、position定位2.1 static定位2.2 relative定位2.3 absolute定位2.4 fixed定位2.5 sticky定位3、层级属性z-index十五、浮动1、float属性2、clear属性3、浮动布局十六、多媒体查询1、使用多媒体查询2、多媒体特征一、转义字符
在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。
转义字符也可称为字符实体，对于同一个特殊字符，可以使用实体名称或者实体编号表示
二、表单标签
HTML表单用于收集用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
1、form标签
<form></form>用于创建HTML表单，常用属性如下：
action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
2、input元素
<input />元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的
3、label 标签
<label></label>用于为input标签提供标注
点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上
label标签的for属性值应当与相关元素的id属性值相同
示例
<form><label for="like">点赞</label><input type="radio" name="like" id="like" /><br /><label for="collect">收藏</label><input type="radio" name="collect" id="collect" /></form>
4、select 标签
<select></select>用于创建下拉列表
select元素中的<option></option>标签用于定义列表的可选项
<select><option value="1">A</option><option value="2">B</option><option value="3">C</option><option value="4">D</option></select>
5、button 元素
<button></button>用于定义普通按钮
三、语义化标签
HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。
语义化在盲人软件、机器翻译等方面发挥着重要作用，同时搜索引擎会通过语义化标签增强文章的SEO搜索。
下表为部分常见的语义化标签：
四、Head标签
head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>
常见Head头
1、title 标签
<title></title>用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
例：
<title>uiu的日志_uiuing's_CSDN博客-前端开发,后端开发,大数据领域博主</title>
2、link标签
<link />用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标
<link rel="icon" type="image/png" href="/static/images/favicon.ico">
<link />是空元素，仅包含属性，只能存在于head部分
3、style标签
<style></style>用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间
4、script 标签
<script></script>用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本
<script>// JavaScript 代码</script>
也可以通过script的src属性链接外部脚本文件
<script src="/static/js/main.js"></script>
5、mate 标签
<meta />提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值
keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一
charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：
content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
6、base 标签
<base />用于为页面中的所有相对链接设置默认URL或默认target属性
<base href="" target="_blank" />
五、CSS引用方式
CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。
CSS遵循W3C规范，实现了跨浏览器的标准化。
1、行内样式
直接使用HTML元素的style属性引入CSS样式
<p style="color: #000;">uiu</p>
2、内嵌样式
使用标签引入样式
<style>p {color: #000;}</style>
3、外部样式
链接样式导入确实比较方便，当然也是最常用的，但在比较大的工程之中我常使用导入样式，我认为这可以让我的代码得到更方便的管理
3.1 链接样式
在<head></head>标签中，使用<link />标签链接外部的CSS文件
link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css
<link rel="stylesheet" href="style.css" type="text/css" />
3.2 导入样式
使用@import url()引入CSS文件
在CSS文件中直接使用@import url()
在HTML文件中需要在<style></style>标签中使用@import url()
在HTML初始化时，@import url()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分
<!-- HTML文件中导入 --><style>@import url(style.css);</style>
/*CSS文件中导入*/@import url(style.css);
六、CSS背景属性
在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。
1、background-size 属性
contain
保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域
cover
保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示
2、background-repeat 属性
repeat（默认）
允许水平和垂直方向重复（平铺）背景图片
repeat-x
只允许水平方向重复（平铺）背景图片
repeat-y
只允许垂直方向重复（平铺）背景图片
3、background 属性
简写属性可以在一个属性声明中设置一个或多个背景属性
background: #000 url('bannner.png') no-repeat cover;
上面代码的意思为：黑色背景、背景图片为：bannner.png、关闭平铺、保持图片纵横比不变
七、CSS文本属性
通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。
1、color 属性
用于设置文本的颜色，可设置的值有：
颜色英文名，如red
十六进制值，如#FFFFFF
RGB值，如rgb(255, 0, 0)
rgba值，如rgba(255, 0, 0, 0.9)
2、font-size 属性
用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等
字体大小未设置时默认字体大小为16px
3、font-weight 属性
用于设置文本的粗细，可设置的值有：
4、font-family 属性
用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体，则会尝试下一个，以此类推
font-family: "PingFang SC","Hiragino Sans GB","Arial,Microsoft YaHei","Verdana","Roboto","Noto,Helvetica Neue","sans-serif";
5、text-align 属性
用于设置文本的水平对齐方式，可设置的值有
center（居中对齐）left（左对齐）right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐
6、line-height 属性
用于设置行间距，可设置的值如下
数字：行间距为当前字体大小乘此数字固定值：设置固定的行间距，如20px百分比：行间距为当前字体大小乘百分比
7、text-indent 属性
用于指定首行缩进值，可设置的值如下
固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比
8、letter-spacing 属性
用于设置字间距，设置固定值为字间距，如10px
9、word-spacing 属性
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px
10、text-decoration 属性
用于设置文本的装饰线，是下表属性的简写
/* 表示为黑色波浪形下划线 */text-decoration: underline wavy black;
11、text-transform 属性
用于设置文本大小写字母，常用属性如下
uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母
12、writing-mode 属性
设置文本在水平或垂直方向的排布方式
horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向
sideways-lr：文本流在垂直方向，从下至上、从左至右排列
sideways-rl：文本流在垂直方向，从上至下、从右至左排列
vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致
13、white-space 属性
用于设置文本的空白符处理方式，属性值如下
八、基础选择器
CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。
通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。
1、通配选择器
可以与其他选择器相结合，选择某元素下的所有元素
/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/.box * {color: #000; }
由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式
* {margin: 0;padding: 0;border: 0;}
2、标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等
3、id选择器
id属性的属性值应当是当前文档唯一
4、类选择器
class属性值在文档中可以重复
5、组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果
九、伪类选择器
将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。
十、伪元素选择器
伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。
一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素，使用双冒号::作为伪元素选择符
十一、CSS优先级
当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？通过CSS优先级可以帮助我们得出结论。
1、CSS优先级
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
内联样式>ID选择器>类选择器、属性选择器、伪类选择器>标签选择器 、伪元素选择器
通配符选择器*和关系选择符+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等对优先级没有影响
在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
2、选择器权重计算
选择器的权重可以相加
#header .nav li {list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
权重不同时，权重大的选择器生效
3、!important规则
当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明
!important规则与优先级无关，但是会直接影响样式的最终显示结果
十二、块级元素与行内元素
HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。
1、块级元素
在浏览器显示时总是独占一行
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
可以包含内容、行内元素和其他块级元素
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
设置display属性为display: block可将元素转换为块级元素
2、行内元素
不独占一行，默认不自动换行
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
一般只能包含内容和其他行内元素，不可包含块级元素
设置宽高无效，宽高默认为内容的宽高
常见行内元素：span、label、a、em、strong、img
设置display属性为display: inline可将元素转换为行内元素
3、行内块级元素
综合块级元素与行内元素的特性
不独占一行
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
宽高未设置时默认为内容宽高
常见行内块级元素：button、input、textarea、select
设置display属性为display: inline-block可将元素设置为行内块级元素
十三、盒子模型
所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。
1、概念
当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。
2、盒子模型组成部分
<style>div{width: 100px;height: 100px;margin: 50px;padding: 15px;}</style><div></div>
盒模型由里到外包括四个部分：
内容部分padding（内边距）border（边框）margin（外边距）
内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置
padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过padding相关属性设置大小
border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色
margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过margin相关属性设置大小
3、标准盒模型与怪异盒模型的区别
3.1标准盒模型
标准盒模型结构图
在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小
标准盒模型的盒子实际宽高=内容区域的宽高+border大小+padding大小
如果将div设置为标准盒模型box-sizing：content-box，CSS设置如下
div{width: 100px;height: 100px;margin: 50px;padding: 15px;box-sizing: border-box;}
检查元素如下图所示，div设置的
width和height是100×100，div的实际大小是130×130，div的实际宽度 = width + padding-left + padding-right + border-left + border-right= 100+ 15 + 15 + 0 + 0 = 130，div的实际高度计算同理
div在标准盒模型中的实际大小
标准盒模型属性
3.2怪异盒模型
在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding
怪异盒模型的实际大小= 盒模型设置的width、height（包含border和 padding）
在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border
例如将div设置为怪异盒模型box-sizing：border-box，CSS设置如下
div{width: 100px;height: 100px;margin: 50px;padding: 15px;box-sizing: border-box;}
检查元素如下图所示，div设置的width和height设置为100×100，实际大小也是 100×100，
div的实际宽度 = width，div的实际高度 = height
div在怪异盒模型中的实际大小
怪异盒模型属性
不管是标准盒模型还是怪异盒模型，margin都不计入盒子的实际大小。但是margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中。
浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为box-sizing: border-box实现
十四、定位
在一个网页的排版布局中，定位属性是最重要的属性之一，能够熟练使用定位布局对页面美化有很好的帮助。
1、脱离文档流
文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，当文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化
2、position定位
position属性用于指定元素的定位类型，属性值可为
static（默认定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）
设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置
2.1 static定位
页面上的每个盒子从上到下、从左到右依次排列的布局
<style>.box1{width: 100px;height: 100px;border: 1px red solid ;}.box2{width: 100px;height: 100px;border: 1px blue solid ;}</style><div class="box1">box1</div><div class="box2">box2</div>
static定位示例
2.2 relative定位
相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变
上述static定位示例代码中，将box1设置以下属性，元素会相对于自身原始位置向右偏移10px，向下偏移10px
<style>.box1{width: 100px;height: 100px;border: 1px red solid ;position: relative;top: 10px;left: 10px;}.box2{width: 100px;height: 100px;border: 1px blue solid ;}</style><div class="box1">box1</div><div class="box2">box2</div>
relative定位示例
2.3 absolute定位
元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流
上述static定位示例代码啊中，将box2以及其父级元素box-container设置如下属性
box2元素相对于relative定位的box-container向右偏移10px，向下偏移10px
<style>.box1{width: 100px;height: 100px;border: 1px red solid ;}.box2{width: 100px;height: 100px;border: 1px blue solid ;position: absolute;top: 30px;left: 25px;}</style><div class="box1">box1</div><div class="box2">box2</div>
absolute定位示例
2.4 fixed定位
相对于浏览器窗口进行定位，元素脱离文档流
常用于顶部导航栏、顶部搜索框、侧边联系客服等板块
2.5 sticky定位
存在兼容性问题
根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合
常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置
3、层级属性z-index
用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）
z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素
下面的absolute定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1
<style>.box1{width: 100px;height: 100px;background-color: red;position: absolute;}.box2{width: 100px;height: 100px;background-color: blue;position: absolute;top: 30px;}</style><div class="box1">box1</div><div class="box2">box2</div>
absolute定位层级示例
将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方
<style>.box1{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 1;}.box2{width: 100px;height: 100px;background-color: blue;position: absolute;top: 30px;z-index: 0;}</style><div class="box1">box1</div><div class="box2">box2</div>
z-index调整后示例
十五、浮动
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。
后可用于所有元素，在页面布局中发挥重要作用。
1、float属性
用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性
元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
下表为float可设置的属性值
2、clear属性
用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方
下表为float可设置的属性值
<style>.layout {width: 120px;height: 300px;margin: 10px;background-color: cadetblue;float: left;}.content {width: 340px;height: 300px;margin: 10px;background-color: powderblue;float: left;}footer {width: 500px;height: 40px;background-color: darkseagreen;}</style><main><section class="layout">侧边栏</section><section class="content">内容</section></main><footer></footer>
在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示
未清除浮动布局示例
section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方
/* 清除左右两侧浮动 */footer {clear: both;}/* 或清除左侧浮动*/ footer {clear: left;}
清除浮动后布局示例
3、浮动布局
浮动在布局中最常用于实现两列布局或三列布局
在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可
以下为三列布局的简单实现代码
<style>main {width: 500px;height: 300px;margin: 50px;}.left {width: 100px;height: 300px;background-color: cadetblue;float: left;}.center {width: 300px;height: 300px;background-color: lightblue;margin: 0 100px;}.right {width: 100px;height: 300px;background-color: cadetblue;float: right;}</style><main><div class="left"></div><div class="right"></div><div class="center"></div></main>
浮动实现三列布局示例
十六、多媒体查询
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式
使用@media规则可以针对不同媒体类型定制不同的样式规则。
媒体查询可用于检测示例：
viewport（视窗）的宽度与高度。设备的宽度与高度。朝向（智能手机横屏，竖屏）。分辨率。
目前很多针对手机，平板等设备都会使用到多媒体查询。
1、使用多媒体查询
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {/*CSS 代码...*/}
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了not或only操作符，否则所有的样式会适应在所有设备上显示效果。
not：用来排除掉某些特定设备的，比如@media not print（非打印设备）only：用来定某种特别的媒体类型。all：所有设备，这个应该经常看到。
也可以在不同的媒体上使用不同的样式文件：
<linkrel="stylesheet"media="mediatype and|not|only (expressions)"href="print.css"/>
多媒体类型
2、多媒体特征
创建媒体查询时，最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。
下面是所有可供媒体查询检测的特性：
width：视口宽度。height：视口高度。device-width：渲染表面的宽度（设备屏幕的宽度）。device-height：渲染表面的高度（设备屏幕的高度）。orientation：检查设备处于横向还是纵向。aspect-ratio：基于视口宽度和高度的宽高比。 16∶9 比例的显示屏这样定义 aspect-ratio: 16/9。device-aspect-ratio：和 aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。color：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。color-index：设备的颜色索引表中的颜色数。值必须是非负整数。monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如：monochrome: 2。resolution：检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。scan：电视机的扫描方式，值可设为 progressive（逐行扫描）或 interlace（隔行扫描）。grid：用来检测输出设备是网格设备还是位图设备。
在上述所有特性中，除scan和grid之外，都可使用min和max前缀来创建一个查询范围
@import url("phone.css") screen and (min-width: 200px) and (max-width: 460px);
这里对width应用了min和max来设定查询范围。这样phone.css文件只会引入视口宽度介于200像素至460像素的显示屏设备。
如果对您有帮助，可别忘了点赞
