课程目标:
CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
- 学会使用CSS选择器
- 熟记CSS样式和外观属性
- 熟练掌握CSS各种选择器
- 熟练掌握CSS各种选择器
- 熟练掌握CSS三种显示模式
- 熟练掌握CSS背景属性
- 熟练掌握CSS三大特性
- 熟练掌握CSS盒子模型
- 熟练掌握CSS浮动
10.熟练掌握CSS定位
11.熟练掌握CSS高级技巧强化CSS
typora-copy-images-to: media
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
CSS 网页的美容师 CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。
CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！
而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看:
ps: 你跟Angelababy只差了一个妆容的距离
有人说， 没有不漂亮的女人，只有不会打扮的女人。
我想说， 没有不好看的网页，只有不会CSS的前端。
CSS初识 CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表（书写位置） CSS可以写到那个位置？ 是不是一定写到html文件里面呢？
内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
type="text/CSS">
选择器 {属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
行内式（内联样式） 内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
"> 内容
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表（外链式） 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结（位置）
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
在上面的样式规则中:1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;
”进行区分。
可以用段落 和 表格的对齐的演示。
选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
如上图所以，要把里面的小黄人分为2组，最快的方法怎办？
很多， 比如 一只眼睛的一组，剩下的一组
选择器干啥的？ 选择标签用的
这就用到基础选择器组：
CSS基础选择器 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}或者
元素名{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
课堂案例：
传智简介
类选择器 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签调用的时候用 class=“类名”即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
? 输入的时候少按一个shift键;
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
猜谜底游戏：
你猜？
命名规范： 见附件（Web前端开发规范手册.doc）
命名是我们通俗约定的，但是没有规定必须用这些常用的命名。
课堂案例：
>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
class="blue">G
class="red">o
class="orange">o
class="blue">g
class="green">l
class="red">e
多类名选择器 我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
亚瑟
刘备
安其拉
貂蝉
类名选择器 ：< div class=“nav”> 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav
< 人 class = 刘德华 > 我们想要吧div 找到 div {} .nav {}
id选择器 id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别 W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
通配符选择器 通配符 选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0;
/* 定义外边距*/
padding: 0;
/* 定义内边距*/
}
注意：
这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”; }
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";
。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
可以通过escape() 来测试属于什么字体。
| 字体名称 | 英文名称 | 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\6587\7EC6\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:字体风格 字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
font:综合设置字体样式 (重点) font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-stylefont-weightfont-size/line-heightfont-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
CSS外观属性 color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
line-height:行间距 ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration 文本的装饰 text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
“按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
菜单： 右击网页空白出—查看
小技巧：
- ctrl+滚轮 可以 放大开发者工具代码大小。
- 左边是HTML元素结构 右边是CSS样式。
- 右边CSS样式可以改动数值和颜色查看更改后效果。
交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：
交集选择器 是 并且的意思。 即…又…的意思
比如：p.one选择的是： 类名为 .one的 段落标签。
用的相对来说比较少，不太建议使用。
并集选择器 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧：
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如.one, p , #test {color: #F00;
}表示.one 和 p和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。
他和他，在一起， 在一起 一起的意思
后代选择器 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
子元素选择器 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
比如：.demo > h3 {color: red;
}说明h3 一定是demo 亲儿子。demo 元素包含着h3。
测试题
左侧侧导航栏
在不修改以上代码的前提下，完成以下任务：
- 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为橙色 (简单)
- 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
- 主导航栏里面的一级菜单链接文字颜色为绿色。（难)
伪娘
类 .one
伪类 :link
为了和我们刚才学的类选择器相区别，类选择器是一个点 比如 .demo {}而我们的伪类 用 2个点 就是 冒号比如:link{}
链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao
a {/* a是标签选择器所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {/* :hover 是链接伪类选择器 鼠标经过 */
color: red;
/*鼠标经过的时候，由原来的 灰色 变成了红色 */
}
CSS注释
CSS规则是使用/*需要注释的内容*/进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
例如：
p {
font-size: 14px;
/* 所有的字体是14像素大小*/
}
sublime快捷方式 sublime可以快速提高我们代码的书写方式
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
?
欧洲白人： 生活寒带或着是说常年温度较低的地缘,加上年日照时间少，身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色
传智黄人： 我中间的。。。
最重要的总结： 是为了更好的适应环境而完成的自然选择。
同理，我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 霸道
常见的块元素有~、、、、、- 等，其中标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。
我一样重要
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）
注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接里面不能再放链接。
- a里面可以放块级元素
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——
文章图片
?
优酷，土豆，爱奇艺，腾讯、乐视等等
- 先上传
- 在分享
HTML5通过标签来解决音频播放的问题。
使用相当简单，如下图所示
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案，如下图
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
多媒体 video
HTML5通过标签来解决音频播放的问题。
同音频播放一样，使用也相当简单，如下图
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案，如下图****
CSS3 新增选择器 结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式 - ?
li:first-child { /*选择第一个孩子 */
color: pink;
}
li:last-child {/* 最后一个孩子 */
color: purple;
}
li:nth-child(4) {/* 选择第4个孩子n代表 第几个的意思 */
color: skyblue;
}
属性选择器 选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /*class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao*=表示tao 在任意位置都可以 */
color: green;
}
属性选择器
属性选择器
属性选择器
属性选择器
属性选择器
属性选择器123
属性选择器
属性选择器
属性选择器
input[type=text]
div[class*=tao]
伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
p::first-letter {
font-size: 20px;
color: hotpink;
}/* 首行特殊样式 */
p::first-line {
color: skyblue;
}p::selection {
/* font-size: 50px;
*/
color: orange;
}
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的
content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。CSS3盒模型 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的值是会自动调整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box;
/*就是以前的标准盒模型w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小为 width + padding + bordercontent-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box;
/* padding border不撑开盒子 */
border: 15px solid red;
/* margin: 10px;
*/
/* 盒子大小为 width就是说padding 和 border 是包含到width里面的 */
}
##学成在线综合案例
转换ico图标
我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。 http://www.bitbug.net/
- 先切图 尽量透明图片 png 格式
- 把图片转换为图标 http://www.bitbug.net/
- 把ico图标放入 网站根目录下 之后 利用 引入到html里面
过渡(CSS3) 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性花费时间运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
运动曲线示意图：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性花费时间运动曲线何时开始;
*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思这句话写到div里面而不是 hover里面 */}
div:hover {/* 鼠标经过盒子，我们的宽度变为400 */width: 600px;
height: 300px
}transition: all 0.6s;
/* 所有属性都变化用all 就可以了后面俩个属性可以省略 */
transition: all 0.5s;
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》
移动 translate(x, y)
translate 移动平移的意思
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
/* 走的自己的一半 */
}
让定位的盒子水平居中
缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大 1.
旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数
transform-origin可以调整元素转换变形的原点
div{transform-origin: left top;
transform: rotate(45deg);
}/* 改变元素原点到左上角，然后进行顺时旋转45度 */
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
div{transform-origin: 10px 10px;
transform: rotate(45deg);
}/* 改变元素原点到x 为10y 为10，然后进行顺时旋转45度 */
案例旋转楚乔传
div {
width: 250px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
position: relative;
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:nth-child(1) {/* 鼠标经过div第一张图片旋转 */
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
3D变形(CSS3) transform 2d x y
3d x y z
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
rotateX()
就是沿着 x 立体旋转.
img {
transition:all 0.5s ease 0s;
}
img:hove {transform:rotateX(180deg);
}
rotateY()
沿着y轴进行旋转
img {
transition:all 0.5s ease 0s;
}
img:hove {transform:rotateX(180deg);
}
rotateZ()
沿着z轴进行旋转
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg);
*/
/* transform:rotateY(180deg);
*/
/* transform:rotateZ(180deg);
*/
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg);
*/
}
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
translateX(x)
仅水平方向移动**（X轴移动）
主要目的实现移动效果
translateY(y)
仅垂直方向移动（Y轴移动）
translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px; 那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
开门案例
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url('images/dog.gif') no-repeat cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
翻转盒子案例
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
/* 不是正面对象屏幕，就隐藏 */
}
div:hover img {
transform: rotateY(180deg);
}
动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线何时开始播放次数是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
@keyframes 动画名称 {
from{ 开始位置 }0%
to{结束}100%
}
animation-iteration-count:infinite;
无限循环播放
animation-play-state:paused;
暂停动画"
小汽车案例
body {
background: white;
}
img {
width: 200px;
}
.animation {
animation-name: goback;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes goback {
0%{}
49%{
transform: translateX(1000px);
}
55%{
transform: translateX(1000px) rotateY(180deg);
}
95%{
transform: translateX(0) rotateY(180deg);
}
100%{
transform: translateX(0) rotateY(0deg);
}
}
伸缩布局(CSS3) CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解****
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
http://m.ctrip.com/html5/ 携程网手机端地址
3、justify-content调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
子盒子如何在父盒子里面垂直对齐（单行）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
当我们子盒子内容宽度多于父盒子的时候如何处理
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
flex-flow: flex-directionflex-wrap;
白话记： flex-flow: 排列方向 换不换行;
两个中间用空格
例如：
display: flex;
/* flex-direction: row;
flex-wrap: wrap;
这两句话等价于下面的这句话*/
flex-flow: column wrap;
/* 两者的综合 */
7、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 | 项目位于各行之前、之间、之后都留有空白的容器内。 |
用css 来控制盒子的前后顺序。 用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0
order: 1;
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值
文字阴影(CSS3) 以后我们可以给我们的文字添加阴影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
- 前两项是必须写的。 后两项可以选写。
BFC(块级格式化上下文) BFC(Block formatting context)
直译为"块级格式化上下文"。
元素的显示模式
我们前面讲过 元素的显示模式 display。
分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。
那些元素会具有BFC的条件
不是所有的元素模式都能产生BFC，w3c 规范：
display 属性为 block, list-item, table 的元素，会产生BFC.
大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。
注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。
这个BFC 有着具体的布局特性：
有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。
就好比，你有了练习武术的体格了。 有潜力，有资质。
什么情况下可以让元素产生BFC
以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？
在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先…
同样，要给这些元素添加如下属性就可以触发BFC。 -float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性：
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。
BFC的主要用途
BFC能用来做什么？
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
主要用到
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
(2) 解决外边距合并问题 外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
BFC 总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
优雅降级和渐进增强 什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
类似 爬山，由低出往高处爬
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
类似蹦极，由高处往低处下落
区别：渐进增强是向上兼容，优雅降级是向下兼容。
个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
浏览器前缀
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
背景渐变 在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里之讲解线性渐变
语法格式：
background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
背景缩放(CSS3) 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain;
*/
/* background-size: cover;
*/
多背景(CSS3) 【CSS笔记】以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
