1、CSS3简介

CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言

CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等

1.1、CSS使样式和结构分离

CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式

HTML和CSS怎么结合呢？ “选择器”就是两者的纽带

1.2、CSS的本质

1. CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来

.spec {

    color: green;

    font-weight: bold;

    font-style: italic;

}

.warn {

    font-size: 20px;

    background-color: orange;

}

2. CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单直接的罗列样式

3. 背诵CSS属性是非常重要的，属性背诵熟练程度决定了做网页的速度

1.3、CSS书写位置

1.3.1、内嵌式

在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中

在标签对中，书写

标签对，里面书写CSS语句

1.3.2、外链式

可以将CSS单独存为.css文件，然后使用标签引入它

<link rel="stylesheet" href="css/css.css">

stylesheet：关系样式

css/css.css：表路径

css.css：文件名

外链式的优点：多个html网页，可以共用一个css样式表文件

1.3.3、导入式

导入式是最不常见的样式表导入方法 css2.1特有的

<style>

    @import url(css/css.css);

</style>

2、CSS选择器

2.1、CSS2.1传统选择器

2.1.1、标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签

/*选择所有的span标签*/
span｛
    color:red;
｝
/*选择所有的p标签*/
p {
    color：green;
}

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

/*不负韶华，之争朝夕与小强的两个span都将被选择*/
<p>我们一定<span>不负韶华，只争朝夕</span></p>
<ul>
<li>小明</li>
<li>小红</li>
<li><span>小强</span></li>
</ul>

标签选择器的常见作用：标签选择器“覆盖面”非常大，所以通常用于标签的初始化

ul ｛
    /*去除所有无序列表的小圆点*/
    list-style:none;/*list列表 style样式 none没有*/
｝
a ｛
    /*去掉超链接的下划线*/
    text-decoration:none; /*text文本 decoration装饰 none没有*/
｝

2.1.2、ID选择器

认识id属性

• 标签可以有id属性，是这个标签的唯一标识
• id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
• 同一个页面上不能有相同id的标签

CSS选择器可以使用井号#前缀，选择指定id的标签

<p id="para1">我是一个段落</p>
/*选择id为para1的标签*/
#para1 {
    color: red;
}

2.1.3、class选择器

class属性表示“类名”，类名的命名规范和id的命名规范相同

使用点.前缀选择指定class的标签

/*选择class为warning的标签*/
.warning {
    color: red;
}

class类名灵活用法

• 多个标签可以为相同类名

<p class="warning">我是段落</p>
<p class="warning">我是段落</p>
<ul>
<li>我是列表项</li>
<li class="warning">我是列表项</li>
<li>我是列表项</li>
<li class="warning">我是列表项</li>
</ul>

• 同一个标签可以同时属于多个类，类名用空格隔开

/*同时属于两个类*/
<p class="warning spec">我是段落</p>
.warning {
    color: red;
}
.spec {
    /* 文字倾斜*/
    font-style: italic;
}

• 原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

.fs12 {
    font-size: 12px;
}
.fs14 {
    font-size: 14px;
}
.fs16 {
    font-size: 16px;
}
.color-blue {
    color: blue;
}
.color-red {
    color: red;
}
.color-green {
    color: green;
}

之后HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

<p class="fs18 color-green">我是一个文字</p>

2.1.4复合选择器

选择器名称	示例	示例意义
后代选择器	.box .spec	选择类名为box的标签内的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有的ul和ol标签

①后代选择器

CSS选择器中，使用空格表示“后代”

/*选择类名为box的标签后代的p标签*/
.box p {
    color: red;
}
<div class="box">
    /*下面两个p将被选择*/
    <p>我是盒子中的段落</p>
    <p>我是盒子中的段落</p>
</div>
<p>我是段落</p>
<p>我是段落</p>

“后代”并不一定是“儿子”后代选择器可以有很多空格，隔开好几代

.box ul li .spec em {
    color: red;
}
<div class="box">
    <ul>
       <li>
           <p class="spec">我是段落<em>强调文字</em></p>
      </li>
    </ul>
</div>

②交集选择器

例如:选择有.spec类的h3标签，此时应该使用交集选择器（交际选择器标签紧挨着）

h3.spec {
    font-style: italic;
}
<h3 class="spec">有.spec类的h3标签</h3>

