本文详细介绍了CSS的概念、样式表、语法、选择器权重、盒模型、布局技术、字体与背景、过渡与动画、变形和平移，以及响应式设计的关键——媒体查询。通过实例展示了如何利用CSS实现复杂的网页布局和动态效果，强调了理解盒模型、浮动、定位以及弹性盒在布局中的重要性，并探讨了移动设备像素和响应式布局的实现。
CSS学习笔记
一、CSS概念
网页一共分成三个部分：结构（html）、表现（CSS）、行为（Javascript），css又称层叠样式表。网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终用户能够看到的只是网页的最上面一层。
总结：CSS是用来设置网页中元素的样式。
二、CSS样式表
内联样式（行内样式）
在标签内部使用style属性来设置元素的样式：
<p style="color:red;font-size:20px">........</p>
其中属性名和属性值之间用‘：’隔开，两个属性之间用‘；’隔开。
注：一般在开发时不会使用内联样式，因为该样式存在于某一标签的内部，只对该标签产生作用，如果要求影响到多个元素则需要在所有元素的标签复制一遍，并且当样式发生变化时，又需要一个个修改，操作起来十分麻烦。
内部样式表
为解决上述问题，可以采用内部样式表，即将样式写到网页的头部head里。然后通过css选择器选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且只需要需改一处即可。内部样式表更加方便对样式进行复用。
<head>
<style>
p{
color:red;
font-size:20px;
}
</style>
<!--p表示样式只对所有p标签适用 -->
</head>
内部样式表也存在一些问题，它只对当前页面适用，里面的样式不可以跨页面使用！
外部样式表
为能够让样式可以跨页面使用，可以采用外部样式表（开发时经常使用），将css样式编写到一个外部css文件中，然后需要使用该样式的页面通过link标签引入即可。
<link rel="stylesheet" href="style.css">
优点：将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
三、CSS语法
CSS的基本语法有：选择器和声明块
选择器：通过选择器可以选中页面中的指定元素，例如下列代码中p即是选择器，p的作用是选中页面中所有的p元素。
声明块：指定要为元素设置的样式
声明块由一个一个的声明组成，声明是一个名值对结构。
<style>
p{
color:red;
font-size:20px;
}
</style>
1、选择器
常用选择器
常用选择器有：元素选择器、id选择器，类选择器、通配选择器
元素选择器
<style>
p{
color:red;
font-size:20px;
}
</style>
上述代码即为元素选择器，作用是根据标签名来选中指定的元素，语法：标签名{}
id选择器
<style>
#red{
color:red;
font-size:20px;
}
</style>
上述代码即为id选择器，根据元素的id属性值选中一个元素，特别注意元素的id值唯一，不可重复出现！语法：#id名{}
类选择器
<style>
.blue{
color:blue;
font-size:20px;
}
</style>
当要求一个以上但不是所有元素满足样式时，使用id选择器就无法满足，可以采取类选择器。作用是根据class属性值选中一组元素。语法：.class属性值{}
注：class是一个标签的属性，它可以同时为一个元素指定多个class属性值，属性值之间用空格隔开
<p class="blue box">周深</p>
通配选择器
<style>
*{
color:blue;
font-size:20px;
}
</style>
作用是选中页面中的所有元素。语法：*{}
复合选择器
复合选择器可以分为：交集选择器和并集选择器
交集选择器
<style>
div.blue{
color:blue;
font-size:20px;
}
</style>
作用是选中同时符合多个条件的元素。语法：选择器1选择器2选择器3选择器n{}。特别注意：如果交集选择器中有元素选择器，必须使用元素选择器作为开头！
并集选择器
<style>
h1,span,#blue{
color:blue;
font-size:20px;
}
</style>
作用是同时选择多个选择器对应的元素。语法：选择器1，选择器2，选择器n{}
关系选择器
父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素叫子元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：拥有相同父元素的元素
子元素选择器
语法：父元素>子元素{}
<style>
div>p{
color:blue;
font-size:20px;
}
</style>
后代元素选择器
语法：祖先 后代{}
<style>
div span{
color:blue;
font-size:20px;
}
</style>
兄弟选择器
1、选择下一个兄弟
语法：兄+弟{}
<style>
p+span{
color:blue;
font-size:20px;
}
</style>
2、选择下面的所有兄弟
语法：兄~弟{}
<style>
p~span{
color:blue;
font-size:20px;
}
</style>
属性选择器
语法：
[属性名]：选择含有该属性的元素
[属性名=属性值]：选择含有属性和属性值的元素
[属性名^=属性值]：选择属性名以属性值为开头的元素
[属性名$=属性值]：选择属性名以属性值为结尾的元素
[属性名*=属性值]：选择属性名中包含属性值的元素
<head>
<style>
p[title]{
color:red;
}
p[title=abc]{
color:black;
}
p[title^=abc]{
color:blue;
}
p[title$=abc]{
color:chocolate;
}
p[title*=abc]{
color:grey;
}
</style>
</head>
<body>
<p title="abc">周深</p>
<p title="abcdef">歌手</p>
<p title="blueabc">光亮</p>
<p title="defabcgh">和光同尘</p>
</body>
伪类选择器
伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素。伪类的语法一般情况下都是以：开头。
1、：first-child、：last-child、：nth-child
：first-child表示第一个子元素
：last-child表示最后一个子元素
：nth-child()表示选中第n个元素，()中的特殊值可以为n（表示第n个元素）；2n或even（表示选中偶数位的元素）；2n+1或odd（表示选中奇数位的元素）
<head>
<style>
ul>li:first-child{
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>jkl</li>
<li>mno</li>
</ul>
</body>
结果是abc变色。
注：这些伪类都是根据所有的子元素进行排序
e.g当列表ul中的第一个子元素不是li标签时，使用：first-child、：nth-child标签则无效。
<head>
<style>
ul>li:first-child{
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<span>26个英文字母</span>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>jkl</li>
<li>mno</li>
</ul>
</body>
结果没有任何元素变色！
2、：first-of-type、：last-of-type、：nth-of-type()
：first-of-type
：last-of-type
：nth-of-type()
这些伪类含义与上述相似，不同点在于他们是在同类型元素中进行排序
<head>
<style>
ul>li:first-of-type{
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<span>26个英文字母</span>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>jkl</li>
<li>mno</li>
</ul>
</body>
结果abc变色！
3、：not()
是否定伪类，表示将符合括号内条件的元素从选择器中除去。
<head>
<style>
ul>li:not(:first-child){
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<span>26个英文字母</span>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>jkl</li>
<li>mno</li>
</ul>
</body>
结果：除了“26个英文字母”以外都变色！
超链接a的伪类
1、:link和:visited
:link用来表示没访问过的链接（正常的链接）
:visited用来表示访问过的链接
<head>
<style>
a:link{
color:brown;
}
a:visited{
color:blue;
}
</style>
</head>
<body>
<a href="https://baidu.com">链接1</a>
<a href="https://taobao.com">链接2</a>
</body>
结果：如果链接没访问过则为棕色，访问过则为蓝色。
注：由于隐私的原因，visited这个伪类只能修改链接颜色！！！
2、:hover和:active
:hover用来表示鼠标移入的状态
:active用来表示鼠标点击
<head>
<style>
a:hover{
color:brown;
font-size: 60px;
}
</style>
</head>
<body>
<a href="https://baidu.com">链接1</a>
<a href="https://taobao.com">链接2</a>
</body>
结果：鼠标移到链接上时，链接颜色变成棕色并且字体变成60px
<head>
<style>
a:active{
color:brown;
font-size: 60px;
}
</style>
</head>
<body>
<a href="https://baidu.com">链接1</a>
<a href="https://taobao.com">链接2</a>
</body>
结果：鼠标点击链接的一瞬间，链接颜色变成棕色并且字体变成60px
伪元素选择器
伪元素表示页面中一些特殊的并不真实的存在的元素（特殊的位置）语法一般使用::开头
::first-letter表示第一个元素
<head>
<style>
div::first-letter{
font-size: 50px;
}
</style>
</head>
<body>
<div>Hello,how are you</div>
</body>
结果：第一个字母H变大。
::first-line表示第一行
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::first-line{
color: chocolate;
}
</style>
</head>
<body>
<div>Hello,how are you</div>
</body>
</html>
结果：第一行内容变色。
::selection表示选中的内容
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::selection{
color: yellowgreen;
}
</style>
</head>
<body>
<div>Hello,how are you</div>
</body>
</html>
结果：被选中的内容变色
::before表示元素的开始
::after表示元素的结束（这两个伪元素经常使用）
before和after必须结合content属性来使用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::before{
content: 'abc';
color: chocolate;
}
</style>
</head>
<body>
<div>Hello,how are you</div>
</body>
</html>
结果：div中的内容前有abc且为巧克力色。
2、继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先和后代之间的，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式。
注意：并不是所有的样式都会被继承，比如背景相关的，布局相关等的这些样式都不会被继承。
3、选择器的权重
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突，当发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
优先级：
| 选择器 | 权重 |
|---|---|
| 内联选择器 | 1,0,0,0 |
| id选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后谁的优先级最高，就优先显示，分组计算器是分别计算的，选择器的累加不会超过最大的数量级，比如类选择器再高也不会超过id选择器；如果优先级计算后相同，则优先显示靠后的样式！
注：可以在某一样式后加上!important，则此时样式会获取到最高的优先级，甚至超过内联样式。但在开发时一定要慎用！
4、一些单位
长度单位
像素：屏幕（显示器）实际上是由一个一个的小点构成，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
百分比：可将属性值设置为相对于其父元素属性的百分比，优点是设置百分比可以使子元素随着父元素的改变而改变。
em：相对于元素的字体大小来计算的，1em=1font-size，优点是em可以根据font-size的改变而改变
rem：相对于根元素的字体大小计算的，即只有改变html页面的font-size才可以。
颜色单位
颜色单位：RGB值、RGBA、十六进制的RGB值、HSL值
RGB值：通过三种颜色的不同浓度来调配出不同的颜色，每一种颜色的范围在0-255（0%-100%）之间。语法：RGB(红色，绿色，蓝色)
RGBA：在以上的基础上加了一个a表示不透明度。a=1表示完全不透明，0表示完全透明，0.5表示半透明。
十六进制的RGB值：语法#红色绿色蓝色，颜色浓度通过00-ff表示（连续字母重复可以简写）比如#00ffaa，也可以写成#0fa
HSL值：H：色相（0-360）；S：饱和度（0%-100%）；L：亮度（0%-100%）
四、CSS盒子模型
文档流
文档流：网页是一个多层的结构，一层摞着一层，可以通过CSS来分别为每一层设置样式，作为用户只能看到最上面一层。在这些层中，最底下一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列的。
块元素在文档流中的特点：
1、永远独占一行（自上向下垂直排列）
2、默认宽度是父元素的全部
3、默认高度是内容大小
行内元素在文档流中的特点：
1、行内元素自左向右水平排列
2、默认高度和宽度都是内容大小。
盒子模型
CSS将页面中的所有元素设置为一个矩形的盒子，那么对页面的布局就变成了将不同的盒子摆放到不同的位置。每个盒子都由以下部分组成：内容（content）、边框（border）、内边距（padding）、外边距（margin）
1、内容
元素中的所有子元素和文本内容都在内容区排列，内容区的大小由width和height两个属性来设置
2、边框
边框属于盒子的边缘，边框里边属于盒子的内部，外边属于盒子的外部。边框的大小会影响到整个盒子的大小
设置边框必须的三个要素：边框的宽度（border-width）、边框的颜色（border-color）、边框的样式（border-style）
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
border-width: 10px;
border-color: blueviolet;
border-style: solid;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">Hello,how are you</div>
</body>
边框的宽度（border-width）
默认值为3px，同时也可以为四个边设置大小，四个值由空格隔开。四个值的顺序为上右下左，若为三个值，分别为上，左右，下；若为两个值分别为上下，左右。除了border-width以外，还可以使用border-xxx-width，其中xxx可以为top，right，bottom，left表示单独指定某一边的宽度
边框的颜色（border-color）
如果省略不写，就默认为color的颜色。其他规则与边框宽度相同。
边框的样式（border-style）
默认值是none，边框的样式值有：solid表示实线，dotted表示点状虚线，dashed表示虚线，double表示双线
对于边框样式可以进行简写：（顺序可以改变）
border:solid 10px orange;
也可以对于其中一边设置简写（语法：border-xxx：）
border-top:solid 10px orange;
3、内边距
内边距：内容区和边框之间的距离，一共有四个方向的距离，padding-top(right,bottom,left),内边距的大小会影响到盒子的大小，若内边距变大，背景颜色也会自动延伸到内边距上。
一个盒子的可见框大小是由内容区、内边距和边框共同决定的！
padding也可以简写，与边框简写相同
4、外边距
外边距不会影响到盒子可见框的大小，但是会影响到盒子的位置。一共有四个方向上的外边距：margin-top（right,bottom,left）。因为元素在页面中是自左向右的顺序序排列的，所以默认情况下如果设置左和上外边距则会移动元素本身，而设置下和右则会移动其他元素margin也可以设置负值，若为负值则元素会以相反的方向移动。
margin可以简写，用法与边框简写相同。
注：默认情况下设置margin-right不会产生任何效果！！！
水平方向的布局
一个子元素在其父元素的内容区存在的。元素在欺负元素中的水平方向的位置是由以下属性共同决定的：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right
一个元素在其父元素的水平方向上的位置应必须满足以下等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度
以上等式必须满足，如果相加结果不成立，则称为过渡约束，则等式会自动调整。
调整原则：
1、如果这七个值都没有设置为auto时，会自动调整margin-right以使等式成立。
2、这七个值中，有三个值可以设置为auto，分别是width,margin-left,margin-right。如果有一个auto，那么自动调整auto的；如果有两个设置为auto，且其中一个是宽度width，那么宽度自动调整到最大，外边距为0,；如果三个值都是auto，则宽度最大，外边距都为0；如果设置两个外边距为auto，宽度固定值，那么会调整两个外边距的值相同，一般用于水平居中。
垂直方向的布局
如果子元素的大小超过了父元素，则子元素会从父元素中溢出。一般使用overflow属性来设置父元素如何处理溢出的子元素。
overflow的可选值有：
1、visible：默认值，子元素会从父元素中溢出，在父元素的外边显示
2、hidden：溢出的内容被裁减不会显示
3、scroll：出现两个滚动条，可以通过滚动条查看完整内容
4、auto：根据需要生成水平或垂直方向上的滚动条
overflow也可以规定某一方向的：overflow-x，overflow-y
外边距的折叠
相邻的垂直方向上的外边距会发生重叠现象。关于重叠，兄弟元素间和父子元素不太相同。
兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（当两者均为正值的情况下）；若一正一负，则相加；若均为负值，则取绝对值较大的。
兄弟元素之间的外边距的重叠对于开发是有利的，故无需进行处理。
父子元素：父子元素间相邻外边距，子元素发生改变会传递给父元素（上外边距），故父子外边距的折叠会影响到布局，必须要进行处理。
行内元素的盒模型
行内元素不支持设置width和height；行内元素可以设置padding，且垂直方向的padding不会影响页面布局；行内元素可以设置border，垂直方向的border不会影响页面布局；行内元素可以设置margin，垂直方向的margin不会影响页面的布局。
display：用来设置元素的类型。可选值有：
1、inline：将元素设置为行内元素
2、block：将元素设置为块元素
3、inline-block：将元素设置为行内块元素（行内块元素：既可以设置高度和宽度you不会独占一行）
visibility：用来设置元素的显示状态。可选值有：
1、visible：默认值，元素在页面正常显示
2、hidden：元素在页面中不显示（隐藏），但是会占据页面中的位置
浏览器的默认样式
通常情况下，浏览器会为元素设置默认样式，默认样式的存在会影响到页面的布局，故在编写页面时会去除掉浏览器的默认样式。有三种方式可以去除：
1、若写一个小demo，可以直接在页面的head标签里添加以下语句：
<style>
*{
margin:0;
padding: 0;
}
ul{
list-style: none; /*将无序列表前的符号去掉*/
}
</style>
2、使用reset.css文件，在页面的head标签中使用link引入该文件。
3、使用normalize.css文件，在页面的head标签中使用link引入该文件。
盒子的大小
默认情况下，一个盒子的可见框大小是由内容区、内边距和边框共同决定的。width和height的大小决定盒子内容区的大小。
box-sizing：是用来设置盒子的大小。（即改变width和height的设置意义）
可选值有：
1、content-box：默认值，即width和height用来设置内容区的大小
2、border-box:width和height用来设置整个盒子的可见框大小。
轮廓阴影和圆角
1、轮廓
outline：用来设置元素的轮廓，用法和border一模一样。轮廓与边框的不同点在于轮廓不会影响到可见框的大小。
outline:10px red solid;
2、阴影
box-shadow：用来设置元素的阴影效果，阴影和轮廓一样不会影响页面的布局效果。
第一个值：水平偏移量，正值向右移动，负值向左
第二个值：垂直偏移量，正值向下移动，负值向上
第三个值：阴影的模糊半径（单位：px）越大越模糊
第四个值：阴影的颜色，通常可用RGBA,RGB
box-shadow：10px 10px 10px RGBA(0,0,0,.3)
3、圆角
border-radius：用来设置圆角，圆角设置的是圆的半径大小。单位：px
当然也可以单独为四个角设置：border-top-left-radius、border-bottom-left-radius、border-top-right-radius、border-bottom-right-radius
这四个的值可以有两个，分别表示x方向上的，y方向上的(两个值不同则显示椭圆角)
border-top-left-radius:20px 50px;
通常情况下都直接使用border-radius同时为4个角设置，它也可以存在任意四个以内的值：
1、四个值时：左上、右上，右下，左下
2、三个值时：左上、右上/左下、右下
3、两个值时：左上/右下、右上/左下
4、也可以同时为四个角设置椭圆角，那么这两个值之间用/隔开
border-radius:20px/40px;
5、也可以设置为圆形：
border-radius:50%;
五、网页布局
浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动。，一般使用float属性来设置元素的浮动。float属性的可选值有：none表示元素不浮动（默认值）；left表示元素向左移动；right表示元素向右移动。
注：元素设置浮动以后，水平布局的等式便无需强制成立；元素设置浮动以后，便从文档流中脱离，不再占用文档流中的位置，那么此元素后的还存在于文档流中的元素将会自动上移。
浮动的特点：
1、浮动的元素完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后的元素会向其父元素的左侧或右侧移动，但不会脱离其父元素。
3、浮动元素向其父元素的左侧或右侧移动时，不会超过它前边其他的浮动元素
4、如果浮动元素的上边是一个没有浮动的元素，由于上边的这个元素依然占据文档流中的位置，这个元素将无法上移。
5、浮动元素不会超过他上边浮动的兄弟元素。
总结：浮动的作用目前来说主要是将页面中的元素可以水平排列，通过浮动可以制作一些水平方向上的布局
6、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以可以利用浮动来设置文字环绕图片的效果
元素脱离文档流之后，元素的一些特点也会发生改变：（脱离文档流的特点：）：
块元素：
1、不会再独占页面的一行
2、脱离文档流之后，块元素的高度和宽度默认都被内容撑开
行内元素：
行内元素脱离文档流之后会变成块元素，特点和块元素一样
总结：脱离文档流之后的元素，不会再区分块和行内了。
浮动存在的问题：
浮动最致命的问题是会产生高度塌陷。在浮动布局下，若一开始没有为某一父元素设置其高度，那么该父元素是被其子元素的最大内容撑开的。而当子元素浮动后，会完全脱离文档流，将无法撑起父元素的高度，导致父元素高度丢失，那么父元素之后的元素会自动上移，布局变得混乱，形成高度塌陷。高度塌陷是浮动布局中嘴常见的问题。
高度塌陷
高度塌陷的解决方案：
1、一开始就为父元素设置高度
2、BFC（块级格式化环境）
3、利用clear和::after结合来解决高度塌陷
1、BFC
BFC是一个CSS中隐含的属性，一个元素可以开启BFC，开启BFC后的元素会变成一个独立的布局区域。
元素开启BFC后的特点：
1、开启BFC的元素不会被浮动的元素所覆盖
2、开启BFC的子元素和父元素的外边距不会重叠（由于子元素的外边距和父元素的外边距重叠，如果子元素的外边距发生改变，那么将会传递给父元素。如果此时给父元素开启BFC，那么子元素外边距的改变 将不会影响到父元素）
3、开启BFC的元素可以包含浮动的子元素
如何开启一个元素的BFC：
1、将元素设置浮动（不推荐使用）
2、将元素设置为行内块元素（display:inline-block）（不推荐使用）
3、设置overflow的值为非visible（可为hidden，auto）
2、clear和::after伪类结合
clear
如果我们不希望某个元素因为其他元素的浮动产生影响而改变位置，可以通过设置clear来清除浮动元素对当前元素所产生的影响。
clear的作用：清除浮动元素对当前元素所产生的影响。可选值有：
1、left：清除左侧浮动元素对当前元素所产生的影响
2、right：清除右侧浮动元素对当前元素所产生的影响
3、both：清除两侧中最大影响的那侧
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
clear和::after伪类结合
<head>
<style>
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color:black;
float:left;
}
.box1::after{
content: '';
display: block;
clear: both;
}/*相当于在box1后增加一个空内容，并设置为块元素独占一行，这样就可以将父元素包含它浮动的子元素，解决了高度塌陷的问题*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
3、clearfix（推荐）
clearfix这个样式可以很好的解决高度塌陷和父子元素外边距重叠的问题。
<head>
<style>
.box1{
width: 200px;
height: 200px;
background-color:bisque;
}
.box2{
width: 100px;
height: 100px;
background-color:black;
margin-top: 100px;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;/*最好设置为table*/
clear:both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2 clearfix"></div>
</div>
</body>
定位
定位是一种更加高级的布局手段。通过定位可以将元素摆放到页面的任意位置。使用position属性来设置定位。可选值有：
1、static：默认值，不开启定位
2、relative ：开启元素的相对定位
3、absolute：开启元素的绝对定位
4、fixed：开启元素的固定定位
5、sticky：开启元素的粘滞定位
1、相对定位
当元素的position属性值设置为relative时，开启了相对定位。
偏移量：
当元素开启了相对定位，可以通过偏移量来设置元素的位置。属性有top、bottom、left、right。
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：
right：
注：定位元素垂直方向上的位置由top和bottom两个属性来控制，通常情况下选其一即可，定位元素水平方向上的位置由left和right两个属性来控制，通常情况下选其一即可。top值越大，元素越往下移动，bottom值越大，元素越往上移动；
相对定位的特点：
1、元素开启相对定位后，如果不设置偏移量，元素将不会发生任何改变。
2、相对定位是参照于元素在文档流中的位置定位的
3、相对定位会提升元素的层级（如调整某元素的相对定位后和别的元素重叠，那么只显示开启了相对定位的元素）
4、相对定位不会使元素脱离文档流
5、相对定位不会改变元素的性质，块还是块，行内还是行内
2、绝对定位
当元素的position的属性值设置为absolute时，开启了元素的绝对定位。
绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生任何变化
2、开启绝对定位后，元素会从文档流中脱离
3、绝对定位会改变元素的性质，行内元素变成块，块的宽高会被内容撑开
4、绝对定位会是元素提升一个层级
5、绝对定位是根据包含块进行定位的
包含块：
1、正常情况下，包含块就是离当前元素最近的祖先块元素
2、绝对定位的包含块就是离它最近的开启了定位的祖先元素，若所有的祖先元素都没有开启定位，那么根元素就是他的包含块（html），html是根元素也叫初始包含块
3、固定定位
当元素的position属性值设置为fixed时，开启了元素的固定定位。
固定定位的特点和绝对定位大部分都一样，唯一区别就是固定定位是根据网页的视口进行定位的，即固定定位的元素不会随着网页的滚动条滚动。
4、粘滞定位
当元素的position属性值设置为sticky时，开启了元素的粘滞定位。
粘滞定位的特点和相对定位基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
position:sticky;
top:10px;
绝对定位元素的位置
当一个元素开启了绝对定位后：
1、水平方向上的布局等式，需要添加left和right两个值。当发生过渡约束条件时：若九个值中都没有设置auto时，会自动调整right以使等式成立；如果有auto，则会自动调整值为auto的属性。其中可以设置为auto的属性有：left、right、margin、width。==如果没有为left和right设置属性值，则会自动调整这两个属性，因为他们默认属性值为auto。
2、垂直方向上的布局等式也必须满足：
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height+bottom=包含块的宽度
元素的层级
对于开启了定位元素，可以通过z-index属性来设置元素的层级。
z-index需要一个整数作为参数，值越大，层级越高，元素层级越高，越优先显示。如果元素的层级相同，则优先显示靠后的元素。祖先的层级再高也不会盖住后代的元素
六、字体和背景
字体样式
字体样式有：color、font-size、font-family
1、color：字体的颜色
2、font-size：字体的大小
em和rem：em相当于当前元素的一个font-size；rem相当于根元素的font-size。
3、font-family：字体族（字体的格式），可选值有：serif（衬线字体）、sans-serif（非衬线字体）、monospace（等宽字体），这些可选值都是字体的类别，指定字体的类别，浏览器会自动使用该类别的字体。字体簇可以同时指定多个字体，多个字体使用，隔开，字体生效时优先使用第一个（按顺序执行）
补充：@font-face可以将服务器中的字体直接提供给用户去使用，将字体文件下载到文件夹中，在使用@font-face引入即可：
<style>
@font-face{
font-family:'myfont'; /*字体名字*/
src:url('./font/......'); /*字体文件的地址*/
}
</style>
注:使用font-face的问题：1、由于是文件，故浏览器需要加载，会耗时 2、某些字体文件会有版权问题
图标字体
iconfont：在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片的大小本身比较大，并且非常的不灵活，所以在使用图标时，可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入。即可以通过字体的形式来使用图标。直接通过类名来使用图标字体。
语法：class="fas+图标名"或者class=“fab+图标名”
<i class="fas fa-fish" style="color:cornflowerblue"></i>
图标字体的使用方式：（与伪类结合、与实体结合）
<head>
<link rel="stylesheet" href="./实践练习/css/reset.css">
<link rel="stylesheet" href="./实践练习/iconfont/css/all.css">
<style>
li::before{
content: '\f124';/*查询图标字体的编码得到的值*/
font-family: 'Font Awesome 6 Free';/*查看all.css文件找到fab或fas，将其font-family复制过来*/
font-weight: 900; /*与上句相同*/
margin-right: 5px;
}
</style>
</head>
<body>
<ul>
<li>周深</li>
<li>光亮</li>
<li>和光同尘</li>
</ul>
<i class="fas"></i> <!--与实体结合生成图标字体-->
</body>
总结：通过伪元素来设置图标字体：
1、找到要设置图标的元素通过before或after选中
2、在content中设置字体的编码
3、设置字体的样式
行高
行高是指文字占有的实际高度，可以通过line-height来设置行高。行高可以直接指定一个大小（单位为px，em），也可以直接设置为一个整数，若为整数，则表示行高会是字体指定的倍数。
行高也经常用来设置行间距：行间距-行高-字体大小。
**补充：**可以使用font直接设置字体相关的所有属性。
语法：font:字体大小/行高 字体族
font:50px/2 微软雅黑,Times,serif
行高可以省略不写，如果不写使用默认值
当然也可以在这两个值前加其他的值：
font: bold italic 50px/2 微软雅黑,Times,serif
文本的样式
**text-align：**用来设置文本的水平对齐，可选值有：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）
**vertical-align：**设置元素垂直对齐的方式，可选值有：baseline（默认值，基线对齐）、top（顶部对齐）、bottom（底部对齐）、middle（居中对齐）
**text-decoration：**设置文本修饰。可选值有：none（什么都没有）、underline（下划线）、line-through（删除线）、overline（上划线）
**while-space：**设置网页如何处理空白。可选值有：normal（正常）、nowrap（不换行）、pre（保留空白）
e.g.某一很长的文本，要求只保留前面几个单词，后面的用省略号表示。
<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>Document</title>
<link rel="stylesheet" href="./实践练习/css/reset.css">
<style>
p{
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="text-list">Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference.</p>
</body>
</html>
结果：
背景
**background-color:**设置背景颜色。
**background-image:**设置背景图片
可以同时设置背景颜色和背景图片，这样背景颜色将会成为图片的背景色
如果背景图片小于元素的大小，那么背景图片将会自动平铺将元素铺满
如果背景图片大于元素的大小，那么背景将有一部分无法完全显示。
background-image: url("./img/......")
**background-repeat：**用来设置背景的重复方式，可选值有：repeat（默认值，背景会沿着x轴，y轴双方向重复）、repeat-x（沿着x轴重复）、repeat-y（沿着y轴重复），no-repeat（不重复）
**background-position：**用来设置背景图片的位置。设置方式：通过top，bottom、left、right、center来设置背景图片的位置。注：必须同时设定两个值，如果只有一个那么默认第二个值为center。
background-position:left top;
或者也可以通过偏移量来设置背景图片的位置。
background-position:10px 10px;
background-size：设置背景图片的大小。第一个值表示宽度，第二个值表示高度，如果只写第一个，那么第二个值默认为auto。也可以直接设置为cover和contain。cover：图片的比例不变，会将元素铺满；contain：图片的比例不变，但图片会在元素里完整显示。
background-origin：设置背景图片偏移量计算的原点。可选值有：padding-box（默认值，background-position从内边距处开始）、content-box（background-position从内容区处开始）、border-box（background-position从边框处开始）
background-clip：设置背景的范围。可选值有：border-box（默认值，背景会出现在边框的下方）、padding-box（背景不会出现在边框，只出现在内容区和内边距）、content-box（背景只会出现在内容区）
background-attachment：设置背景图片是否跟随元素移动。可选值：scroll（默认值：背景图片会跟随元素一起移动）、fixed（背景图片会固定在页面中，不会随元素移动）
background的简写属性：所有背景相关的样式都可以通过background直接来设置，并且该属性没有顺序要求，也没有哪个属性是必须要写的。
注：1、background-size必须要写在background-position的后边，并且要用/隔开
2、background-origin和background-clip这两个样式，origin要在clip的前面。
background: url(./img/...png) #DDDDDD center center/contain border-box content-box no-repeat;
背景实现
由于浏览器一开始需要将背景图片加载，所以在第一次打开网页时可能会出现部分图片闪烁的问题，解决方法是将多个小图片保存到一个大图片中，然后通过调整background-position来显示，这样图片会同时加载到页面中可以有效避免图片闪烁的问题。该技术在网页应用中十分广泛被称为CSS-Scprite，这种图成为雪碧图。
e.g.要求：刚打开网页时显示第一个按钮，鼠标移入时显示第二个按钮，鼠标点击时显示第三个按钮。
<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>雪碧图练习</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
a:link{
display: block;/*a为行内元素无法设置宽高，所以需要转换一下*/
width: 93px;
height: 28px;
background-image: url("./img/01/btn.png");
}
a:hover{
background-position: -93px 0;
}
a:active{
background-position: -186px 0;
}
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
总结：雪碧图的实现步骤：
1、先确定要使用的图标
2、测量图标的大小
3、根据测量结果创建一个元素
4、将雪碧图设置为元素的背景
5、设置偏移量以显示正确的图片
渐变
通过渐变可以设置一些复杂的背景颜色，可以实现一个颜色向其他颜色过渡的效果。渐变式是图片，需要通过background-image来设置。
线性渐变：颜色沿着一条直线变化，使用linear-gradient来设置。
线性渐变
linear-gradient（red yellow）：红色在开头，黄色在结尾，中间是过渡区域，也可以指定颜色渐变的方向。比如：to-top,to-bottom,to-left,to-right,deg(deg表示度数)，turn（表示圈）
background-image:linear-gradient(to-top,red,yellow);
渐变也可以指定多个颜色，多个颜色默认情况下均匀分布，也可以手动指定渐变的分布情况。例如以下语句表示0-50px是红色，从50px开始渐变成黄色。
background-image:linear-gradient(red 50px,yellow);
同样也可以设置让其重复：repeating-linear-gradient设置颜色重复渐变
background-image:repeating-linear-gradient(red 50px,yellow 100px);
径向渐变
radial-gradient():径向渐变（放射性的效果）
默认情况下径向渐变的形状是根据元素的形状来计算的，如果元素形状为正方形，那么径向渐变则为圆形，如果为长方形，则径向渐变的形状为椭圆。也可以手动设置径向渐变的大小（circle、ellipse等），也可以指定渐变的位置：
background-image:radial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置)
大小可以设置为：circle、ellipse（椭圆）、closest-side（近边）,closest-corner（近角）,farthest-side（远边）,farthest-corner（远角）
位置可以设置为：top，right,left,bottom,center
七、表格
表单
在现实生活中表单用于提交数据。在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器。
使用form标签来创建一个表单。
form标签中使用action属性表示表单需要提交的服务器的地址。
输入：
1、文本框
<input type="text" name="username">
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
2、密码框
<input type="password" name="password">
3、单选按钮
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
像这种选择框必须指定value属性，value属性最终会作为用户填写的值传递给服务器。
也可以给其中一个单选按钮框作为默认选中，使用checked即可
4、多选按钮
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
5、提交按钮
<input type="submit" value="注册">
6、下拉列表
<select name="haha">
<option value="i">选项一</option>
<option value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
结果：
7、普通按钮
<input type="button">
8、重置按钮
<input type="reset">
上面这两种和提交按钮也可以直接使用button标签来设置：
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
9、颜色选择框
<input type="color">
10、电子邮件框
<input type="email">
补充一些属性：
1、autocomplete：如果设置为autocomplete="off"表示关闭自动补全
2、readonly：将表单项设置为只读，数据会提交
3、disabled：将表单项设置为禁用，数据不会提交
4、autofocus：设置表单项自动获取焦点
八、过渡和动画
过渡
transition（过渡）：通过过渡可以指定一个属性发生变化时的切换方式。通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property：指定要执行过渡的属性。
多个属性之间用，隔开，如果所有属性都需要过渡，则使用all关键字。
大部分属性都支持过渡效果。注：过渡是必须是一个有效值向另外一个有效值过渡；
transition-duration：指定过渡效果的持续时间。
transition-timing-function：过渡的时序函数。可选值有：
1、ease：默认值，慢速开始，先加速，再减速
2、linear：匀速运动
3、ease-in：加速运动
4、ease-out：减速运动
5、ease-in-out：先加速后减速
6、cubic-bezier（）：
7、steps（）：分步执行过渡效果。可以设置一个第二个值：
end：表示在时间结束时执行过渡（默认值）
start：表示时间开始时执行过渡
transition-timing-function:steps(2,end);
transition-delay:过渡效果的延迟，等待一段时间后在执行过渡
当然transition也可以简写，通过transition可以同时设置过渡相关的所有属性，只有一个要求：如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。
动画
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行每一个步骤。
其中from也可以写成0%，to可以写成100%
@keyframes test{
from{
}
to{
}
}
animation-name：要对当前元素生效的关键帧的名字
animation-duration：动画持续时间（与过渡类似）
animation-delay：动画延迟（与过渡类似）
animation-timing-function：动画时序函数（与过渡类似）
animation-iteration-count：动画执行的次数。可选值：一个整数或者infinite（无限次）
animation-direction：指定动画运行方向。可选值：normal（默认值，从from到to），reverse（从to到from），alternate（从from到to，然后to到from，重复执行动画时反向执行）
animation-play-state：设置动画的执行状态，可选值有：running（默认值，动画执行），paused（动画暂停）
animation-fill-mode：动画的填充模式。可选值：none（默认值，动画执行完毕回到原来的位置），forwards（动画执行完毕停在结束的位置），backwards（动画延迟等待时，元素就处于开始位置），both（结合forwards和backwards）
九、变形和平移
变形平移
变形就是通过CSS来改变元素的形状或位置。变形不会影响到页面的布局。
transform用来设置元素的变形效果。可选值：
平移：
translateX（）：沿着X轴方向平移。
translateY（）：沿着Y轴方向平移。
translateZ（）：沿着Z轴方向平移。
transform: translateX(100px);
也可以是百分比，如果是百分比，那么是相对于自己的百分比。
transform: translateX(10%);
z轴平移：调整元素在z轴的位置，，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近。
Z轴平移属于立体效果，（近大远小），默认情况下网页是不支持透视，如果想要看见效果，必须要设置网页的视距。
设置视距：
<html>
perspective: 800px;
</html>
旋转
使用transform，通过旋转可以使元素沿着x，y或z旋转指定的角度。
rotateX（）：沿X轴旋转
rotateY（）：沿Y轴旋转
rotateZ（）：沿Z轴旋转
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(.25turn);
补充：如果不想让某一背景图片旋转180度后显示其背面，可以使用backface-visibility：backface-visibility: hidden;
缩放
对元素进行缩放的函数：
scaleX（）：水平方向缩放
scaleY（）：垂直方向缩放
scale（）：双方向缩放
transform:scale();
transform-origin:指定变形的原点，默认值为center
transform-origin: 20px 0;
十、less
less是一门CSS的预处理语言。less是CSS的增强版。使用less可以编写更少的代码实现更强大的样式。在less中添加了很多的新特性，向对变量的支持，对mixin的支持…less的语法大体上与CSS语法一致，但是less中添加了许多对CSS的扩展，所以浏览器无法直接执行less代码，要执行必须将less转换为CSS，然后再由浏览器执行。
less文件中的注释为//
变量
可以为一些属性值或是类名设置变量，当发生改变时，只需修改定义的即可，维护起来十分方便。
变量：在变量中可以存储一个任意的值，并且可以在需要时任意修改变量的值。语法：@变量名.(使用类名变量时需要注意！！！)
@a: 200px;
@b:box6;
.box{
width:@a;
height:@a;
background-image:url("@{b}/img/1.png");
}
.@{b}{
width:@a;
}
也可以使用$符号来引用之前的属性值：
.box4{
background-color: blanchedalmond;
color: $background-color;
}
& 符号：表示外层的父元素：
在less文件中这样写：
.box{
&:hover{
color: bisque;
}
}
那么在css文件中就表示
.box:hover {
color: bisque;
}
:extend() 表示对当前选择器扩展指定选择器的样式。
在less文件中这样写：
.box{
width: 100px;
}
.box2:extend(.box){
}
那么在css文件中：
.box,
.box2 {
width: 100px;
}
Mixin混合函数 ：直接对指定样式进行引用相当于将样式进行复制。使用类选择器时可以在选择器后边加上一个括号，这时实际上就创建了一个mixin函数。
在less文件中这样写：
.box(){
width: 100px;
}
.box2{
.box;
}
那么在css文件中：
.box2 {
width: 100px;
}
注：此时box是不会显示在css文件中的！！！
混合函数：在混合函数中可以直接设置变量，然后在其他的类中调用。
在less文件中这样写：
.box(@x,@y,@z){
width: @x;
height: @y;
color: @z;
}
.box2{
.box(200px,100px,red);
}
那么在css文件中：
.box2 {
width: 200px;
height: 100px;
color: red;
}
less其他补充
1、在less中所有的数值都可以直接进行运算
.box{
width: 100px+100px;
height: 50px*2;
}
2、可以将其他的less文件引入到当前的文件中，做一个模块化处理。
@import "style.less";
十一、弹性盒
flex（弹性盒，伸缩盒）：是css中的又一布局手段，他主要用来代替浮动来完成页面的布局。flex可以是元素具有弹性，让元素可以根据页面的大小的改变而改变。
弹性容器：要使用弹性盒，必须先讲一个元素设置为弹性容器。通过display来设置弹性容器。
display: flex; /*设置为块级弹性容器*/
display: inline-flex; /*设置为行内的弹性容器*/
弹性元素：弹性容器的直接子元素成为弹性元素（弹性项）。弹性元素也可以同时为弹性容器。
flex-direction：指定容器中弹性元素的排列方式。可选值有：
1、row：弹性元素在容器中水平排列（左向右）
2、row-reverse：弹性元素在容器中反向水平排列
3、column：弹性元素在容器中纵向排列（自上向下）
4.column-reverse：弹性元素在容器中反向纵向排列
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴
弹性元素的属性：
flex-grow：指定弹性元素的伸展的系数。当父元素有多余的空间时，子元素如何伸展。0表示不伸展为默认值。
flex-shrink：指定弹性元素的收缩系数。当父元素的空间不够容纳所有的子元素时，如何对所有子元素进行伸缩。
弹性容器
flex-wrap：设置弹性元素是否在弹性容器中换行。可选值有：
nowrap：默认值，元素不会自动换行。
wrap：元素沿着辅轴的方向换行。
wrap-reverse：元素沿着辅轴的反方向换行。
flex-flow：结合wrap和direction的简写属性
flex-flow: row wrap;
justify-content：如何分配主轴上的空白空间。可选值：
flex-start：元素都沿着主轴起边排列
flex-end:元素都沿着主轴终边排列
center：元素沿着主轴居中排列
space-around：空白分布到元素两侧
space-between：空白均匀分布到元素间
space-evenly:空白分布到元素的单侧
align-items：元素在辅轴上如何对齐。元素间的关系。可选值有：
stretch：默认值，将元素的长度设置为相同的值
flex-start：元素不会拉伸，沿着辅轴的起边对齐
flex-end:沿着辅轴的终边对齐
center：居中对齐
baseline：基线对齐
align-content：辅轴空白空间的分布。可选值有：
flex-start：元素都沿着辅轴起边排列
flex-end:元素都沿着辅轴终边排列
center：元素沿着辅轴居中排列
space-around：空白分布到元素两侧
space-between：空白均匀分布到元素间
space-evenly:空白分布到元素的单侧
align-self：用来覆盖当前弹性元素上的align-items。（单独为某个元素设置来覆盖）
弹性元素
flex-grow：指定弹性元素的伸展的系数。（默认为1）
计算方式是按比例分配。
flex-shrink：指定弹性元素的收缩系数。（默认为1）
缩减系数的计算方式比较复杂，缩减的多少是根据缩减系数和元素大小计算的。
flex-basic：指定元素在主轴上的基础长度，如果主轴是横向的，那么这个属性指定元素的宽度；如果主轴是纵向的，那么这个属性指定元素的高度。默认值是auto，表示元素参考自身的高度和宽度。
注：
可以使用flex属性来进行简写上面三个样式。flex：增长 缩减 基础；（按照这个顺序来）可以自己指定，也有一些可选值：
1、initial：表示“flex：0 1 auto”
2、auto：表示“flex：1 1 auto”
3、none：表示“flex：0 0 auto” 弹性元素没有弹性
order：指定弹性元素的排列顺序。
像素
屏幕是由一个个发光的小点构成，这一个个小点就是像素。分辨率：1920×1080.说的就是屏幕中像素点的数量。在前端开发中像素需要分成两种情况讨论，CSS像素和物理像素。
物理像素：1920×1080的小点就是物理像素
CSS像素：编写网页时，所用的像素就是CSS像素。
浏览器显示网页时，需要将CSS像素转换为物理像素然后再呈现。
一个CSS像素最终由几个物理像素显示，由浏览器决定，默认情况下在pc端，一个CSS=像素等于一个物理像素。
视口（viewport）：视口就是屏幕中用来显示网页的区域。可以通过查看视口的大小来观察CSS像素和物理像素的比值。
移动端的像素
在不同的屏幕，单位像素的大小是不同的。像素越小屏幕越清晰。智能手机的像素远远小于计算机的像素点。
默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动将网页缩放以完整显示网页。
移动端默认的视口大小是980像素，编写移动页面时，必须确保有一个比较合理地像素比：1CSS像素对应两个物理像素等。
解决方法：通过meta标签来设置视口的大小。每一款移动设备设计时，都会有一个最佳像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小成为完美视口。
<meta name="viewport" content="width=device-width">
十二、媒体查询简介
响应式布局
网页可以根据不同的设备和不同的窗口大小呈现出不同的效果。使用响应式布局可以使一个网页适用于所有设备。
响应式布局的关键就是媒体查询，通过媒体查询，可以为不同的设备，或设备的不同状态来分别设置样式。
使用媒体查询：语法：@media 查询规则{}
媒体类型有：all 所有设备；print 打印设备；screen 带屏幕的设备；speech 屏幕阅读器。可以使用，连接多个媒体类型，他们之间就是或的关系。
也可以在媒体类型前加上一个only，表示只有。only的使用主要是为了兼容一些老的浏览器。
@media print,screen{
body{
background-color: #bfa;
}
}
媒体特性：
扫一扫
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
