一.CSS简介
1.1HTML局限性
只关注内容的语义，可以做简单的样式但是很臃肿且繁琐
1.2CSS优势
CSS层叠样式表，标记语言
设置HTML页面中的文本内容，图片外形，可以美化HTML，让页面布局更美观
HTML做框架，CSS做样式，结构与样式相分离
1.3CSS语法规范
两个部分组成：选择器和属性值
<style>
p {
color: red;
font-size: 12px;
}
</style>1.4CSS代码风格
二.CSS基础选择器
2.1CSS选择器的作用
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
</ul>
<ol>
<li>我是ol里面的li</li>
<li>我是ol里面的li</li>
</ol>选择器作用：
根据不同需求把不同的标签选出来
简单来说，选对人，做对事
2.2选择器分类
选择器分为基础选择器、复合选择器两大类
基础选择器是由单个选择器构成的
包括：标签选择器，类选择器，id选择器，通配符选择器
2.3标签选择器
标签名作为选择器
语法：
标签名{
属性1：属性值1；
属性2：属性值2；
....
}2.4类选择器
如果想要差异化选择不同的标签，单独选一个或某几个标签，可以定位使用类选择器
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.“号表示
.类名{
属性1：属性值1；
...
}例如：将所有拥有red类的HTML元素均设置为红色（类似java方法调用）
.red {
color: red;
}
<li class="red"></li>注意：
多类名
<div class="类名1 类名2">2.5ID选择器
HTML元素以ID属性来设置ID选择器，CSS中id选择器以“#”来定义
语法
#id名{
属性1：属性值1；
...
}例如，将id为nav元素中的内容设置为红色
#nav{
color: red;
}
<div id="nav"></div>特点：只能调用一次，别人切勿使用
id选择器和类选择器的区别
2.6通配符选择器
表示选取页面中所有元素（标签）
* {
属性1：属性值1；
...
}| 基础选择器 | 作用 | 特点 | 用法 |
|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | p{ color:red;} |
| 类选择器 | 可以选出一个或者多个标签 | 可以根据需求选择 | .nav{color:red;} |
| id选择器 | 一次只能选择一个标签 | ID属性只能子啊每个HTML文档中出现一次 | #nav{color:red;} |
| 通配符选择器 | 选择所有的标签 | 适用于默认初始化 | *{color:red;} |
三、CSS字体属性
3.1字体系列
CSS使用 font-family 属性定义文本的字体系列、大小、粗细和文字样式
<style>
h2 {
font-family: '微软雅黑';
}
p {
font-family: '宋体';
}
</style>1.各种字体之间必须使用英文状态下的逗号隔开
2.一般情况下，如果有空格隔开的多个单词组成的字体，加引号
3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
4.最常见的几个字体：
body{
font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
}3.2字体大小
CSS使用 font-size 属性定义字体大小
p {
font-size: 20px;
}3.3字体粗细
CSS使用 font-weight 属性设置文字
| 属性 | 功能 |
|---|---|
| normal | 正常的字体，相当于数字值400 |
| bold | 粗体，数字值700 |
| bolder | 比继承值更重的值 |
| lighter | 比继承值更轻的值 |
| <integer> | 用数字表示文本字体粗细 取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
实际开发中，更提倡使用数字
p {
font-weight: 700;
font-weight: bold;
}3.4文字样式
CSS使用font-style来设置字体风格
p {
font-style: normal;
}| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式 |
3.5字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码
body{
font: font-style font-weight font-size/line-height font-family;
倾斜、粗细、大小、字体
}3.6字体属性小结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 单位px |
| font-family | 字体 | |
| font-weight | 字体粗细 | 加粗700或bold，不加粗normal或400 |
| font-style | 字体样式 | 倾斜italic，不倾斜normal |
| font | 字体连写 | 1.连写有顺序 2.字号和字体必须同时出现 |
四.CSS文本属性
CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
4.1文本颜色
div {
color: red;
}| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,blue |
| 十六进制 | #FF0000 |
| RGB代码 | rgb(255,0,0) |
4.2对齐文本
text-align用于设置元素内文本内容的水平对齐方式
div{
text-align: center;
}| 属性值 | 解释 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
4.3装饰文本
text-decoration规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
div {
text-decoration: underline;
}| 属性值 | 描述 |
|---|---|
| none | 默认。没有装饰线（取消链接的下划线） |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
4.4文本缩进
text-indent用来指定文本的第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 10px;
}通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p {
text-indent: 2em;
}em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，会按照父元素的1个文字大小
4.5行间距
line-height用于设置行间的距离（行高），可以控制文字行与行之间的距离
p {
line-height: 26px;
}行间距：上间距+文本间距+下间距
4.6文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 我们通常用十六进制比如#FF0000 |
| text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常我们用于段落首行缩进两个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住添加下划线underline 取消下划线none |
| line-height | 行高 | 控制行间距 |
五.CSS三种样式表
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
5.2内部样式表
写到html页面内部，把所有的CSS代码抽取出来，单独放到一个<style>标签中
1.<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰，并没有实现结构与样式完全分离
5.3行内样式表
<div style="color: red;font-size: 12px;"></div>1.style就是标签的属性
2.在双引号中间，写法要符合CSS规范
3.可以控制当前标签的设置样式
4.书写繁琐，没有体现结构与样式相分离
5.4外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中
2.在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">rel:定义当前文档与被连接文档之间的关系，在这里要制定"stylesheet",表示被连接文档是一个样式表文件
href：定义所连接外部样式表文件的url，可以是相对路径，也可以是绝对路径
水平线标签
六.Chrome调试工具
七.Emmet
7.1快速生成HTML结构标签
7.2快速生成CSS语法
初学者不建议使用，会记不住单词
八.CSS的复合选择器
8.1什么是复合选择器
8.2后代选择器(重要)
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 语法:
上述语法表示选择元素1里面的所有元素2（后代元素)
1.元素1和元素2中间用空格隔开
2.元素1是父级，元素2是子级，最终选择的是元素2
3.元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
8.3子选择器(重要）
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素 语法:
上述语法表示选择元素1 里面的所有直接后代(子元素)元素2 例如:
上述语法表示选择元素1 里面的所有直接后代(子元素)元素2 例如:
1.元素1和元素2中间用大于号隔开 2.元素1是父级，元素2是子级，最终选择的是元素2 3.元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
8.4并集选择器(重要）
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分 语法:
上述语法表示选择元素1和元素2 例如:
1.元素1和元素2中间用逗号隔开 2.逗号可以理解为和的意思 3.并集选择器通常用于集体声明
8.5伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素. 伪类选择器书写最大的特点是用冒号(:)表示，比如:hover、 :first-child。 因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器
8.6 链接伪类选择器
链接伪类选择器注意事项
1.为了确保生效，请按照LVHA的循顺序声明:link -:visited -:hover - :active。
2.记忆法:lovehate或者Iv包包hao。
3因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际工作开发中的写法
/*a是标签选择器 所有的链接*/
a {
color: gray;
}
/* :hover是链接伪类选择器 鼠标经过*/
a:hover{
color: red;/*鼠标经过的时候，由原来的灰色变成红色*/
}8.7 :focus伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说
input:focus {
background-color: yellow;
}8.8复合选择器总结
| 选择器 | 作用 | 特征 | 隔开符号及用法 |
|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 符号是空格 |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 符号是大于 |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 符号是逗号 |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 重点记住 a{}和a:hover实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | input:focus记住这个写法 |
九.CSS元素显示模式
9.1什么是元素显示模式
作用：网页的标签非常多，在不用地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型
9.2块元素
<h>~~~<h6> <p><div><ul><ol>等
块级元素的特点：
注意：
9.3行内元素
<a><strong><b><em>这都是行内元素
特点：
注意：
9.4行内块元素
<img/><input/><td>同时具有块元素和行内元素的特点
特点：
9.5元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个块级元素 | 不可以设置宽高 | 本身内容宽度 | 容纳文本或其它行内元素 |
| 行内块元素 | 一行放多个行内快元素 | 可以 | 本身内容宽度 |
9.6元素模式转换
display: block;
/*行内元素转换为块级元素*/
display: inline;
/*块级元素转换为行内元素*/
display: inline-block;
/*转换为行内块元素*/十.CSS背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
10.1背景颜色
10.2背景图片
10.3背景平铺
10.4背景位置
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top|center|bottom|left|center|right 方位名词 |
1.参数是方位名词
1.如果指定的两个值都是方位名词，则两个值前后顺序无关
2.如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确坐标
1.第一个是x坐标，第二个是y坐标
2.第一个是X坐标，第二个默认垂直居中
3.混合单位
第一个是x坐标，第二个是y坐标
10.5背景图像固定（背景附着）
设置背景图像是否固定或者随着页面的其余部分滚动
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
10.6背景复合写法
节约代码
background:背景颜色 图片地址 背景平铺 图像滚动 图片位置
10.7背景颜色半透明
最后一个参数是alpha透明度，取值在0-1之间
注意：把背景半透明是指盒子背景半透明，盒子里面的内容不受影响
10.8背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | color |
| background-image | 背景图片 | url |
| background-repeat | 是否平铺 | repeat/ no repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position |
| background-attachment | 背景附着 | scroll/fixed |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
| 背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3); |
十一、CSS三大特性
11.1层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
2.样式不冲突不会重叠
<style>
div {
color: red;
font-size: 12px;
}
div {
color: pink;就近原则保留pink，层叠掉red
}
</style>11.2继承性
子标签会继承父标签的某些样式：例如文本颜色，大小等
1.恰当使用继承可以简化代码，降低CSS样式的复杂性
2.子元素可以继承父元素的样式，text-,font-,line-,这些元素开头的可以继承，以及color属性
特殊继承：行高继承
<style>
div {
font: 14px/1.5 '微软雅黑';行高14*1.5px
}
p {
font: 12px;行高会改变为12*1.5px
}
</style>运用继承性，可以方便子类修改字体大小，根据字体大小自动改变行高而不用修改行高
11.3优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0 |
| 元素选择器 | 1 |
| 类选择器，伪类选择器 | 10 |
| ID选择器 | 100 |
| 行内样式style=“” | 1000 |
| !important重要的 | 最高级 |
注意点：
1.权重是有4组数字组成，但是不会有进位
2.继承的权重为0，不管父类权重有多大，子类都是继承权重都是0
权重叠加
复合选择器有权重叠加，但不会进位
<style>
ul li {权重：0001+0001
color: red;
}
li {权重：0001
color: green;
}
</style>十二、盒子模型
12.1看透网页布局的本质
网页布局过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质：就是利用CSS摆盒子
12.2盒子模型组成
盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个橙装内容的容器
CSS盒子本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容
| 构成 | 作用 |
|---|---|
| border边框 | 盒子的外边框 |
| content内容 | 盒子内的元素 |
| padding内边距 | 盒子内元素与外边框的距离 |
| margin外边距 | 盒子与盒子之间的距离 |
1.边框border
border可以设置元素的边框，有三部分组成：边框宽度，边框样式，边框颜色
语法
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细单位像素 |
| border-style | 边框的样式 solid实线 dashed虚线 dotted点线 |
| border-color | 边框颜色 |
缩写
border-top 上边框，其余同理
2.表格的细线边框table
表格table就是一个盒子，table的边框就是border
border-collapse细线边框 合并相邻的边框
table,td {
border: 1px solid blue;
border-collapse;合并相邻边框，像素不会叠加
}3.边框会影响盒子的实际大小
盒子是固定大小的，边框是在盒子的外围增加
4.内边距
padding属性用于设置内边距
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上 |
| padding-bottom | 下 |
缩写：
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 表示上下左右内边距都是5px |
| padding: 5px 10px; | 上下是5，左右10 |
| padding: 5px 10px 20px; | 上5，左右10，下20 |
| padding: 5px 10px 20px 30px; | 上5右10下20左30 顺时针 |
padding也是会影响盒子实际大小的，会把盒子撑大
好处：给盒子设定padding，元素字数不同大小不同，盒子会自动增扩
当没有设置盒子指定大小
padding不会影响盒子大小
5.外边距
margin属性用于设置盒子外边距
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上 |
| margin-bottom | 下 |
| 值的个数 | 表达意思 |
|---|---|
| margin: 5px; | 表示上下左右外边距都是5px |
| margin: 5px 10px; | 上下是5，左右10 |
| margin: 5px 10px 20px; | 上5，左右10，下20 |
| margin:5px 10px 20px 30px; | 上5右10下20左30 顺时针 |
6.外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定宽度
2.盒子左右外边距都设置为auto
常见的写法：
7.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
8.清除内外边距
网页元素很多带有默认的内外边距，不同浏览器默认的值也不一样，
因此在布局之前，首先要清除网页元素的内外边距
* {
margin: 0;
padding: 0;
}CSS第一行代码
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了
12.3PS操作
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
十三、盒子模型
13.1圆角盒子
语法
border-radius属性用于设置元素的外边框圆角
13.2盒子阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置 |
| v-shadow | 必需，垂直阴影的位置 |
| blur | 模糊距离 |
| spread | 阴影的尺寸 |
| color | 阴影的颜色 |
| inset | 外部阴影改为内部阴影 |
13.3文字阴影
text-shadow
语法
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置 |
| v-shadow | 必需，垂直阴影的位置 |
| blur | 模糊距离 |
| color | 阴影的颜色 |
十四、CSS浮动
1、浮动
1.1传统网页布局的三种方式
网页布局的本质，用CSS来摆放盒子，把盒子摆放到相应位置
CSS提供了三种传统布局方式
1.2标准流（普通流、文档流）
标签按照规定好的默认方式排列
1.块级元素会独占一行，从上向下顺序排列
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
标准流最基本的布局方式
1.3为什么需要浮动
1.如何让多个块元素并列一行
1.用标准流的块元素转行内块，但是会有间隙
2.如何实现两个盒子的左右对齐
总结：有很多布局效果，标准流没办法完成，但浮动可以，因为浮动可以改变布局的默认方式
网页布局第一准则：多个块级元素纵向排列标准流，横向排列浮动
1.4什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法
选择器 { float: 属性值；}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
1.5浮动特性（重难点）
（如果不给浮动盒子设置宽度，那么盒子大小由盒子内元素大小决定）
最重要的特性
1.脱离标准普通流的控制移动到指定位置，俗称脱标
2.浮动的盒子不再保留原先的位置
第一个盒子加了浮动以后浮在空中，第二个盒子就顶上去变成了第一个盒子
第一个盒子就会压住第二个盒子
1.6浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
2.常用网页布局
2.1常用网页布局
top banner box footer
3.清除浮动
3.1为什么要清除浮动
1.父级没高度
2.子盒子浮动了
3.影响下面布局了
3.2清除浮动本质
1.本质上是清除浮动元素脱离标准流造成的影响
2.如果父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流
3.3清除浮动
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素 |
| both | 清除左右 |
清楚浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
方法：
额外标签法（隔墙法）不推荐，结构化较差
在一行浮动之后添加一个新标签，调用clear：both
父级添加overflow
子不教父之过
overflow:hidden\auto;
缺点：无法显示溢出的部分
after伪元素法（直接复制代码，常用）
升级版额外标签法
.clearfix: after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}优点：没有增加标签，结构更简单
双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}代码更简洁
css书写顺序（重点）
设计布局整体思路
十五、定位
1.为什么要定位
1.一个模块盖住另一个模块
2.滚动窗口时某个模块固定在屏幕的某个位置
1.浮动可以让多个块级盒子并列一行没有缝隙排列显示，经常用于横向排列盒子
2.定位是可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，压住其他盒子
2.定位组成
定位=定位模式+边偏移
定位模式：
决定元素的定位是，通过position
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到最终位置
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底端偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左端偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右端偏移量，定义元素相对于其父元素右边线的距离 |
3.静态定位static(了解)
默认定位方式，无定位
按照标准流特性摆放位置，没有边偏移
很少用到
4.相对定位relative(重要)
相对定位，元素在移动位置的时候，相对于它原来的位置来说
给绝对定位当父类
特点：
5.绝对定位absolute(重要)
移动，相对于祖先元素来说
特性：
6.固定定位fixed(重要)
固定元素于浏览器可视区的位置
特点：
小技巧：固定在版心右侧位置
小算法：右移50%+版心一般距离
7.粘性定位sticky
可以被认为是相对定位和固定定位的混合
特点：
8.总结
| 定位模式 | 是否脱标 | 移动位置 |
|---|---|---|
| static静态 | 否 | 不能使用边偏移 |
| relative相对 | 否 | 相对自身位置移动 |
| absolute绝对 | 是 不占有位置 | 带定位的父级 |
| fixed固定 | 是 | 浏览器可视区 |
| sticky粘性 | 否 | 浏览器可视区 |
网页布局总结
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局
十六、元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但我们刷新页面，会重新出现
本质：让一个元素在页面中隐藏或者显示出来
1.display属性
用于设置一个元素应如何显示
display隐藏元素后，不再占有原来的位置
2.visibility可见性
用于指定一个元素应可见还是隐藏
visibility隐藏元素后，继续占有原来的位置
3.overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过指定高度及宽度）时，会发生什么
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容与否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分
十七、css高级技巧
一、精灵图
1.1为什么需要精灵图
一个网页中往往应用很多小图像，当页面中的图像过多时，服务器就会频繁接收和发送请求图片，造成服务器请求压力过大，从而大大降低页面的 加载速度
因此，为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
核心原理：将网页中一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
1.2精灵图的使用
核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
5.因为一般情况下，都是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
代码：
.box {
width: 60px;
height: 60px;
margin:100px auto;
background: url(images/sprites.png) no-repeat;
background-position: x y;(px)
}总结：
二、字体图标
2.1字体图标的产生
使用场景：主要用于显示网页中通用的常用的一些小图标
精灵图有诸多优点，但缺点很明显：
此时，有一种技术的出现很好地解决了以上问题，就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质是字体
2.2字体图标的优点
1.轻量：一个图标字体要比一系列的图像要小，一旦字体加载了，图标会马上渲染出来，减少服务器请求
2.灵活：本质其实是文字，可以很随意地改变颜色、产生阴影、透明效果、旋转等
3.兼容：几乎支持所有的浏览器，请放心使用
注意：字体图标不能代替精灵技术，只是对工作中图标的部分技术进行提升和优化
总结：
1.遇到一些结构和样式简单的小图标就用字体图标
2.遇到一些结构和样式复杂一点的小图片就用精灵图
2.3字体图标的下载和使用
1.下载
2.引入html页面
3.字体图标的追加（以后添加新的小图标）
下载网站：
icomoon
阿里iconfont字库
引入
在css样式中全局声明字体，简单理解把这些字体文件通过css引入到我们页面中
一定注意字体文件路径的问题
@font-face {
font-family:'icomoon';
src: url('')
font-weight: normal;
font-style:normal;
}三、CSS用户界面样式
3.1什么是界面样式
就是更改一些用户操作样式，以便提高更好的用户体验
3.2鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
3.3轮廓线 outline
给表单添加outline:0;或者outline:none;样式之后，就可以去掉默认的蓝色边框
3.4防止拖拽表单域
resize:none;
四、vertical-align属性应用
使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素的垂直对齐方式，但只针对行内元素和行内块元素有效
语法：
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| bottom | 把元素的顶端与行中最低元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
4.2解决图片底部默认空白缝隙问题
bug：图片底会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种：
五、溢出的文字省略号显示
1.单行文本溢出显示省略号--必须满足三个条件
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或者移动端
六、常见布局技巧
巧妙利用一个技术更快更好地布局
1.margin负值的运用
浮动时两个盒子紧紧相依，1px的边会变成2px，这时候运用margin: -1px;就能让盒子互相盖住
就会变回一个像素的状况
ul li:hover {
//如果li都有定位，则利用z-index提高层级
z-index: 1;
border: 1px solid blue;
}
ul li:hover {
//如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
}2.文字围绕浮动元素
文字会自动围绕浮动元素,不需要左右各写一个浮动
代码：
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}3.行内块的巧妙运用
利用行内块并列之间有缝隙
代码
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color:white;
border: 1px solid white;
text-align: center;
line-height: 36px;
text-decoration: none;
color: black;
font-size: 14px;
}
.box .prev,
.box .next{
width: 85px;
}4.css三角强化
.box {
width: 0;
height: 0;
//把上边框宽度调大
border-top:100px solid transparent;
border-right: 50px solid skyblue;
//左边和下边边框宽度设置为0
border-bottom: 0 solid blue;
border-left: 0 solid green;
}七、CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，增强兼容性，我们需要对CSS初始化
简单理解：css初始化，是指重设浏览器的样式
每个网页都必须首先进行CSS初始化
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样可以有效避免浏览器解释CSS代码时候出现乱码的问题
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
十八、HTML5、CSS新特性
一、html5
1.1新增语义化标签
| 标签 | 语义 |
|---|---|
| <header> | 头部标签 |
| <nav> | 导航标签 |
| <article> | 内容标签 |
| <section> | 定义文档某个区域 |
| <aside> | 侧边栏标签 |
| <footer> | 尾部标签 |
注意：
1.2新增多媒体标签
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件
1.<audio>音频（mp3)
2.<video>视频 (mp4)
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器暂不支持<video>标签播放视频
</video>常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题 |
| controls | controls | 向用户显示播放控件 |
| width | px | 设置播放器宽度 |
| height | px | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto(预先加载视频) none(不应加载视频) | 规定是否预加载视频(如果有了autoplay 就忽略该属性) |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
总结
1.音频标签和视频标签使用方式基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加muted属性来静音播放视频，音频不可以
1.3 新增input属性
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为Email 类型 |
| type="url" | 限制用户输入必须为url 类型 |
| type="date" | 限制用户输入必须为日期 类型 |
| type="time" | 限制用户输入必须为时间 类型 |
| type="month" | 限制用户输入必须为月 类型 |
| type="week" | 限制用户输入必须为周 类型 |
| type="number" | 限制用户输入必须为数字 类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
1.4新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开，如autocomplete="on",关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
二、CSS3的新特性
2.2属性选择器
属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助类或者id选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性且值中含有val的E元素 |
2.3结构伪类选择器
根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素与类型E |
| E:last-child | 匹配父元素中的最后一个子元素与类型E |
| E:nth-child(n) | 匹配父元素中的第N个子元素与类型E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 制定类型E的第N个 |
nth-child(n)选择某个父元素的一个或多个特定的子元素
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15.. |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第五个） |
区别：
1.nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
2.nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第N个孩子
2.4伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
div::after {
position: absolute;
top: 10px;
right: 10px;
content: '\e91e';
}隐藏遮罩层
.tudou::before {
content: '';
//隐藏遮罩层
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: tgba(0,0,0,.4) url() no-repeat center;
}
//当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来
.tudou:hover::before {
display: block;
}伪元素清除浮动
是额外标签法的一个升级和优化
.clearfix:after {
content: ""; //伪元素必须写的属性
display: block;//插入的元素必须是块级
height: 0; //不要看见这个元素
clear: both; //核心代码清除浮动
visibility: hidden;//不要看见这个元素
}.clearfix:before,.clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear:both;
}2.5CSS3盒子模型
css3中可以通过box-sizing指定盒子模型，有两个值，1.content-box 2.border-box,
这样我们计算盒子大小的方式就发生了变化
两种情况
如果盒子模型我们改为box-sizing:border-box，那么padding和border就不会撑大盒子*（前提padding和border不会超过width宽度)
2.6CSS3其他特性
滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
css3 calc函数
calc()此css函数让你在声明css属性值执行一些计算
括号里面可以使用加减乘除来进行计算
注意：符号之间要由空格隔开
2.7css3 过渡
过渡是css3里颠覆性的特征之一，我们可以在不使用Flash动画或者js的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态 渐渐过渡到另外一个状态
可以让我们页面更好看，动感十足
经常与:hover搭配使用
1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以，如果想要所有的属性都过渡，就写一个all
2.花费时间：单位是秒s，必须写单位
3.运动曲线：默认是ease(可以省略)
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s(可以省略)
运动曲线：
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾速度是相同的 |
| ease | 默认，动画以低速开始，然后加快，结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 在括号里写上0-1的值 |
谁做过渡给谁加
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width .5s ease 1s;
}
div:hover {
width: 400px;
}三、2D变换
3.3 移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
1.语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);2.重点：
3.3旋转rotate
2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转
1.语法
2.重点
3.4转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
2.重点
3.5缩放scale
放大或缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
1.语法
2.注意：
四、动画
4.1动画的基本使用
分两步：
1.先定义动画
2.再使用（调用）动画
1.使用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width:100px;
}
25% {
width:150px;
}
100% {
width:200px;
}
}2.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
//调用动画
animation-name:动画名称
//持续时间
animation-duration:持续时间
}4.2动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称（必须） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认0（必须） |
| animation-timing-function | 规定动画的速度曲线，默认是ease |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite代表循环 |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或者暂停，默认是"running"还有"pause" |
| animation-fill-mode | 规定动画结束后状态，保持forwards；回到起始backwards |
简写：
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
1.简写属性不包括animation-play-state
2.暂停动画animation-play-state:paused;经常和鼠标经过等其他配合使用
3.想要动画走回来而不是直接跳回来，animation-direction: alternate;
4.盒子动画结束后，停在结束位置：animation-fill-mode: forwards
4.3速度曲线细节
animation-timing-function
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾速度是相同的 |
| ease | 默认，动画以低速开始，然后加快，结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 规定了时间函数中的间隔数量（步长） |