③并集选择器

并集选择器也叫作分组选择器，逗号表示分组(都选择)

/* 同时选择ul和ol */
ul, ol {
    list-style: none;
}

---

选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

div.box li p.spec em ｛
    color: red;
｝
<div class="box">
    <ul>
        <li>
            <p>我是段落</p>
        </li>
        <li>
            <p class="spec">我是段落<em>强调文字</em></p>
        </li>
    </ul>
</div>

2.1.5、伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问的超级链接
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

• 伪类具有爱恨准则。a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效

• LOVE HATE

• :link :visited :hover :active(必须这个顺序否则不生效)

2.2、CSS3新增选择器

2.2.1、元素关系选择器

名称	示例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟的p标签
通用兄弟选择器	p~span	p元素之后所有同层级的span元素

①子选择器

子选择器从IE7开始兼容

当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

.box>p｛
｝

后代选择器不一定限制是子元素（后代选择器可以使儿子的儿子…..）

子选择器只对儿子有效，对孙子无效；后代选择器对孙子也有效

.box>p {
    color: red;
}

<div class="box">
     /*将被子选择器选中*/
    <p>我是段落</p>
    <p>我是段落</p>
    <div>
        /*不会被选中*/
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
</div>
/*不会被选中*/
<p>我是段落</p>
<p>我是段落</p>

②相邻兄弟选择器

相邻兄弟选择器从IE7开始兼容

相邻兄弟选择器 + 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

说白了，a+b就是选择“紧跟在a后面的一个b”

img+span {
    color: green;
}
<p>
    <img src="images/0.jpg" >
    /*这一个span元素会选中变绿*/
    <span>这是北京故宫</span>
    /*这个不会*/
    <span>这是北京故宫</span>
</p>
<p>
    <img src="images/1.jpg" >
    /*这一个span元素会选中变绿*/
    <span>这是北京鸟巢</span>
</p>
<span>你好</span>
<span>你好</span>

③通用兄弟选择器

通用兄弟选择器从IE7开始兼容

通用兄弟选择器~，例h3~span 选择h3元素之后所有同层级span

h3~span {
font-style: italic;
}
<span>我是前面的span</span>
<h3>我是一个三级标题</h3>
/*下面四个span被选中*/
<span>我是后面的span</span>
<span>我是后面的span</span>
<span>我是后面的span</span>
<span>我是后面的span</span>
<p>我是一个段落</p>
/*下面两个span被选中*/
<span>我是后面的span</span>
<span>我是后面的span</span>
<div>
    /*不是同一层不选中*/
    <span>多了一个级别span</span>
    <span>多了一个级别span</span>
</div>

2.2.2序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第n个子元素
:nth-of-type(n)	第n个某类型子元素
:nth-last-child(n)	倒数第n个子元素
:nth-last-of-type(n)	倒数第n个某类型子元素

:nth-child() 可以写成an + b的形式，表示从b开始每a个选一个，注意不能写为b + an

2n+1等价于odd，表示奇数 2n等价于even，表示偶数

请问下面的选择器，会让哪个p文字变蓝？

.box4 p:nth-child(3) {
        color: blue;
}

<div>
    <p>我是1号p</p>
    <p>我是2号p</p>
    <h3>我是1号h3</h3>
    <h3>我是2号h3</h3>
    /*3号p不会被选择*/
    <p>我是3号p</p>
    <p>我是4号p</p>
    <h3>我是3号h3</h3>
    <h3>我是4号h3</h3>
</div>
/*若想3号p被选择*/
.box4 p:nth-of-type(3) { 
    color: blue;
}

:nth-of-type() 将选择同种标签指定序号的子元素

序号选择器的兼容性

举例	兼容
:first-child	IE7
:last-child	IE9
:nth-child(n)	IE9
:nth-of-type(n)	IE9
:nth-last-child(n)	IE9
:nth-last-of-type(n)	IE9

2.2.3、属性选择器

示例	意义
img[alt]	选择有alt属性的img标签
img[alt=”故宫”]	选择alt属性是故宫的img标签
img[alt^=”北京”]	选择alt属性以北京开头的img标签
img[alt$=”夜景”]	选择alt属性以夜景结尾的img标签
img[alt*=”美”]	选择alt属性中含有美的img标签
img[alt~=”手机拍摄”]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt|=”参赛作品”]	选择有alt属性以“参赛作用-”开头的img标签

