一、CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS版本有2.0和3.0的版本，我们都会讲到，CSS3因为有兼容性问题，所以讲到CSS3样式的时候，这里会特殊标明。
二、CSS概述
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
三、CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。
在上面的样式规则中：
1.器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以键值对的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颈色等。
4.属性和属性值之间用英文":"连接。
5.多个“键值对”之间用英文";"进行区分。
可以用段落和表格的对济的演示。
<!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>CSS初试</title>
<style>
h1 {
color:#ff445566;
font-size: 40px;
}
p {
color:darkolivegreen;
}
</style>
</head>
<body>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus aperiam cumque repudiandae numquam illo magnam quaerat saepe inventore recusandae?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorem quia corrupti accusamus molestias delectus alias cum reprehenderit, repellat impedit officiis ab ipsa est eius asperiores ut eveniet sapiente dolorum soluta hic corporis. Necessitatibus aut asperiores ipsa assumenda tempore tenetur provident quasi. Sunt delectus rem, totam odit omnis eum cupiditate.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque possimus non tempora nobis quis quas, aperiam ullam voluptas iste!</p>
</body>
</html>
1、字体样式
font-size:字号大小
fot-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用铯对长度单位。其中，相对长度单位比较常用，推荐使用像素单位Px,绝对长度单位使用较少。具体如下：
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用，推荐使用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
font-family:字体
fot-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p {font--family:"微软雅黑"：}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
👍常用技巧：
1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug.
3.各种字体之间必须使用英文状态下的逗号隔开。
4,中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:"Times New Roman";.
6.尽量使用系统默认字体，保证在任何用户的浏览器中都能证确显示。
eg.font-family:"Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
打开这个页面的时候默认打开微软雅黑，如果没有微软雅黑，那么打开“tahoma”，以此类推...
CSS Unicode:字体
在CSS中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误。Xp系统不支持类似微软雅黑的中文。
方案一：你可以使用英文来替代。比如font-family:"Microsoft Yahei'"。
方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。
font-family:"5FAE\8F6F\96C5\9ED1",表示设置字体为"微软雅黑”。
| 字体名称 | 英文名称 | Unicode编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | 65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\65877EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
❌ 注意：一般只用微软雅黑和宋体
font-weight:字体粗细
字体加粗除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-weight,属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)。
数字400等价于normal,.而700等价于bold。但是我们更喜欢用数字来表示。
font-style:字体风格
font-style:字体风格
字体倾斜除了用1和m标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-stye属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal:.默认值，浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
👍 小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签(em,1)改为普通模式。
font:综合设置字体样式(重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器 {font:font-style font-weight font-size/line-height font-family;}
如：h4 {font: italic bold 14px "微软雅黑";}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否测font属性将不起作用。
2、CSS注释
CSS规则是使用/*需要注释的内容*/进行注释的，即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/结束。
/* 这是CSS注释 */
四、选择器
1、类选择器
<!DOCTYPE html>
<html lang="zh">
<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>
<style>
.mingren{
color: orange;
}
.zuozhu{
color:aqua;
}
</style>
</head>
<body>
<div class="mingren">鸣人</div>
<div class="zuozhu">佐助</div>
<div>卡卡西</div>
</body>
</html>
案例：用类选择器实现谷歌logo
<!DOCTYPE html>
<html lang="zh">
<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>
<style>
span {
font-size: 100px;
}
.red {
color: red;
}
.blue {
color:cornflowerblue;
}
.green {
color: green;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
2、多类名选择器
当一个标签需要多个CSS来修饰对时候，可以同时使用多个类。多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
1.样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
2.合个类名中间用空格隔开。（class="font color style"）
3、ID选择器
id选择器使用"#”进行标识，后面紧跟id名，其基本语法格式如下：
id名（属性1:属性值1;属性2:属性值2;属性3:属性值3;}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
<style>
#big {
color : "pink";
}
</style>
<body>
<div id = "big">大</div>
</body>
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器(class)好比人的名字，是可以多次重复使用的，比如张伟，王伟，李伟，李娜
id选择器(id)好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
id选择器和类选择器最主要区别在于使用次数上。
4、通配符选择器
通配符谜择器用*"号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
*{
margin:0;
/*定义外边距*/
padding:0;
/*定义内边距*/
}
注意：
这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。
5、伪类选择器
首先，这也是一个选择器，伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第个元素。
为了和我们学的类选择器相区别，类选择器是一个点比如.dem{},而我们的伪类用2个点就是冒号比如：:11nk{}
1⃣️、链接伪类选择器
:ink /*未访问的链接*/
:visited/*已访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接*/
注意写的时候，他们的顺序尽量不要颠倒按照lvha的顺序。love hate记忆法或者W包包非常hao
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
a:link{ /*未访问链接（常用）*/
color: white;
font-size : 16;
font-weight:600;
}
a:visited{ /*已访问链接，我们已经点击过一次的状态*/
color: blue;
font-size : 16;
font-weight:600;
}
a:hover{ /*鼠标移动到链接上*/
color:green;
font-size : 16;
font-weight:600;
}
a:active{ /*选定的链接，当我们点击没有松开鼠标的显示状态（常用）*/
color: orange;
font-size : 16;
font-weight:600;
}
</style>
</head>
<body>
<a href="#">秒杀</a>
<a href="#">闪购</a>
</body>
</html>
2⃣️、结构（位置）伪类选择器(CSS3)
-
:first-child:选取属于其父元素的首个子元素的指定选择器
-
:last-child:选取属于其父元素的最后一个子元素的指定选择器
-
:nth-child(n):匹配属于其父元素的第N个子元素，不论元素的类型
-
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
（n可以是数字、关键词或公式，如：关键词：偶孩子-odd，奇孩子-even；公式：2n+1）
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
li:first-child{ /*第一个孩子*/
color: orchid;
}
li:last-child{ /*最后一个孩子*/
color:palegreen;
}
li:nth-child(4){/*第四个孩子，括号内表示第几个*/
color:skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>
3⃣️、目标伪类选择器
:target目标伪类选择器：选择器可用于选取当前活动的目标元素
补充—命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_” 下滑线来命名CSS选择器。
输入的时候少按一个shift键；
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好的区分JavaScript变量命名（JS变量命名是用"_"）
3.不要纯数字、中文命名，尽量使用英文来命名CSS选择器。
五、CSS外观属性
1、color:文本颜色
color.属性用于定义文本的颜色，其取值方式有如下3种：
1⃣️、预定义的颜色值，如red,green,blue等。
2⃣️、十六进制，如#FF0000,#FF6600,#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。（两两相同可以简写，如：00FF00可以简写成0F0）
3⃣️、RGB代码，如红色可以表示为rgb(255,0,0或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
2、line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素Px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
3、text~align:水平对齐方式
text:a1ign属性用于设置文本内容的水平对齐，相当于htm1中的a1ign对齐属性。其可用属性情如下：
left:左对齐（默认值）
right:右对齐
center:居中对齐
4、text-indent::首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏觉器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。
5、letter-spacing:字间距
letter-.spacing属性用于定仪字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
6、word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-.spacingi定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
7、word-break:自动换行
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-a只能在半角空格或连字符处换行。
8、文字阴景(CSS3)
CSS3以后，我们可以给我们的文字添加阴影效果了
text-shadow:水平位置 垂直位置 模糊距离 阴影 颜色；
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴景的位置。允许负值。 |
| v-shadow | 必需。垂直阴景的位置。允许负值。 |
| blur | 可选。模胎的距离。 |
| color | 可选。阴的颜色。参阅CSS颜色值。 |
1.前两项是必须写的。后两项可以选写。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
h1 {
font-size: 60px;
text-shadow: 6px 4px 3px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h1>阴影测试字体</h1>
</body>
</html>
CSS外观属性案例
<!DOCTYPE html>
<html lang="zh-CN">
<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>CSS外观样式案例</title>
<style>
body { /*整体样式修改*/
color:#3c3c3c;
}
h1 {
font-weight: normal;
text-align: center;
}
div {
text-align: center;
font-size: 14px;
}
.sport {
color: rgb(240, 61, 61);
}
a.people {
color: blue;
}
.co {
color: #6e724e;
}
a.co:hover { /*设置鼠标经过文字，文字颜色的变化(a可以省略),注意一点和两点*/
color: rgb(128, 201, 131);
}
p {
line-height: 22px;
text-indent: 2em;
letter-spacing: 1px;
}
em {
font-style: normal;
color: #369;
}
</style>
</head>
<body>
<h1>中乙队赛前突然换帅仍胜 毅腾高原黑马欲阻击舜天</h1>
<div>2017年07月16日20:11 <span class="sport">新浪体育评论中大奖</span> ( <a href="#" class="people">11</a> 人参与) <a href="#" class="co">收藏本文</a> </div>
<hr>
<p>
新浪体育讯7月16日是燕京啤酒<em>[微博]</em>2817中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队
的比赛日。然而就在比赛日中午，丽江嘉云吴队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收
拾行囊准备离开。在这样的情况下，丽江嘉云吴队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>
在昨日丽江嘉云吴队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去
医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈
据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，
教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧
李虎最终和教练组一起在比赛日辞职。
</p>
<p>
这样的情况并没有影响到丽江嘉云吴队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然
发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协
杯的赛程，丽江嘉云吴队将在本月23日迎战江苏舜天队。
</p>
</body>
</html>
六、CSS样式表（书写位置）
CSS可以写到那个位置？是不是一定写到html文件里面呢？
1、内部样式表
内嵌式是将CSS代，码集中写在HTML文档的head头部标签中，并且用stye标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也，可以把他，放在HTML文档的任何地方。
type="text/CSS"在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。
2、行内式（內联样式）
内联样运，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 sty1e="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规侧相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
适合样式比较少的情况
3、外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过lik标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href=-"css文件的路径"type="text/Css"rel="stylesheet"/>
</head>
注意：link是个单标签哦!!
该语法中，ink标签需要放在head头部标签中，并且必须指定ink标签的三个属性，具体如下：
href:定义所链接外样式表文件的UL,可以是相对路径，也可以是绝对路径。
type:定义所链接文档的类型，在这里需要指定为“text/CSs”,表示链接的外部文件为Css样式表。
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet'”,表示被链接的文档是一个样式表文件。
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
七、标签显示模式（display）
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
1、块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<u1>、<ol>、<1i>等，其中<div>标签是最典型的块元素。
块级元素的特点：
(1)总是从新行开始。
(2)高度，行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%。
(4)可以容纳内联元素和其他块元素。
2、行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
(1)和相邻行内元素在一行上。
(2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。（特殊）
⭕️注意：
1.只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签，里面不能放其他块级元素。
2.链接里面不能再放链接。
块级元素和行内元素的区别(熟记)
块级元素的特点：
(1)总是从新行开始。
(2)高度，行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%。
(4)可以容纳内联元素和其他块元素。
行内元素的特点：
(1)和相邻行内元素在一行上。
(2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。（特殊）
3、行内块元素（inline-block）
在行内元素中有几个特殊的标签一<img/>、<input/>、<td>,可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
(1)和相所行内元素（行内块）在一行上，但是之间会有空白键隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度，行高、外边距以及内边距都可以控制。
4、标签显示模式转换display
块转行内：display:inline；
行内转块：display:block；
块、行内元素转换为行内块：display:inline-block;
此阶段，我们只需关心这三个，其他的是我们后面的工作。
八、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
1、交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为classi选择器，两个选择器之间不能有空格，如h3.special。
h3(标记选择器).class(类选择器) {color:red(声明);font-size:25px;(声明)}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
.red {
color:red;
}
p.red {
font-size: 50px;
}
div.red {
font-size: 10px;
}
</style>
</head>
<body>
<div class="red">泰罗</div>
<div>安琪拉</div>
<p class="red">大变态</p>
</body>
</html>
记忆技巧：
交集选择器是并且的意思。即…又…的意思
比如：p.one 选择的是：类名为.one的段落标签。
用的相对来说比较少，不太建议使用。
2、并集选择器(,)
并集选择器(CSS选择器分组)是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器css类选择器id选择器等)，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
/* p {
color:red;
}
div {
color:red;
}
span {
color:red;
} */
p,div,span {
color:hotpink;
}
</style>
</head>
<body>
<div class="red">泰罗</div>
<p>泰罗爸爸</p>
<span>泰罗妈妈</span>
<h1>泰罗儿子</h1>
</body>
</html>
记忆技巧：
并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如.one,p,#test{color:#F88;}表示 .one和p 和#test这三个选择器都会执行颜色为红色。通常用于集体声明。
3、后代选择器(空格)
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
div p{
color: hotpink;
}
div.jianlin p { /*div可以省略*/
font-size: 50px;
}
</style>
</head>
<body>
<div>
<p>王抱歉</p>
</div>
<div class="jianlin">
<p>王思聪</p>
</div>
</body>
</html>
4、子元素选择器（>）
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个“>”进行连接，注意，符号左右两侧各保留一个空格。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
.nav li {
color:red;
}
.nav > li {
color: pink;
font-size: 60px; /*这个不行？？*/
}
</style>
</head>
<body>
<ul class="nav">
<li>
儿子
<ul>
<li>孙子</li>
<li>孙子</li>
<li>孙子</li>
</ul>
</li>
</ul>
</body>
</html>
测试题
<div class="nav">
<!--主导航栏-->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav">
<!--侧导航栏-->
<div c1ass="site-1">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
在不修改以上代码的前提下，完成以下任务：
1.链接登录的颜色为红色同时主导航栏里面的所有的链接改为蓝色。(简单)
2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等）
3.主导航栏里面的一级菜单链接文字颜色为绿色。（难）
5、属性选择器([])
选取标签带有某些特殊属性的选择器 我们称为属性选择器，属性选择器用中括号来表示。
| *选择器 | *示例 | *含义 |
|---|---|---|
| E[attr]**** | 存在attr属性即可 | |
| E[attr=val]**** | 属性值完全等于val | |
| E[attr=val]*** | 属性值里包含val字符并且在"任意"位置 | |
| E[attr^=val]**** | 属性值里包含val字符并且在"开始"位置 | |
| E[attr$=val]**** | 属性值里包含val字符并且在"结束"位置 |
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
a[title] { /*普通属性选择器*/
color:springgreen;
}
a[title="I’m XinLang"] { /*属性值完全等于val,需要加双引号*/
font-size: 35px;
}
a[title^=I] { /*属性值里包含val字符并且在"开始"位置,注意“^”的位置,注意不要加双引号*/
font-style: italic;
}
a[title$=我啦] {
font-size: 9px; /*属性值里包含val字符并且在"结束"位置*/
}
a[title*=就] {
font-style: italic; /*属性值里包含val字符并且在"任意"位置*/
}
</style>
</head>
<body>
<a href="#" title="I’m BaiDu">百度</a>
<a href="#" title="I’m XinLang">新浪</a>
<a href="#">搜狐</a>
<a href="#">网易</a>
<a href="#" title="土豆就是我啦，heihei">土豆</a>
<a href="#" title="腾讯就是我啦">腾讯</a>
<a href="#" title="俺戏一个华为">华为</a>
</body>
</html>
6、伪元素选择器(:😃
1.E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2.E::first-line文本第一行；
3.E::selection可改变选中文本的样式：
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
E::after、E::before在旧版本里是伪元素，CSS3的规范里":"用来表示伪类，“::"用来表示伪元素，但是在高版本浏览器下E:after、E:before:会被自
动识别为E::after、E::before,这样做的目的是用来做兼容处理。
E:after、E:before,后面的练习中会反复用到，目前只需要有个大致了解
":"与"::"区别在于区分伪类和伪元素.
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
p::first-letter {
color: red;
font-size: 30px;
}
p::first-line { /*选择第一行且不会因为浏览器改变行数而改变，第一个字母的样式仍然为红色*/
color:springgreen;
}
p::selection {
color:pink;
}
/*分别在开头和结尾添加内容，选中不了？！*/
p::before {
content: "Hello^_^ ~";
}
p::after {
content:"Bey~~"
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id repellat omnis rem error sunt architecto nostrum sit, obcaecati vero saepe voluptate sint enim laboriosam consequatur molestias maxime magnam itaque similique facere nisi atque at! Odit ullam iste minus accusamus voluptatum minima suscipit! Mollitia, suscipit. Provident eius commodi, repellendus dicta iure nam, ea illo facere libero vero dolorum deleniti hic fugit modi porro minus! Voluptatem maiores perferendis suscipit, maxime in repellendus, excepturi saepe illo ipsam enim voluptatibus, vitae adipisci dolore quam! Rem alias ad impedit beatae similique, error non obcaecati ipsa necessitatibus tenetur, quisquam corrupti adipisci, esse dolorem quidem optio inventore.</p>
</body>
</html>
区分前面学的选择器：
.demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器
九、CSS书写规范
1、空格规范
【强制】选择器与{之间必须包含空格。
示例：.selector {}
【强制】属性名与之后的":"之间不允许包含空格，":"与属性值之间必须包含空格。
示例：
font-size: 12px;
2、选择器规范
【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行。
示例：
/*good*/
.post,
.page,
.comment {
line-height: 1.5;
}
/*bad*/
.post,.page,.comment {
line-height: 1.5;
}
3、属性规范
【强制】属性定义必须另起一行。
示例：
/*good*/
.selector {
margin: 0;
padding: 0;
}
/*bad*/
.selector {margin: 0;padding: 0;}
【强制】属性定义后必须以分号结尾。
示例：
color:red;
font-size:14px;
十、CSS背景（background）
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色背景图片地址背景平铺背景滚动背景位置 |
1、背景图片（Image)
CSS可以添加背景颜色和背景图片，以及来进行图片设置。
2、背景平铺(repeat)
背景图片没有铺满盒子，会重复，可以设置no-repeat来去除平铺，设置repeat-x设置只在x方向上平铺，或者repeat-y在y方向上平铺。
3、背景位置(position)
1⃣️、方位名词相应的参数有：top ｜ center ｜ bottom ｜ left ｜ right
默认属性为：top left
写法：background-positon： right bottom
方位名词没有顺序，如果只有一个方位名词，那么另外一个默认是center
2⃣️、网页坐标：网页坐标和数学的坐标不同，数学坐标定位是右上，网页坐标定位是向右下。相对于方位名词，网页坐标更加精确，且顺序肯定是先x轴再y轴。
3⃣️、混搭：background-positon：center 10px;
4、背景附着（attachment）
作用： 用于设置背景图像是随对象内容滚动还是固定的。
参数：
scroll：默认，背景图像随对象内容滚动
fixed：背景图像固定
例子：
background-attachment: scroll;
5、背景简写
背景参数建议填写顺序：(以空格分割)
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0;
6、背景透明(CSS3）
CSS3支持背景半透明的写法语法格式是：
background: rgba(0,0,0,0.3);
相较于正常的颜色设计，这里多了个“a”，a为alpha透明度，取值范围0~1之间。
7、背景缩放(size—CSS3)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a)可以设置长度单位(px或百分比（设置百分比时，参照盒子的宽高）
b)设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。（等比缩放到背景，图片可能会超出背景，平时用的最多）
c)设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。（如果图片的宽或者高度和盒子一样大，那么就不再缩放）
8、多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用间号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上。
9、凹凸文字（案例）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>案例-凹凸文字</title>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 100px "Courier"; /*粗细不用加px！*/
}
div:first-child { /*结构伪类选择器，选择第一个字元素*/
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; /*注意阴影距离一定为正值！！*/
}
div:last-child {
text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
}
</style>
</head>
<body>
<div>我是凸起文字</div>
<div>我是凹入文字</div>
</body>
</html>
案例——导航栏
文本的装饰text-decoration
通悄我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
使用技巧：在一行内的盒子内，我们设定行高（line-height）等于盒子的高度，就可以使文字垂直居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航栏案例</title>
<style>
body {
background-color: #000;
}
a {
height: 50px;
width: 200px; /*设置盒子大小*/
color: #fff;
text-align: center; /*水平居中*/
line-height: 50px; /*垂直居中，采用设置行高等于盒子高度得到垂直居中的效果*/
display: inline-block; /*显示模式改为行内块模式，大小才能改变且在同一水平线上*/
text-decoration: none;
}
a:hover { /*设置鼠标经过时的变化*/
background-color: orange;
}
div {
background-color: orangered;
}
/*问题：如何让标签居中和平铺*/
</style>
</head>
<body>
<div>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</div>
</body>
</html>
十一、CSS三大特性(重点)
1、CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处珵冲突的一个能力如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。（样式不冲突的属性不会重叠）
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
2、CSS继承性
所谓继承性是指书可CSS样式表时，子标签会继承父标签的某些样式，如文本领色和字号，想要设置一个可继承的属性。只需将它应用于父元素即可。
简单的理解就是：子承父业
⭕️注意：
恰当地使用继承可以简化代码，降低css样式的复杂性。子元素可以继承父元素的样式(text-,font:-,line-这些元素开头的都可以继承，以及color属性)
3、CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。！！！！
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于160。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
选择器权重：id>类名>标签
4、CSS特殊性(Specificity)
关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS Specificity,我们称为CSS特殊性或称非凡性，它是一个衡量CSS值优先级的一个标
准具体规范，如下：
specificity用一个四位的数字串(CSS2是三位来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不
可超越。
| 继承或者*的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0.0,0 |
| 每个!importanti贡献值 | ∞无穷大 |
例子：
div {
color: orange!important;
}
权重叠加
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p ------> 0,1,0,1
⭕️注意：数位之间没有进制比如说：0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0，所以不会存在10个d能赶上一个类选择器的情况。
总结优先级：
1.使用了!important声明的规侧，
2.内嵌在HTML元素的stylel属性里面的声明。
3.使用了1D选择器的规则。
4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5.使用了元素选择器的规侧则。
6.只包含一个通用选择器的规则。（*）
7.同一类选择器侧遵循就近原则。
CSS优先级题目
/*第一题*/
<head>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;/*继承的权重为0*/
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
/*第二题*/
<head>
<style type="text/css">
.c1 .c2 div{
color:blue;
}
div #box3{
color:green;
}
#box1 div{
color:yellow;
}
</style>
</head>
<body>
<div id="box1"class="c1">
<div id="box2"class="c2">
<div id="box3"class="c3">
文字
</div>
</div>
</div>
</body>
/*第三题*/
<head>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
⭕️注意分辨是不是继承，继承权重为0，不是按权重公式计算
十二、盒子模型（CSS重点）
CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
1、盒子模型(Box Model)
2、盒子边框(border）
语法：（三个样式缺一个显示不出来）
border border-width border-style border-colo
边框属性-设置边框样式(border-style)
边框样式，用于定义页面中边框的风格，常用属性值如下：
none:没有边框即忽略所有边框的宽度（默认值）
solid:边框为单实线（最为常用的）
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
1⃣️、边框综合写法：
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 上边框 | border-top-style:样式;border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色； | |
| 下边框 | border-bottom-style:样式；border-bottom-widt宽度；border-bottom-color:颜色；border-bottom:宽度样式颜色； | |
| 左边框 | border--left-style:样式：border-.eft-width:宽度；border-left-color:颜色；border-left:宽度样式颜色； | |
| 右边框 | border-right-style:样式；border-right-width:宽度；border-right-color:颜色；border-right:宽度样式颜色； | |
| 样式综合设置 | border-style:上边[右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边[右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边[右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
.User {
border-width: 2px;
border-color: pink;
border-style: solid;
}
.name {
border-top-width: 1px;
border-top-style: solid;
border-top-color: hotpink;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: hotpink;
}
.password {
border-top: 1px solid deeppink;/*上边框宽度 样式 颜色*/
border-bottom: 1px solid springgreen;
}
2⃣️、表格的细线边框（collapse）
table {border--collapse: collapse;} collapse单词是合并的意思
border-collapse: collapse;表示边框合并在一起。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>边框综合写法</title>
<style>
table {
height: 400px;
width: 600px;
border: 1px solid red;
border-collapse: collapse;
}
td {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"> <!--cellspacing="0" cellpadding="0"-->
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
3⃣️、圆角边框(radius—CSS3)
语法格式：
border-radius:左上角 右上角 右下角 左下角；/*顺时针*/
例子：
border-radius:18px;/*一个数值表示4个角都是相同的18px的弧度*/
/*取宽度和高度一半则会变成一个圆形*/
border-radius:.10px 40px;/*左上角和右下角是1px，右上角左下角40px*/
3、内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。
属性：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
⚠️注意：padding后面参数的个数不同表达的意思也是不同的：
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding:上下左右边距，比如padding:3px:表示上下左右都是3像素 |
| 2个值 | padding:上下边距、左右边距，比如padding:3px 5px;表示上下3像素，左右5像素，以对称的形式给边距 |
| 3个值 | padding:上边距，左右边距，下边距，比如padding:3px 5px 10px；表示上是3像素，左右是5像素，下是10像素 |
| 4个值 | padding:上内边距、右内边距、下内边距、左内边距，比如：padding:3px 5px 10px 15px;表示上3px，右是5px，下10px，左15px，以顺时针方向给边距 |
边框和内边距都是以从上到下，从左到右的方式顺时针的方式决定。没有给到值的对象默认和其对称方向上的值相同，边框以对角线为对称线，内边距以水平线为对称线。
案例——新浪微博导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>新浪微博导航栏</title>
<style>
nav {
height: 41px;
background-color: #fcfcfc;
border-top: 4px solid #ce8f4a;
border-bottom: 1px solid #ededef;
border-left: 0px;
}
nav a {
height: 41px;
color: #4b4b4b;
text-decoration: none;
display: inline-block;
padding:0 15px; /*padding设定盒子间的距离*/
line-height: 41px;
}
nav a:hover {
background-color: #eee; /*背景颜色变成了字体颜色，要注意*/
}
</style>
</head>
<body>
<nav>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">网站导航</a>
</nav>
</body>
</html>
4、外边距(margin)
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边距
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素。
2.盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
header{width:960px;margin:0 auto;}
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
注意：行内元素是只有左右内外边距的，是没有上下内外边距的。内边距，在ie6等低版本浏览器也会有问题。
因此，尽量不要给行内元素指定上下的内外边距
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin--top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。一般避免这种情况就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
1.可以为父元素定义1像素的上边框或上内边距。
2.可以为父元素添加overflow:hidden。
content宽度和高度
使用宽度属性width和高度属性neighti可以对盒子的大小进行控制。
width和neight的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、E6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border(Height为内容高度)
Element Width=content width + pdng + border(Width为内容宽度)
注意：
1、宽度属性width和高度属性neight仅适用于块级元素，对行内元素无效(img标签和input除外)。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小 。
实际运用中，我们会测量一些网页的盒子，但要注意如果盒子中的盒子加了边距会影响实际盒子的大小，导致盒子大小不是一开始测量的大小。
盒子模型布局稳定性
盒子模型内外边距分别什么时候使用？
答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。
但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
按照优先使用宽度(width)，其次使用内边距(padding)，再次外边距(margin)。
width > padding > margin
原因：
1.margin会有外边距合并,还有ie6下面margin加倍的bug,所以最后使用。
2.padding会影响盒子大小，需要进行加减计算,其次使用。
3.width没有问题,我们经常使用宽度剩余法高度剩余法来做。
CSS3盒模型(box-sizing)
CSS3中可以通过box-sizing来指定盒模型，即可指定为content--box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情祝：
1、box-sizing:content-box盒子大小为width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing:border-box盒子大小为width,就是说padding和border是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width:length,content的值是会自动调整的。
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴景的位置。允许负值。 |
| v-shadow | 必需。垂直阴景的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。（大小） |
| color | 可选。阴的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
1.前两个属性是必须写的。其余的可以省略。
2.外阴影(outset)但是不能写，默认是outset，想要内阴影inset
十三、浮动(float)（重点）
普通流(normal now)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
html语言当中另外一个相当重要的概念——标准流！或者普通流，或者文档流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动(float)
1⃣️、基本概念
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
⭕️浮动相对于普通流，是一个二维的概念，块级元素仍然还是占用一行，但是块级元素之间是占了同一平面的不同层次的一行，所以浮动能够脱离普通流的控制。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{f1oat: 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
2⃣️、浮动详细内幕特性
由于浮动是一个二维的概念，因此在使用的时候会出现元素在网页的左上角（同一层无其他元素占用位置）等问题，需要添加父级标准流去限制。
浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则元素的顶部会和上一个元素的底部对齐。
结论：一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
总结：float ——浮漏特
一句话总结浮动：浮动的主要目的就是为了让多个块级元素一行内显示。
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。
版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条
理，也需要对网页进行“排版”。
"版心"（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
- 1、确定页面的版心（可视区）。
- 2、分析页面中的行模块，以及每个行模块中的列模块。
- 3、制作HTML结构。
- 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
版型样式
一列固定宽度且居中——最普通，最常见的类型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>一列固定宽度</title>
<style>
* { /*CSS第一句话*/
margin: 0px;
padding: 0px;
}
div.top,
.banner,
.main,
.footer { /*并集选择器定义相同的属性*/
width: 1500px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
.top {
background-color: powderblue;
height: 80px;
line-height: 80px;
}
.banner {
background-color: tan;
height: 120px;
line-height: 120px;
}
.main {
background-color: wheat;
height: 800px;
line-height: 800px;
}
.footer {
background-color: lightgray;
height: 80px;
line-height: 80px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
两列左窄右宽型——小米官网
<style>
.left {
width: 300px;
height: 800px;
/* background-color: pink; */
/* color: lightgreen; */
float: left;
border: 1px dashed black;
}
.right {
width: 1180px;
height: 800px;
/* background-color: deeppink; */
float: right;
border: 1px dashed black;
}
</style>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
通栏平均分布型——锤子官网
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>一列固定宽度</title>
<style>
* {
/*CSS第一句话*/
margin: 0;
padding: 0;
background-color: #eee;
}
.top,
.footer {
height: 200px;
background-color: black;
}
.banner {
height: 600px;
width: 1500px;
background-color: skyblue;
margin: 20px auto;
border-radius: 15px;
}
.main {
height: 400px;
width: 1500px;
margin: 20px auto;
}
.main ul li {
height: 400px;
width: 374px;
list-style: none;
float: left;
border-radius: 15px;
background-color: black;
}
.main ul li:nth-child(even) {
background-color: white;
/* border: 1px solid black; */
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="main">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>
清除浮动(:clear)
1、为什么要清除浮动？
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响。
2、清除浮动的方法(闭合浮动)
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中,clear属性用于清除浮动，其基本语法格式如下：
选择器 {clear: 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响(最常用) |
1⃣️额外标签法
是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>,或测其他标签br等亦可。
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。比较少用！
2⃣️、父级添加overflow属性方法（hidden）
可以通过触发BFC的方式，可以实现清除浮动效果。(BFC后面讲解)
可以给父级添加：overf1ow为 hidden|auto|scrol1 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3⃣️、使用after伪元素清除浮动
:after方式为空元素的升级版，好处是不用单独加标签了
使用方法：
/*任意；转换为块级元素；高度为0，去除小点占有高度，隐藏（小点）盒子*/
.clearfix:after { content: "." display: block; height: 0; clear: both; visibility: hidden;clear: both}
/*带有*属性代表ie6.7能识别的特殊符号，zoom为IE6、7清除浮动对方法*/
.c1 earfix {*zoom: 1;}/*IE6、7专有*/
优点：符合闭合浮动思想结构语义化正确
缺点：由于1E6-7不支持：after,使用zoom:1来触发hasLayout。.
代表网站：百度、淘宝网、网易等
⚠️注意：content:"."里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox7.0前的版本会有生成空格。
4⃣️、使用before和after双伪元素清除浮动
使用方法：
.clearfix:before, .clearfix:after{
content:""
display:table;/*这句话可以出发BFC BFC可以清除浮动*/
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
优点：代码更简洁
缺点：由于IE6-7不支持：after,.使用zoom:1触发hasLayout。
代表网站：小米、腾讯等
十四、定位(position)(难点)
1、定位元素
元素的定位属性主要包括定位模式和边偏移两部分。
①、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
例子：
top: 100px;
②、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position: 属性值；}
| 值 | 描述 | ||
|---|---|---|---|
| static | 自动定位（默认定位方式） | ||
| relative | 相对定位，相对于其原文档流的位置进行定位 | ||
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位信息 | ||
| fixed | 固定定位，相对于浏览器窗口进行定位 |
2、静态定位(static)
静态定位是所有元素的默认定位方式，当opsition属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。（用于清除定位）
上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性(top、bottom、left或right))来改变元素的位置。
3、相对定位relative（自恋型）
相对定位是将元素相对于它在标准流中的位置进行定位，当position,属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
⭕注意：
1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。
4、绝对定位absolute（拼爹型）
【注意】如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
父级没有定位
若所有父元素都没有定位，以浏览器为准对齐(document文档)。（父元素没加定位，加了margin，子元素还是会跑）
父级有定位
会以父元素所在位置为基准点
子绝父相
这句话的意思是子级是绝对定位的话，父级要用相对定位。
首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。
就是说，子级是绝对定位，父亲只要是定位即可(不管父亲是绝对定位还是相对定位，甚至是固定定位都可以)，就是说，子绝父绝，子绝父相都是正确的。
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
1.首先left:50%
2.然后走自己外边距负的一半值就可以了。
5、固定定位fixed（认死理型）
固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当positior属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2.固定定位完全脱标，不占有位置，不随着滚动条滚动。
记忆法：就类似于孙猴子，无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。
叠放次序(z-index)
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-idex层叠等级属性，其取值可为正整数、负整数和0.
比如：z-index:2;
注意：
1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2.如果取值相同，则根据书写顺序，后来居上。
3.后面数字一定不能加单位。
4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
定位总结表
| 定位模式 | 是否脱标占有位置行 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式类型 | 不可以 | 正常模式 |
| 相对定位relative | 截图不脱标，占有位置连续截图 | 可以 | 相对自身位置移动 |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位fixed | 完全脱标，不占有位置切换识别 | 可以 | 相对于浏览器移动位置 |
定位模式转换
跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，
因此比如行内元素如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。
十五、元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，他们分别是display、visibility和overflow.
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中册除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现。
1、display(下拉菜单、广告)
display设置或检索对象是否及如何显示。
display:none隐藏对象与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意，思。
特点：隐藏之后，不再保留位置。
2、visibility
设置或检索是否显示对象。
visible:对象可视
hidden:对象隐藏
特点：隐藏之后，继续保留原有位置。（停职留薪）
3、overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible:不剪切内容也不添加滚动条。(默认)
auto:超出自动显示滚动条，不超出不显示滚动条
hidden:不显示超过对象尺寸的内容，超出的部分隐藏掉（最常用）
scroll:不管超出内容否，总是显示滚动条
案例（显示二维码）
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
div {
height: 80px;
width: 80px;
background-color: pink;
font-size: 12px;
text-align: center;
line-height: 80px;
margin: 100px auto;
position: relative;
}
.erweima {
height: 200px;
width: 200px;
line-height: 200px;
position: absolute;
left: 90px;
top: -100px;
display: none;
}
div:hover .erweima { /*易错点，鼠标经过“div”，“二维码出现”，注意对象分别是谁*/
display: block;
}
</style>
</head>
<body>
<div>
快来扫二维码
<div class="erweima">我是二维码</div>
</div>
</body>
</html>
# 十六、CSS高级技巧
1、CSS用户界面样式
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor:default 小白|pointer 小手|move 移动 | text 文本
鼠标放我身上查看效果哦：
<u1>
<li sty1e="cursor:default">我是小白</1i>
<li style="cursor:pointer">我是小手</1i>
<1i sty1e="cursor:move">我是移动</1i>
<1i style="cursor:text">我是文本</1i>
</u1>
尽量不要用hand因为火狐不支持 pointer ie6以上都支持的尽量用
轮廓outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline outline-color outline-style outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是：outline: 0;
<input type="text"style="outline:0;"/>
防止拖拽文本域resize
resize:none这个单词可以防止火狐谷歌等览器随意的拖动文本域。
右下角可以拖拽：
<textarea></textarea>
右下角不可以拖拽：
<textarea style="resize:none;"></textarea>
2、vertical-align垂直对齐
以前我们讲过让带有宽度的块级元素居中对齐，是margin:0 auto;
另外一种方式：margin-left: auto;margin-right: auto;
以前我们还讲过让文字居中对齐，是text-align:center;
vertical-align垂直对齐，对块级元素无效
vertical-align: baseline | top | middle | bottom
设置或检索对象内容的垂直对其方式。
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单与文字的对齐。
图片、表单和文字对齐
所以我们知道，我们可以通过vertical-align控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。
去除图片底侧空白缝隙
有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决方法：
1.给img vertical-align:middle|top等等。让图片不要和基线对齐。（最好是和顶对齐）
1.给img添加display:block;转换为块级元素就不会存在问题了。
十七、溢出文字的隐藏
1、word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。(允许拆开单词)
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词
2、white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal:默认处理方式
nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
3、text-overflow文字溢出
text-overflow: clip | ellipsis
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
cip:不显示省略标记（...），而是简单的裁切
ellipsis：当对象内文本溢出时显示省略标记(...)
⭕注意:一定要首先强制一行内显示，再次和overflow属性搭配使用
十八、CSS精灵技术(sprite)
1、精灵技术产生的背景
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
2、精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图.如下图所示为京东网站中的一个精灵图。
3、精灵技术的使用
CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position.属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
4、制作精灵图
CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。做完之后，保存一张psd留作后续修改，一张png用于网页样式。
大部分情况下，精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。
十九、字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"tt请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情祝下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。这就是字体图标(iconfont).
字体图标优点
可以做出跟图片一样可以做的事情，改变透明度、旋转度等。
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等。
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药
字体图标使用流程
1.UI人员设计字体图标效果图(svg)
2.前端人员上传生成兼容性字体文件包
3.前端人员下载兼容字体文件包到本地
4把字体文件包引入到HTML页面中
1️⃣设计字体图标
假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在illustrator或Sketch这类矢量图形软件里创建icon图标.之后保存为svg格式，然后给我们前端人员就好了。
第一步我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。
2️⃣上传生成字体包
当UI设计人员给我们Svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。推荐网站：http://icomoon.io
icomoon:字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
推荐网站：http:/www.iconfont.cn/
阿里icon font字库
http://www.iconfont.cn/
这个是阿里M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用A1制作图标上传生成。
fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。
Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
https://icons8.com/
提供PNG免费下载，像素大能到500PX
3️⃣下载兼容字体包
刚才上传完毕，网站会给我们把U做的Sg图片转换为我们的字体格式，然后下载下来,解压后复制fonts里的文件到项目的fonts文件夹即可
当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。
4️⃣字体引入到HTML
第一步：在样式里面声明字体：告诉别人我们自己定义的字体
@font-face {/*电脑中没有的字体，我们需要声明*/
font-family:'icomoon';
src:url('fonts/icomoon.eot?7kkyc2');
src:
url('fonts/icomoon.eot?7kkyc2#iefix')format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2')format('truetype'),
url('fonts/icomoon.woff?7kkyc2')format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
font-weight:normal;
font-style:normal;
}
注意文件路径
第二步：给盒子使用字体
span{
font-family: "icomoon";
}
第三步：盒子里面添加结构
span:before {
content:"\e900";
}
或者
<span>口</span>
追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能册除，继续使用，此时我们需要这样做：
把压缩包里面的selection.json从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。
二十、滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<a href="#">
<span>首页</span>
</a>
总结：
1.a设置背景左侧，padding撑开合适宽度。
2.span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度。
3.之所以a包含span就是因为整个导航都是可以点击的。
案例：WeChat Navigation Bar——略
before和after伪元素（详解）
之所以被称为伪元素，是因为他们不是真正的页面元素，没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
类选择伪类选择器就是选区对象,伪元素选择器本质上是插入一个元素（标签盒子）
⭕注意：
1.伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容，设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
2.伪元素是不占位置的。
案例：鼠标经过显示阴影悬空效果
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
div {
width: 250px;
height: 250px;
background-color: pink;
margin: 200px auto;
position: relative;
border-radius: 8px;
}
div:hover::before {
content: "";
width: 100%;
height: 100%;
/* border: 10px solid yellow; */
box-shadow: -1px -1px 6px rgba(0,0,0,.3);
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 8px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
过渡（CSS3）
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或lavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果）,并且当前元素只要有“属性”发生变化时即存在两种状态（我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。(不是写在hover里面)
语法格式：
transition:要过渡的属性 花费时间 运动曲线 何时开始；
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的CSS属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是0。单位s必须写 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是"ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是0。 |
如果想要所有的属性都变化过渡，写一个a‖就可以
transition-timing-function属性：
linear—匀速
ease—逐渐慢下来
ease-in—加速
ease-out—减速
ease-in-out—先加速后减速
2D变形(CSS3)transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Fash才可以实现的效果。
变形转换transform transform变换变形的意思
1、移动translate(x，y)
transform:translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，X、y可为负值；
translate(x,y)水平方向和垂直方向同时移动(也就是x轴和y轴同时移动)
translateX(x)仅水平方向移动（轴移动）
translateY(Y)仅垂直方向移动（轴移动）
使用transform让盒子居中的完美办法
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
div {
height: 200px;
width: 200px;
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute; /*问题：为什么加绝对定位*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、缩放scale(x,y)
transform: scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scal方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(y轴缩放)
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大，如果只写一个参数，那么就是水平垂直等比缩放。
应用：经过图片图片放大
div {
height: 200px;
width: 200px;
position: relative;
left: 250px;
top: 250px;
border: 1px solid pink;
overflow: hidden;/*放大隐藏多余部分*/
}
div img {
height: 200px;
width: 200px;
transition: all 0.5s;/*记得加载图片上才能让图片缓慢放大*/
}
div.father:hover img {
transform: scale(1.2);
}
3、旋转rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform: rotate(45deg);
注意单位是deg度数
transform-origin可以调整元素转换的原点
div{
transform-origin:left top;
transform:rotate(45deg);
}/*改变元素原点到左上角，然后进行顺时旋转45度*/
如果是4个角，可以用left top这些，如果想要精确的位置，可以用px像素。
div{
transform-origin:10px1px;
transform:rotate(45deg);
}/*改变元素原点到×为16y为16，然后进行顺时旋转45度*/
4、倾斜skew(deg,deg)
transform:skew(30deg,edeg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。(逆时针)
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
3D变形(CSS3)transform
左手坐标系
伸出左手，让拇指和食指成“L“形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
x左边是负的，右边是正的
y上面是负的，下面是正的
Z里面是负的，外面是正的
1、rotateX()
就是沿着X立体旋转，其余rotateY()、rotateZ()同理
img{
transition: all 0.5s ease 0s;
}
img:hove{
transform:rotatex(180deg);
}
2、透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理：近大远小。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
3、translateZ(z)
transformZ的直观表现形式就是大小变化，实质是Y平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspectivel属性）。比如设置了perspective为200px:那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
4、translate3d(x,y,z)
【注意】其中，和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；Z只能设置长度值
开门案例
<style>
section {
width: 450px;
height: 300px;
border: 1px solid pink;
margin: 100px auto;
position: relative;
background-image: url(./老师求放过.png);
perspective: 1000px; /*给父盒子添加透视效果*/
}
.door-l,
.door-r {
width: 50%;
height: 100%;
background-color: pink;
position: absolute;
transition: all 0.5s;
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left;/*左侧盒子按左边翻转*/
}
.door-r {
right: 0;
border-left: 1px solid #000;
float: right;
transform-origin: right;
}
/*门把手*/
.door-l::before,
.door-r::before {
content: "";/*使用伪元素一定要记得加！！！*/
height: 20px;
width: 20px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);/*向上是负的！*/
}
.door-r::before {
left: 5px;
}
section:hover .door-l {/*注意是鼠标经过section盒子门才动！*/
transform: rotateY(-130deg);
}
section:hover .door-r {
transform: rotateY(130deg);
}
</style>
5、backface-visibility
backface-visibility属性定义当元素不面向屏幕时是否可见。
动画(CSS3)animation（重点）
动画是CSS3中具有颜覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是0。 |
| animation-timing-function | 规定动画的速度曲线。默认是"ease"。 |
| animation-delay | 规定动画何时开始。默认是0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是"normal'"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running"。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画”
1、一组动画(from...to)
<style>
div {
height: 100px;
width: 100px;
background-color: pink;
/*animation: go 2s;一般定义必须定义的两个,看后面的需求添加功能*/
animation:go 1s ease 0s infinite alternate;/*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；*/
}
@keyframes go {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
</style>
2、多组动画（0% 10% ... 100%）
<style>
menu {
height: 100px;
width: 100px;
background-color: pink;
animation:go 1s linear 0s infinite;/*引用动画*/
}
/*定义动画*/
@keyframes go {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(400px,0,0);
}
50% {
transform: translate3d(400px,40px,0);
}
75% {
transform: translate3d(0,40px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
</style>
<menu></menu>
伸缩布局(CSS3)(重点)
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
各属性详解
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width最小值 min-width:280px 最小宽度不能小于280
max-width:1280px 最大宽度不能大于1280
<style>
address {
height: 100px;
width: 80%;/*父盒子不能固定宽度,不然不会自适应缩放*/
border: 1px solid black;
margin: 100px auto;
display: flex;/*伸缩布局模式*/
min-width: 200px;
}
address div {
height: 100%;
}
address div:nth-child(1){
background-color: skyblue;
width: 100px;/*固定宽度*/
}
address div:nth-child(2) {
background-color: springgreen;
margin: 0 5px;
flex: 1;/*不要单位!*/
}
address div:nth-child(3) {
background-color: skyblue;
flex: 2;
}
</style>
<address>
<div></div>
<div></div>
<div></div>
</address>
2.f1ex-direction调整主轴方向（默认为水平方向）
flex-direction:column垂直排列
flex-direction:row水平排列
3、justify-contenti调整主轴对齐（水平对齐）
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序,但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序,但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
4、align-items调整侧轴对齐（垂直对齐，用于单行较多）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下） |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 |
5、flex-wrap控制是否换行
当我们子盒内容宽度多于父盒子的时候如何处理
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
6、align-content堆栈(由flex-wrap产生的独立行)对齐（多行对齐垂直方式）
align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况进行排列。
⭕必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列flex-direction:row并且设置换行，flex-wrap:wrap这样这个属性的设置才会起作用。
| 值 | 描述 | 测试 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
7、flex-flow是flex-direction、flex-wrap的简写形式（2，5合写）
flex-flow: flex-direction flex-wrap;
白话记：fex-flow:排列方向换不换行；
两个中间用空格
display:flex;
/*flex-direction: row;
flex-wrap: wrap;
这两句话等价于下面的这句话*/
f1eX-f1ow: column wrap;/*两者的综合*/
8、order控制子项目的排列顺序，正序方式排序，从小到大
用整数值来定义群列顺序，数值小的排在前面。可以为负值。默认值是0（用CSS控制盒子的前后顺序）
order: 1;
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值
案例：携程网(略)
m.ctrip.com/html5
1、快捷方式
1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成
2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div
3.如果有父子级关系的标签，可以用>,比如ul>li就可以了
4.如果有兄弟关系的标签，用+就可以了比如div+p
5.如果生成带有类名或者id名字的，直接写.demo或者#demo tab键就可以了
例子：
输入：.a+.head+.mian>.left+.right
快捷输出：
<div class="a"></div>
<div class="head"></div>
<div class="mian">
<div class="left"></div>
<div class="right"></div>
</div>
2、犯过的错
给margin忘记加px，而font-weight反而加了
body类名和style类名不一致
量边距的时候把边框量进去了
css高度不会继承（有哪些是不可以继承？）
两个行内、行内块之间有缝隙，使用浮动能够清除
属性选择器什么时候加引号，什么时候不加要记得
盒子的居中和文字的居中
什么时候用margin，什么时候用padding
定位学不明白
3、一些补充的小知识
span是行内元素，无法使用类（或id）给span加CSS样式，只能转换为块级元素才可以。
posted on