2.1、CSS3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，标签

伪类

2.4、伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素

伪元素用双冒号表示，IE8可以兼容单冒号

::before和::after

• ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容

a::before {
    content: "★";
}

• ::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容

::selection

• ::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter和::first-line

• ::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母 常用语英文网站

• ::first-line会选中某元素中（必须是块级元素）第一行全部文字 常用语设置标题h标签

2.5、层叠性和选择器权重计算

2.5.1、层叠性

• CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质

• 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

<p id="para" class="spec">我是段落</p>
p {
    color: red;
}
.spec {
    font-style: italic;
}
#para {
    text-decoration: underline;
}

2.5.2、层叠性的冲突处理

如果多个选择器定义的属性有冲突呢？

CSS有严密的处理冲突的规则

id权重> class权重> 标签权重

2.5.3、复杂选择器权重计算

• 复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重

/*权重(2,0,1)*/
#box1 #box2 p {
    color: red;
} 
/*(2,1,2)* 权重最大所以是这个/

#box1 div.box2 #box3 p {
    color: green;
}

/*(0,3,1)*/
.box1 .box2 .box3 p {
    color: blue;
}

<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>我是段落</p> /*最终green*/
        </div>
    </div>
</div>

2.5.4、!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important

.spec {
    color: blue !important;
}

很多公司不允许使用!important，因为这会带来不经意的样式冲突

3、CSS3文本与字体属性

3.1、常用文本样式属性

3.1.1、color属性

• color 属性可设置文本内容的前景色
• color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
• 英语单词表示法，比如color: red; 仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确

①color属性-十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示

color: #ff0000;

比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字

如果颜色值是#aabbcc的形式，可以简写为#abc黑色是#000，白色是#fff，常见的灰色有#ccc、#333、#2f2f2f等

②color属性-rgb()表示法

颜色也可以用rgb()表示法

color: rgb(255, 0, 0);

③color属性-rgba()表示法

颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心

rgba()表示法从IE9开始兼容

3.1.2、font-size属性

font-size属性用来设置字号，单位通常为px。今后还会介绍em、rem单位。

font-size: 30px;

网页文字正文字号通常是16px，浏览器最小支持10px字号

3.1.3、font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

示例	意义
font-weight: normal;	正常粗细，与400等值（400无单位）
font-weight: bold;	加粗，与700等值
font-weight: lighter;	更细，大多数中文字体不支持
font-weight: bolder;	更粗，大多数中文字体不支持

3.1.4、font-style属性

font-style属性设置字体的倾斜

示例	意义
font-style: normal;	取消倾斜，比如可以把天生倾斜的i、em等标签设置为不倾斜
font-style: italic;	设置为倾斜字体（常用）
font-style: oblique;	设置为倾斜字体（用常规字体模拟，不常用）

3.1.5、text-decoration属性

text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）

示例	意义
text-decoration: none;	没有修饰线
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

3.1.6、font-family属性

中文字体也可以称呼它们的英语名字

中文字体名	等价的英文字体名
font-family: “微软雅黑”;	font-family: “Microsoft Yahei”;
font-family: “宋体”;	font-family: “SimSun”;

• 字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少

• 如何设置为用户电脑中没有的字体呢？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件

①定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件

当我们拥有字体文件之后，就可以用@font-face定义字体

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    src: url('eot字体文件地址') format('embedded-opentype'),
        url('woff2字体文件地址') format('woff2'),
        url('woff字体文件地址') format('woff'),
        url('ttf字体文件地址') format('truetype'),
        url('svg字体文件地址') format('svg');
}

②阿里巴巴普惠体

• 阿里巴巴提供了一套免费商用授权的普惠字体，网址https://www.iconfont.cn/webfont

• 使用阿里巴巴普惠字体也省去了下载字体的麻烦

3.1.7、font合写属性

font属性可以用来作为font-style, font-weight,font-size, line-height和font-family属性的合写

/*从左到右依次表示：字号/行高 字体*/
font: 20px/1.5 Arial, "微软雅黑";
/*从左到右依次表示：倾斜 加粗 字号/行高 Arial与微软雅黑字体*/
font: italic bold 20px/1.5 Arial, "微软雅黑";

3.2、段落和行相关属性

3.2.1、text-indent属性

text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作

/*em表示字符宽度*/
text-indent: 2em;

3.2.2、line-height属性

• line-height属性用于定义行高，我们要认识什么是行高

• 行高可以理解为就是文字顶部到下一行文字顶部的距离

• line-heigh属性的单位可以是以px为单位的数值；还可以是百分数，表示字号的倍数；也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法

/*line-heigh属性的单位可以是以px为单位的数值*/
line-height: 30px;
/*line-heigh属性也可以是百分数，表示字号的倍数*/
line-height: 150%;
/*line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法*/
line-height: 1.5;

3.2.3、单行文本垂直与水平居中

设置行高=盒子高度，即可实现单行文本垂直居中

设置text-align: center，即可实现文本水平居中

3.3、继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效

• color
• font- 开头的
• list- 开头的
• text- 开头的
• line- 开头的

因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了

就近原则

在继承的情况下，选择器权重计算失效，而是“就近原则”

如果有选择器选择了标签则选择器权重肯定大于继承

4、CSS3盒模型

4.1、盒模型基本概念

4.1.1、认识盒模型

什么是盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

• 盒子的总宽度 = width + 左右padding + 左右border
• 盒子的总高度 = height + 上下padding + 上下border
• width、height不是盒子总宽高

4.1.2、width和height属性

①width属性

• width属性表示盒子内容的宽度
• width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
• 当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

②height属性

• height属性表示盒子内容的高度
• height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
• 盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0

4.1.3、padding属性

①padding是什么

• padding是盒子的内边距，即盒子边框内壁到文字的距离

• 四个方向的padding，可以分别用小属性进行设置

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

②padding的四数值写法

padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

/*上 右 下 左*/
padding: 10px 20px 30px 40px;

③padding的三数值写法

padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding

/*上 左右 下*/
padding: 10px 20px 30px;

④padding的二数值写法

padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding

/*上下 左右*/
padding: 10px 20px;

注：可以用小属性层叠大属性

4.1.4、margin属性详解

①margin是什么

• margin是盒子的外边距

• margin也有四个方向

小属性	意义
margin-top	上margin,向上踹
margin-right	右margin，向右踹
margin-bottom	下margin，向下踹
margin-left	左margin，想做踹

②margin的塌陷

• 竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

• 竖直方向的margin不叠加以大数为准

• 一些元素有默认的margin比如body、ul、p等都有默认的margin，在开始制作网页的时候，要将他们清除

/*通配符选择器表示选择所有元素*/
*｛
    margin: 0;
    padding: 0;
｝
/*通配符有效率问题
应该使用并集选择器(推荐)*/
body, ul, p｛
    margin: 0;
    padding: 0;
｝

③盒子的水平居中

将盒子左右两边的margin都设置为auto，盒子将水平居中

.box {
    margin: 0 auto;  /*上下是0，左右自动*/
}

文本居中是text-align: center; 和盒子水平居中是两个概念

盒子的垂直居中，需要使用绝对定位技术实现

4.1.5、盒模型计算

• 父盒子的width和height是子盒子实际可用的面积 不包括padding和border

比如width和height都是500px，border10px，padding40px则盒子可用的面积就是width400px，height400px。

4.1.6、box-sizing属性

• 将盒子添加了box-sizing: border-box; 之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为“内缩”的，不再“外扩”

• 即盒子大小固定，增大或者减小padding和border就会相应的减小或增大width和height。

• box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少

box-sizing属性兼容到IE9

4.2、行内元素和块级元素

4.2.1、display属性

display属性类型	是否可以并排显示	是否可以设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i

行内块

• img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示

4.2.2、行块元素的转换

• 使用display:block;即可将元素转为块级元素
• 使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
• 使用display:inline-block;即可将元素转为行内块

4.2.3、元素的隐藏

• 使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
• 使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置

5、CSS3浮动和定位

5.1、浮动

5.1.1、浮动的基本概念

①浮动的最本质功能

浮动的最本质功能：用来实现并排

float:left;可设置右浮动 float:right;即可设置右浮动（注意下图顺序）

②浮动的使用要点

• 浮动使用要点：要浮动，并排的盒子都要设置浮动(要浮动都浮动)
• 父盒子要有足够的宽度，否则子盒子会掉下去

③浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素

④浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等

5.2、使用浮动实现网页布局

注意事项：

• 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
• “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动
• div是免费的！不要节约盒子！ 不要节约盒子！不要节约盒子！

5.3、BFC规范和浏览器差异

5.3.1、BFC规范

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

若一个盒子不设置height，当内容子元素都浮动时，无法撑起，因为这个盒子没有形成BFC

5.3.2、如何创建BFC

• 方法①：float的值不是none（浮动可以形成BFC）

• 方法②：position的值不是static或者relative

• 方法③：display的值是inline-block、flex或者inline-flex

• 方法④：overflow:hidden;

5.3.3、什么是overflow:hidden;

• overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏

• overflow:hidden;是非常好用的让盒子形成BFC的方法

5.3.4、BFC的其他作用

• BFC可以取消盒子margin塌陷
• BFC可以可以阻止元素被浮动元素覆盖

5.3.5、浏览器差异

IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”

如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”

5.4、清除浮动

浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

清除浮动的方法：

• 清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性

/*若p浮动清除浮动*/
<div>   /*这是父盒子要加overflow:hidden;*/
    <p></p>
    <p></p>
</div>
<div> /*这是父盒子要加overflow:hidden;*/
    <p></p>
    <p></p>
</div>

• 清除浮动方法2：给后面的父盒子设置clear:both属性。
  • clear表示清除浮动对自己的影响，both表示左右浮动都清除

<div>  
    <p></p>
    <p></p>
</div>
<div> /*这里设置clear:both*/
    <p></p>
    <p></p>
</div>

• 清除浮动方法3：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。

<div>   /*这里添加::after，设置clear:both*/
    <p></p>
    <p></p>
</div>
<div> /*这里添加::after，设置clear:both*/
    <p></p>
    <p></p>
</div>

清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子

<div>  
    <p></p>
    <p></p>
</div>

<div>  /*这里设置clear:both*/
</div>

<div>
    <p></p>
    <p></p>
</div>

5.2、定位

5.2.1、相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位

/*如下图*/
position: relative;
top: 100px;
left: 100px;

①位置描述词

• left 向右移动；right向左移动；top向下移动；bottom向上移动

• 值可以为负数，即往规定方向相反移动

②相对定位的性质

• 相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响

③相对定位的用途

• 相对定位用来微调元素位置
• 相对定位的元素，可以当做绝对定位的参考盒子（子绝父相）

5.2.2、绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

position: absolute;

top: 100px;

left: 100px;

①位置描述词

• left 到左边的距离；right到右边的距离；top到上边的距离；bottom到下边的距离

position: absolute;

bottom: 100px;

right: 100px;

绝对定位

②绝对定位脱离标准文档流

• 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖
• 脱离标准文档流的方法：浮动、绝对定位、固定定位

③绝对定位的参考盒子

• 绝对定位的盒子并不是永远以浏览器作为基准点
• 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”

④绝对定位的盒子垂直居中与水平居中

绝对定位的盒子垂直居中是一个非常实用的技术

/*垂直居中*/
position: absolute;
top: 50%;
margin-top: -自己高度一半;
/*水平居中*/
position: absolute;
left: 50%;
margin-left: -自己宽度一半;

⑤堆叠顺序z-index属性

• z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

⑥绝对定位的用途

• 绝对定位用来制作“压盖”、“遮罩”效果（导航栏上的左右切换图片按钮）
• 绝对定位用来结合CSS精灵使用
• 绝对定位可以结合JS实现动画

5.3、固定定位

固定定位：不管页面如何卷动，它永远固定在那里

position: fixed;

top: 100px;

left: 100px;

固定定位

①固定定位注意事项

• 固定定位只能以页面为参考点，没有子固父相这个性质
• 固定定位脱离标准文档流

②固定定位的用途

固定定位的用途：“返回顶部”、“楼层导航”

6、CSS3边框与圆角

6.1、边框

6.1.1、边框三要素

①border属性

border属性需要三个要素(线宽、线型、线颜色)

border: 1px solid red;
/*三个参数分别是线宽度 线型 线颜色*/

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

②边框的三要素小属性**

边框三要素可以拆分为小属性

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

小属性的存在是为了覆盖大属性

6.1.2、四个方向的边框

①四个方向的边框

属性	意义
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

②四个方向边框的三小要素属性

属性	意义
border-top-width	上边框宽度
border-top-style	上边框线型
border-top-color	上边框颜色

上面的top可改为 right、bottom、left。

③去掉边框

border-left: none;属性即可去掉左边框，以此类推

④巧妙的利用边框的特性制作三角形

.box {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            /*小属性覆盖大属性*/
            border-top-color: red;
        }

/*必须设置宽高*/

6.2、圆角

6.2.1、border-radius属性

border-radius属性的值通常为px单位，表示圆角的半径

border-radius: 10px;
/*10px表示以10px为半径的圆内切*/

border-radius属性可以单独设置四个圆角

border-radius: 10px 20px 30px 40px; 
/*左上 右上 右下 左下*/

四个圆角的小属性:

属性	意义
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角

四个圆角小属性

6.2.2、border百分比单位

border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里

border-radius: 20%;

20%

6.2.3、正圆形

正方形盒子如果设置的border-radius属性为50%，就是正圆形

border-radius: 50%;

6.3、盒子阴影

6.3.1、box-shadow属性

box-shadow属性用来实现盒子的阴影

box-shadow: 10px 20px 30px rgba(0,0,0,.4);
/* x偏移 y偏移 模糊量 颜色*/

①阴影延展

第四个px

box-shadow:  10px 20px 30px 40px rgba(0,0,0,.4);
/* x偏移 y偏移 模糊量 阴影延伸 颜色*/

②内阴影

box-shadow属性值前加inset单词，表示内阴影

box-shadow: inset  10px 20px 30px 40px rgba(0,0,0,.4);

/* 内阴影 x偏移 y偏移 模糊量 阴影延伸 颜色*/

7、css3背景与渐变

7.1、背景基础知识

7.1.1、背景颜色基础知识

①background-color属性

• background-color属性表示背景颜色
• 背景颜色可以用十六进制、rgb()、rgba()表示法表示
• padding区域是有背景颜色的

7.1.2、背景图片基础知识

②background-image属性

• background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径

background-image: url(images/bg1.jpg);

如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发

7.2、背景图片高级属性

7.2.1\背景图片的重复模式

background-repeat属性

background-repeat属性用来设置背景的重复模式

值	意义
repeat;	x，y均平铺（默认）
repeat-x;	x平铺
repeat-y;	y平铺
no-repeat;	不平铺

7.2.2、背景尺寸

①background-size属性

• background-size属性用来设置背景图片的尺寸，兼容到IE9
• 值也可以用百分数来设置，表示为盒子宽、高的百分之多少
• 需要等比例设置的值，写auto

background-size: 100px 200px; /*宽度 高度*/

background-size: 25% 25%;/*百分比*/

background-size: 300px auto;/*auto*/

②contain和cover

• contain和cover是两个特殊的background-size的值
• contain表示将背景图片智能改变尺寸以容纳到盒子里
• cover表示将背景图片智能改变尺寸以撑满盒子

7.2.3、背景裁切

background-clip属性

• background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。

值	意义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边（padding），不绘制到边框处（仅在dotted、dashed边框可察觉）
content-box	背景裁剪至内容区

7.2.4、背景固定

background-attachment属性

• background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

值	意义
fixed	自己滚动条不动，外部滚动条不动
local	自己滚动条动，外部滚动条动
scroll	自己滚动条不动，外部滚动条动（默认值）

7.2.5背景图片位置

background-position属性

• background-position属性可以设置背景图片出现在盒子的什么位置
• 可以用top、bottom、center、left、right描述图片出现的位置

background-position: 100px 200px;
background-position: center center;

7.2.6、CSS精灵

• CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图

• CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦

7.2.7、background综合属性

一些常用的背景相关小属性，可以合写到一条background属性中

background: white url(images/archer.png) no-repeat center center;
          /*背景颜色 背景图片             背景重复   背景位置      */

7.3、渐变背景

7.3.1、线性渐变

①渐变背景

盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景

background-image: linear-gradient(to right, blue, red);

                                /*渐变方向 开始颜色 结束颜色*/

渐变方向也可以写成度数

background-image: linear-gradient(45deg, blue, red);

/*deg表示度数*/

可以有多个颜色值，并且可以用百分数定义它们出现的位置

linear-gradient(to bottom, blue, yellow 20%, red);

/*yellow 20%从20%处为黄色*/

②浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识

品牌	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
欧朋	-o-

7.3.2、径向渐变

盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景

background-image:radial-gradient(50% 50%, red, blue);
/*50% 50%为圆心坐标*/

8、CSS3 2D与3D转换

8.1、2D变形

8.1.1、旋转变形

将transform属性的值设置为rotate()，即可实现旋转变形

transform:rotate(45deg);

若角度为正，则顺时针方向旋转，否则逆时针方向旋转

transform-origin属性

可以使用transform-origin属性设置自己的自定义变换原点

transform-origin: 0 0;/*旋转原点为左上角*/
transform: rotate(30deg);

8.1.2、缩放变形

将transform属性的值设置为scale()，即可实现缩放变形

当数值小于1时，表示缩小元素；大于1表示放大元素

transform:scale(3);/*放大三倍*/

8.1.3、斜切变形

将transform属性的值设置为skew()，即可实现斜切变形

transform:skew(10deg, 20deg);
/*横向纵向拉伸*/

8.1.4、位移变形

将transform属性的值设置为translate()，即可实现位移变形

transform:translate(100px, 200px);

/*向下100px 向右200px*/

• 和相对定位非常像，位移变形也会“老家留坑”，“形影分离”

8.2、3D变形

8.2.1、3D旋转

将transform属性的值设置为rotateX()或者rotateY() ， 即可实现绕横轴、纵轴旋转

transform:rotateX(30deg);  

transform: rotateY(30deg);

perspective属性

perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px

若要进行3D旋转则旋转舞台必须设置perspective属性

8.2.2、空间移动

• 当元素进行3D旋转后，即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动
• 一定记住，空间移动要添加在3D旋转之后

transform:rotateX(30deg) translateX(30px) translateZ(100px);

制作一个正方体

• 正方体的每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }
        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }
        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }
        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }
        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }
        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

9、CSS3过渡与动画

9.1、过渡

9.1.1、过渡的基本使用

①transition过渡

transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”

②兼容性

• 过渡从IE10开始兼容，移动端兼容良好
• 曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡
• 优点：动画更细腻，内存开销小

transition属性有4个要素

transition: width 1s linear 0s;
/* width：什么属性要过渡  1s 动画时长 linear：变化速度曲线 0s:延长时间 */

9.1.2、过渡的缓动效果

过渡要定义在元素的开始状态上，而不是结束状态上

①哪些属性可以参与过渡

• 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity
• 9背景颜色和文字颜色都可以被过渡
• 所有变形（包括2D和3D）都能被过渡
• 如果要所有属性都参与过渡，可以写all

transition: all 1s linear 0s;

②过渡的四个小属性

属性	意义
transition-property	那些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线
transition-delay	延迟时间

③缓动参数

transition的第三个参数就是缓动参数，也是变化速度曲线

常用缓动参数

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

9.2、动画

（一）动画的定义

可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes 动画名称{
    from｛
        trasform：rotate（0）;
    ｝
    to｛
        trasform：rotate（360deg）;
    ｝
｝

9.2.2、动画的调用

定义动画之后，就可以使用animation属性调用动画

animation: r 1s linear 0s;/*动画名字 总时长 缓动效果 延迟*/

9.2.3、动画的执行次数

第五个参数就是动画的执行次数

animation: r 1s linear 0s 3;/*动画名字 总时长 缓动效果 延迟 次数*/

如果想永远执行可以写infinite

animation: r 1s linear 0s infinite;

9.2.4、alternate和forwards

如果想让动画的第2、4、6……（偶数次）自动逆向执行，那么要加上alternate参数即可

animation: movelr 2s linear 0s infinite alternate;

如果想让动画停止在最后结束状态，那么要加上forwards

animation: changeToCircle 1s linear 0s forwards;

9.2.5、多关键帧动画

@keyframes changeColor {
    0% {
        background-color: red ;
    }
    20% {
        background-color: yellow ;
    }
    40% {
        background-color: blue ;
    }
    60% {
        background-color: green;
    }
    80% {
        background-color: purple ;
    }
    100% {
        background-color: orange;
    }
}