CSS学习笔记
基本样式
font-size设置字号
可使用相对单位和绝对单位
| 相对长度单位 | 说明 |
|---|---|
| em | 相当于当前对象内文本的字体尺寸 |
| px | 像素(最常用) |
| 绝对长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
p {
font-size:14px;
}font-family设置字体
常用字体有微软雅黑、宋体、黑体
p {
font-family:"microsoft yahei","\5B8B\4f53";
}字体字号常用规则：
- 网页中多使用14+px
- 尽量使用偶数数字字号，ie等老浏览器对奇数有bug
- 字体之间使用英文逗号
- 中文字体必须加引号，英文字体可不加，但英文字体名称必须在中文之前
- 如果字体中存在空格、#、$等字符，该字体必须加引号
- 尽量使用系统默认字体（宋体、微软雅黑），保证在任何用户浏览器中都能正确显示
Unicode字体，在古老的浏览器中不支持中文，可以使用Unicode编码说明字体，常用字体的Unicode编码包括：
| 字体名称 | 英文名称 | Unicode编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4f53 |
| 新宋体 | NSimSun | \65B0\5B8B\4f53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| ... | ... | ... |
font-weight设置字体粗细
字体粗细包括几个默认值，normal（正常，相当于数字400）、bold（加粗，相当于数字700）、bolder（特粗体，也相当于strong的作用）、lighter细体
其中，normal的作用是可以让标签不加粗
//设置字体粗细为700
font-witght:700;font-style字体风格
可选项为normal（正常）、italic（斜体）、oblique（倾斜）
其中normal可以让<em>标签不倾斜
font综合样式设置
/*
选择器{
font: font-style font-weight font-size line-height font-family;
}
*/
p {
font: italic bold 14px "微软雅黑";
}
.p1 {
font: 14px "微软雅黑";
}注意：
- 使用font属性时必须按照上边的语法规则顺序书写，不能更换，各个属性用空格隔开
- 不需要设置的属性可以省略，当必须要保留font-size和font-family属性，否则font不起作用
color字体颜色
.red-1{
color:red;
}
.red-2{
color:#f00;/*和#ff0000一样，提倡简写*/
}
.red-3{
color:rgb(255,0,0)
}设置颜色半透明，css3新特性。格式为rgba(0,0,0,a)，其中a为0~1之间的数
h1{
color:rgba(0,0,0,0.3);
}文字阴影
text-shadow用于设置文字阴影，用法为：text-shadow:水平位置,垂直位置,模糊距离,阴影颜色;，前两项必须写，后两项可选(有默认值)。用法如下
h1{
text-shadow:5px,5px,1px,#F00;
}
h2{
text-shadow:5px,2px;
}段落设置
line-height行高
/*一般行高比字体大7-8像素即可*/
line-height:25pxtext-align水平对齐方式，相当于html中的align对齐属性，可选值为left、right、center
text-indent首行缩进，建议使用em作为单位，1em为一个字符的宽度，如果是汉字，1em就是一个汉字的宽度
letter-spacing字间距，属性值可以是不同单位的数值，允许使用负数
word-spacing单词间距，用于定义英文单词的间距，对中文无效
综合样式
凸起或凹陷的文字
<head>
<style>
body{
background-color:#ccc;
}
div{
font-color:#ccc;
}
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>
<p>我是凸起的文字</p>
<p>我是凹陷的文字</p>
</div>
<body>设置文字水平和垂直居中的方法
- 垂直居中:设置文字的行高=盒子的高度
- 水平居中:
text-align : center
取消a标签的下划线,使用text-decoration : none
字体图标
图片的问题：
- 增加了总文件的大小
- 增加了额外的http请求，降低网络性能
- 不能随意缩放，因为缩放会失真
- 移动端场景不适用
字体图标的优点：
- 可以实现图片的效果
- 本质上是文字，可以设置颜色、阴影、透明等效果
- 几乎支持所有的浏览器
- 移动端常用
字体图标使用流程：
- UI设计师设计效果图（SVG格式），常用illustrator或Sketch设计icon图标
- 全段上传生成兼容性字体文件包
- 前端下载兼容性字体文件包到本地
- 在html文件中引入字体文件包
常用文字图标库：
在HTML中使用字体图标
<head>
<style>
/*第一步，引入字体*/
@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');
font-weight: normal;
font-style: normal;
}
/*第二步，通过span使用字体*/
span {
font-family: 'icomoon';
font-size: 100px;
color: red;
}
/*第二步，通过div使用字体*/
div::before {
font-family: 'icomooon';
fong-size: 100px;
color: green;
content: '\e91b'
}
</style>
</head>
<body>
<span></span>
<span></span>
<div>
</div>
</body>CSS背景
设置背景颜色、背景图片
div {
background-color: red;
background-image: url(../img/l.png);
/* 平铺方式，默认横纵向都平铺 */
background-repeat: no-repeat;
/* 背景图片位置，水平居中，垂直靠下 */
background-position: center bottom;
}
div {
/* 背景图片坐标，x=10px，y=10px */
background-position: 10px 10px;
}
div {
/* 混合使用文字和数字 */
background-position: 10px center;
}设置背景附着
div {
/* 默认为scroll，背景跟随滚动条滚动，设置为fixed背景固定，不随滚动条滚动 */
background-attachment: fixed;
}背景的简写方式
div{
background: #0f0 url(../img/l.png) no-repeat fixed center -25px;
}设置背景半透明
div{
background: rgba(0,0,0,0.3);
}背景图设置大小（缩放）
div{
/* 设置背景图尺寸 宽100px，高200px，对于非100*200的图片会影响效果，建议只改宽度 */
background-size: 100px 200px;
}
div{
/*宽度设置为100px*/
background-size:100px;
}
div{
/*背景图片缩放一半*/
background-size:50%;
}
div{
/* 设置为contain后，会 自动调整缩放比例，保证图片完整的显示到所在区域 */
/* 自动等比例缩放，是图片铺满整个区域，超出部分发会被隐藏 */
background-size: cover;
}设置多个背景，如果多张图片位置有部分重叠，前边的图片会把后边的覆盖。注意，这种方法中背景颜色一定要放到最后一条
div{
background:url(../images/1.png) no-repeat left top,url(.../images/2.png) no-repeat right bottom #00f;
}CSS选择器
选择器种类
类选择器
以.开头，类选择器可以重复使用。代码样例
<style>
/* 规范:尽量使用-,使用_可能有兼容性问题; */
.d-cla{
color:#080808;
}
.e-cla{
margin:3px;
font-size:12px;
}
</style>
<body>
<div class="d-cla e-cla">div_class</div>
</body>ID选择器
以#开头，ID选择器只能使用一次。代码示例
<style>
#app{
font-size:14px;
}
</style>
<body>
<div id="app">i am app</div>
</body>属性选择器
用于选取标签中带有某些特殊属性的选择器
<style>
/* 选取带有title属性的a标签 */
a[title]{
font-size:14px;
}
a[title="搜狐"]{
font-size:20px;
}
a[title^="1"]{
font-size:15px;
}
a[title*="讯"]{
font-size:16px;
}
a[title$="2"]{
font-size:17px;
}
</style>
<body>
<div>
<a href="www.baidu.com" title="百度"></a>
<a href="www.souhu.com" title="搜狐"></a>
<a href="#" title="腾讯"></a>
<a href="#" title="腾讯2"></a>
<a href="#" title="1阿里"></a>
<a href="www.sina.com"></a>
</div>
</body>具体用法说明如下
| 选择器写法 | 示例 | 含义 |
|---|---|---|
| E[attr] | 存在attr属性即可 | |
| E[attr=val] | attr属性值为val | |
| E[attr*=val] | attr属性值包含val字符，并且val字符在任意位置 | |
| E[attr^=val] | attr属性值包含val字符，并且val字符在开始位置 | |
| E[attr$=val] | attr属性值包含val字符，并且val字符在结束位置 |
逻辑选择器
- 交集选择器由标签选择器和类选择器组成，写法如下
<style>
p.p-class{
color:red;
font-size:14px;
}
</style>
<div>
<p class="p-class">abc</p>
</div>- 并集选择器，使用
,分割
<style>
div,p,span{
color:red;
font-size:14px;
}
</style>
<div>
<p>abc</p>
</div>
<span>abc</span>- 后代选择器，用于选择标签的后代（子、孙所有后代均可），使用
空格分割
<style>
/* div包含的p被选中 */
div span{
color:green;
}
</style>
<div>
<p>abc</p>
<p><span>def</span></p>
</div>
<span>abc</span>- 子元素选择器，用于选择子级（下一级）元素，使用
>分割
<style>
/* .ul-c的下一级li（亲儿子） */
.ul-c > ul > li{
color:green;
}
</style>
<div>
<ul class="ul-c">
<li>一级</li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</ul>
</div>
<span>abc</span>- 通配符选择器
*代表选择所有，代码样例
*{
font-size:15px;
}- 选择同级且在后边
/*选择block-zi类型元素后边的block-chou类型元素*/
.block-zi~.block-chou{
background:red;
}伪类选择器
伪类选择器用于向某些选择器添加特殊效果，使用:开头
链接伪类选择器
链接伪类选择器主要针对<a>标签，包括：
a:link{
/* 未访问的链接 */
/* 常用 */
font-weight:bold;
}
a:visited{
/* 已访问的链接 */
font-family:"Microsoft Yahei";
}
a:hover{
/* 鼠标移动到链接上 */
/* 常用 */
font-size:14px;
}
a:active{
/* 选定的链接，点击后不松开鼠标时 */
font-style:italic;
}
input:focus{
/*点击后鼠标移开保持点击时的状态*/
/*由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabindex属性使其支持:focus*/
}鼠标样式cursor
cursor: auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
结构（位置）伪类选择器，CSS3新特性
:first-child选取属于其父元素的第一个子元素
:last-child选取属于其父元素的最后一个子元素
:nth-child(n)选取属于其父类的第n个子元素，n可以是数字、关键词或公式
:nth-last-child(n)和nth-child相反，这里从最后一个子元素开始计数
<style>
li:first-child{
/*选择大娃*/
color:red;
}
li:last-child{
/*选择七娃*/
color:purple;
}
li:nth-child(4){
/*选择四娃*/
color:green;
}
li:nth-child(odd){
/*选择 1，3，5，7娃（所有奇数）*/
/*所有偶数为：even*/
}
li:nth-child(n){
/*选择所有，n从0开始*/
/*偶数：2n*/
/*奇数：2n+1*/
/*3的倍数：3n*/
}
li:nth-last-child(even){
/* 和nth-child相反，nth-last-child从最后一个往前数 */
color:skyblue;
}
</style>
<body>
<div>
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
<li>四娃</li>
<li>五娃</li>
<li>六娃</li>
<li>七娃</li>
</ul>
</div>
</body>目标伪类选择器
用于选取当前活动的目标元素，:target表示
:targer{
/*当前选中状态的文字变为红色*/
color:red;
}其他常用伪类选择器
:required匹配表单中必填元素:optional匹配表单中选填的元素:in-range和:out-range匹配在范围之内和不在范围之内:valid和:invalid符合表单验证的和不符合表单验证的:read-only和:read-write是否只读, 是否可读写元素。不只用于表单中,也适用于<div contenteditable=""></div>
伪元素选择器
::first-letter文本的第一个字::first-line文本的第一行::selection文字被选中的状态::before和::afterdiv::before{ content:"前边插入文字"; } div::after{ content:"后边插入文字"; } /* html */ <body> <div>abc</div> </body> /* 显示样式为： 前边插入文字abc后边插入文字 */
选择器详解
before和after伪元素
之所以被称为伪元素，是因为他们不是真正的HTML页面元素，但是其所有的用法和表现行为与真正的页面元素一样，可以对其使用CSS样式，表面上看起来是页面上某些元素的展现，实际上是CSS样式的行为
<style>
div::before{
content:"my name is ";
background-color: red;
border: 1px solid red;
}
</style>
<div>
petter
</div>注意：伪元素选择器本质上是在该元素内插入了一个元素（标签，盒子）只不过是行内元素，在浏览器控制台元素中可以看到::before元素
常见用法包括：
鼠标经过之后插入一个伪元素
div{ width: 100px; height: 200px; margin: 100px auto; position: relative; } div:hover::before{ content: "鼠标经过"; width: 100%; height: 100%; border: 10px solid rgba(255,255,255,.3); display: block;/*转换为块元素*/ position: absolute; top: 0; left: 0; box-sizing: border-box;/*把border和padding都算作width中*/ }
盒子模型
网页布局的本质：把网页元素，如文字、图片等，放到盒子中，然后通过css摆放盒子的过程。
边框
边框的语法如下：
/*边框:实线,红色,5像素*/
.border-div{
border-width:5px;
border-color:red;
border-style:solid;/*solid实线,dashed虚线,none无边框,dotted点线,double双实线*/
}
/*综合写法*/
.border-div{
border:1px solid red;
}
/*单独设置一条边*/
.border-top-div{
border-top-color:green;
border-top:1px solid green;
}设置细线表格
table{
border:1px solid red;
border-collapse:collapse;/*合并相邻边框*/
}
td{
border:1px solid red;
}
<table cellspacing="0" cellpadding="0">
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>圆角边框
/*一个数值表示四个角都相同*/
border-radius:5px;
/*取宽度和高度的一半,是一个正圆*/
width:200px;
height:200px;
border-radius:100px;
/*取50%也是一个正圆*/
border-radius:50%;
/*两个值,分别代表左上和右下10px,右上角和左下角40px,对角线的关系*/
border-radius:10px 40px;
/*三个值,左上10px,右上左下20px,右下30px*/
border-radius:10px 20px 30px;
/*四个值,左上,右上,右下,左下*/
border-radius:10px 20px 30px 40px;
/*胶囊效果*/
border-radius:100px;
height:100px;
width:200px;
/*柠檬效果*/
border-radius:100px 0;
width:200px;
height:200px;内边距
内边距☞边框与内容之间的边距
/*上下左右内边距*/
padding-left:20px;
padding-right:20px;
padding-top:30px;
padding-bottom:30px;
/*整体设置内边距*/
/*上下左右一样*/
padding:20px;
/*上下10px,左右30px*/
padding:10px 30px;
/*上10,左右20下30*/
padding:10px 20px 30px;
/*上右下左*/
padding:10px 20px 30px 40px;外边距
外边距👉边框与其他块的距离,外边距常用来定义盒子居中对齐
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
margin:10px 10px 10px 10px;水平居中效果:
/*盒子必须制定了高度,左右设置为auto*/
margin:30px auto;
height:200px;
/*文字水平居中*/
text-align:center;内外边距常见问题
清除元素的内外边距
<style> *{ margin:0; padding:0; } </style> <body></body>行内元素没有上下边距,不要指定
/*上下内外边框设置了也不起作用*/ span{ margin:30px 50px; padding:50px; }外边距合并
<style> /*div-1和div-2之间的距离为100px,两个外边距会合并,以大的外边距为准*/ .div-1{ height:300px; width:300px; margin-bottom:100px; } .div-2{ height:300px; width:300px; margin-top:50px; } </style> <body> <div class="div-1"></div> <div class="div-2"></div> </body>嵌套块外边距合并(外边距塌陷)问题
<!-- 内外嵌套的块元素,如果父块没有边框,即便给子块设置了外边距,也是父块显示外边距,子块在父块中没有外边距 --> <style> .father{ width:300px; height:300px; background-color:red; } .son{ width:100px; height:100px; background-color:green; margin-top:30px; } </style> <body> <div class="father"> <div class="son"></div> </div> </body> <!-- 决绝方式: 1. 设置父块1px边框 2. 设置溢出隐藏属性 overflow:hidden -->
盒子的宽度和高度
外盒尺寸: width+border+padding+margin
内盒尺寸: width+border+padding
如果盒子没有指定宽度和高度(100%也不行),padding不影响盒子的大小
盒子模型布局稳定性问题,如果布局使用宽度、内外边距均可实现,按照优先级选择宽度>内边距>外边距。原因是：
- margin有外边距合并
- padding会影响盒子大小，需要进行加减计算
盒子中的插入图片和背景图片
插入图片
<style> div{ width:400px; height:400px; } div img{ width:200px; height:200px; margin-top:30px; margin-left:50px; } </style> <div> <img src="../img/test.png" alt=""> </div>背景图片
<style> div{ width:400px; height:400px; background:#fff url(img/sun.jpg) no-repeat; /*背景图片更改图片位置*/ background-position:30px 50px; /*背景图片只能这样更改大小*/ background-size:200px; 200px; } </style> <div></div>
使用场景:
- 一般超大图片,小图标适用背景图片
- 产品展示之类的展示框适合用插入图片
CSS3中的盒子计算方式
新属性box-sizing，可以设置盒子模型的计算方式，可选值包括content-box盒子大小为border+padding+border，此选项为默认值，也是w3c推荐的盒子模式、border-box盒子大小为width，即padding和border包含到width里边
盒子阴影
box-shadow:水平偏移 垂直偏移 模糊距离 阴影尺寸（影子大小） 阴影颜色 内外阴影
/**/
box-shadow:0px 0px 5px 15px rgba(180, 190, 201, .4) inset;属性说明：
| 属性名 | 是否必须 | 描述 |
|---|---|---|
| h-shadow | 是 | 水平偏移量，允许负数 |
| v-shadow | 是 | 垂直偏移量，允许负数 |
| blur | 否 | 模糊距离 |
| spread | 否 | 阴影的尺寸 |
| color | 否 | 阴影颜色，可设置rgba透明色 |
| inset | 否 | 将外部阴影改为内部阴影 |
可以设置多种阴影样式，通过逗号区分
box-shadow:0px 0px 5px rgba(255,255,255,.4) inset,0px 0px 5px rgba(255,255,255,4);CSS浮动
普通流
一个HTML文档内标签元素从上到下，从左到右的排列顺序，如：块级元素独占一行、行内元素从左到右，这种布局方式叫普通流（标准流）
浮动
设置了浮动的元素会脱离标准流布局的控制,移动到其父元素中指定的位置。浮动体现在漂浮的概念，浮动元素会漂浮在标准流的上边，压住标准流
浮动语法如下:
div{
/*可选属性包括:元素左浮动left,元素右浮动right,元素不浮动none*/
float:left;
}浮动规则：
- 如果一个父盒子里的子盒子其中一个有浮动，则其他子盒子也都需要浮动才能一行对齐显示。
- 元素添加浮动后，元素会具有行内块元素的特性，元素的大小完全取决于定义的大小
- 浮动根据元素书写的位置来显示
清除浮动
清除浮动的本质：
很多时候,父级盒子不方便或不能确定高度(子级盒子有自己的高度,可以撑开父级)，但这是如果所有的子级设置为浮动，浮动后的盒子不占用标准布局的高度，这时候父级盒子后边的盒子会飘到两个子级盒子的下边（父级盒子的高度为0），样例如下：
<head>
<style>
.father-1{
/*方式二，清除浮动，overflow属性中hidden、auto、scroll都可以清除浮动，一般使用hidden*/
overflow:hidden;
}
.son-1{
height:120px;
width:120px;
background-color:red;
float:left;
}
.son-2{
height:120px;
width:120px;
background-color:green;
float:left;
}
.clear{
/*方式一：清除浮动的影响*/
clear:both;
}
.father-2{
height:240px;
width:240px;
background-color:pink;
}
/*方式三*/
.clearfix:after{
content:".";/*内容为小点，尽量不要空，防止旧版本浏览器后空隙*/
display:block;
height:0;
visibility:hidden;/*隐藏盒子*/
clear:both;
}
/*以上方式三在ie6，ie7中不支持，ie6，ie7使用以下方法*/
.clearfix{
/*带有*的属性只有ie6，ie7才执行；zoom是ie6，ie7清除浮动的方法*/
*zoom:1;
}
/*方式四*/
.clearfix:before, .clearfix:after{
content:"";
display:table;/*触发bfc防止外边距合并*/
}
.clearfix:after{
clear:both;
}
</style>
</head>
<body>
<div class="father-1">
<div class="son-1"></div>
<div class="son-2"></div>
<!-- 额外盒子，用来清除浮动 -->
<div class="clear"></div>
</div>
<div class="father-2">
</div>
</body>清除浮动的方式：
- 浮动块的后边添加一个空的标准布局块
- 在浮动块的父级块中使用
overflow:hidden;属性 - 使用
:after伪元素清除浮动，after伪元素是空元素的升级版，不需要添加空元素；代表网站：网易 - 双伪元素清除浮动;代表网站：小米、腾讯
版心
网页中主体内容的部分，一般在浏览器窗口水平居中显示，常见的宽度为：960px、980px、1000px、1200px等
布局流程
- 确认版心（可视区）
- 分析页面中的行模块，以及每个行模块的列模块
- 编写HTML结构
- CSS初始化，运用盒子模型通过DIV+CSS布局控制各个模块
定位
边偏移
包括上、右、下、左四个边，可以分别定义偏移量
| 属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素的上边线的距离 |
| bottom | 底端偏移 |
| left | 左端偏移 |
| right | 右端偏移 |
定位模式（定位分类）
position属性用来定义元素的定位模式，属性值包括
| 属性值 | 描述 | 边偏移 | 作用 |
|---|---|---|---|
| static | 自动定位，默认的定位方式 | 边偏移无效 | 一般用来清除定位 |
| relative | 相对定位，相对于其原文档流的位置进行定位 | 相对于本元素的标准流布局左上角位置移动 | 原来的位置继续占有 （不脱离标准流） |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 | 如父元素都没有定位，从浏览器左上角开始移动 如父元素有定位，从最近的父元素左上角开始移动 | 不占用原来位置 （完全脱离标准流） |
| fixed | 固定定位，相对于浏览器窗口进行定位 | 以浏览器左上角位置开始移动 | 不占原来位置 （完全脱离标准流） |
一般子级元素使用绝对定位时，上一级父元素最好使用相对定位（子绝父相）。因为绝对定位不占用标准流位置，如果父元素使用相对定位，则父元素后边的元素会占用该元素的位置（往上移动）。
定位的常见作用：
在盒子模型中，子元素不会占用父元素的padding的位置，使用定位可以在父元素的padding位置中显示元素
将行内元素转换为块元素
和浮动一样,元素添加了绝对定位和固定定位之后,元素模式也会发生改变,转换为行内块
span{ position: absolute; width: 100px; /*行内元素本来没有高度*/ height: 100px; }使盒子水平或垂直居中，加了绝对定位的盒子，使用
margin:0 auto;居中就不起作用了，样例代码：.father{ width:800px; height:400px; background-color:pink; margin: 40px auto; position: relative; } .son{ width:100px; height:40px; background-color:purple; /*相对定位,定位左走50%，这时整个元素偏右一半，向左平移自己宽度的一般，即50px*/ position:absolute; left:50%;/*这里的50%是父级元素的一半*/ margin-left:-50px;/*这里的50px是自己高度的一半*/ top:50%; margin-top:-20px; }
叠放次序
z-index用来设定叠放次序，其取值可以是正整数、负整数、零；越大的值越靠上。
- 如果两个元素取值相同，按书写顺序，后来者居上；
- 只有设定了相对定位、固定定位、绝对定位三者之一才有这个属性；
CSS动画
过渡动画
在CSS3中使用transition可以实现过度动画效果，当前元素只要规定的属性发生变化，就可以实现平滑的过渡，语法格式如下：
div{
/*有多组属性变化可以用逗号隔开*/
/*属性说明：要过度的属性 花费时间 运动曲线 开始时间*/
transition: width 0.3s ease 0s;/*为宽度属性添加过度效果，过渡时间0.3秒，使用ease曲线，立即开始*/
/*可以简写*/
transition: width 0.3s;
}属性说明：
| 属性 | 描述 |
|---|---|
| transition | 简写属性，设置以下四个过度属性 |
| transition-property | 使用过渡效果的属性名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线，默认是ease |
| transition-delay | 过渡效果的开始时间，默认0 |
其中，transition-timing-function的可选属性包括：linear（匀速）、ease（逐渐减缓）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）
如果所有属性变化都设置动画，可以把过度属性设置为all
代码示例（注意过渡效果在div中定义，在hover中定义会有问题）：
<head>
<style>
div{
width:200px;
height: 100px;
background-color: red;
transition: width 0.5s ease-in 0s,height 0.5s ease-out 0s;
}
div:hover{
width:400px;
height: 300px;
}
</style>
</head>
<body>
<div>
</div>
</body>2D变形
transform可以实现元素的位移、旋转、缩放、倾斜、矩阵等效果，配合过渡和动画可以实现以前Flash的效果，有多组变形效果，可以空格隔开，注意在一个选择器中transform只能定义一次
移动效果
通过translate(x,y)实现移动效果，使用方式为：
/*x，y轴同时移动*/
div{
transform: translate(50px,50px);
}
/*只移动x轴*/
div{
transform: translateX(50px);
}
/*之移动y轴*/
div{
transform: translateY(50px);
}translate的移动距离如果是百分比，不是以父元素的宽度为准，而是以自己的宽度为准，如下代码为向右移动100像素
div{
width:200px;
transform: translateX(50%);
}使用此特性和定位配合可以快速实现居中对齐，方法如下：
div{
width:200px;
height:200px;
background-color: red;
position absolute;
left:50%;
top: 50%;
transform: translateX(-50%,50%);
}缩放效果
scale可以对元素进行水平、垂直缩放，transform: scale(0.8,0)该语句使用scale 方法对元素在水平方向上缩放了20%，垂直方向不缩放。scale的取值默认为1，当设置为0.01~0.99之间的任何值可以使一个元素缩小，任何大于1.01的值可以使元素放大。
和transform一样，也可以进行单个方向的缩放
| 参数名 | 效果 |
|---|---|
| scale(x,y) | 水平+垂直缩放 |
| scaleX(x) | 水平缩放 |
| scaleY(y) | 垂直缩放 |
旋转效果
rotate(deg)可以对元素进行deg度数的旋转，正值为顺时针，负值为逆时针。
img{
transform: rotate(90deg);/*顺时针旋转90°*/
}旋转效果默认围绕中心点旋转，通过transform-origin可以对旋转中心点进行设置
img{
transform: rotate(180deg);
/*以左上角为中心点*/
/*transform-origin: top left;*/
/*相对左上角坐标为（20，30）为中心点旋转*/
transform-origin: 20px 30px;
}倾斜效果
skew(deg,deg)可以设置元素的倾斜效果，通过transform: skew(30deg,0deg)对元素进行水平方向向上倾斜30°，垂直方向不倾斜。第二个元素不写默认为0。
设置文字的倾斜效果：
div{
font-size:50px;
font-weight: 700;
moargin: 100px;
transition: all 0.3s;
}
div:hover{
transform: skew(0,-10deg);
}3D变形
CSS3中的x、y、z轴坐标方向为：
- x轴左负右正
- y轴上负下正
- z轴里负外正
3D旋转
rotateX()沿x轴立体旋转rotateY()沿y轴立体旋转rotateZ()沿z轴立体旋转
backface-visibility:hidden;可以设置图片背面不可见，默认可见。通过此属性可以实现翻硬币效果。
<head>
<style>
div{
margin: 100px auto;
width: 120px;
height: 120px;
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);
}
</style>
</head>
<body>
<div>
<img src="imgs/qian.svg">
<img src="imgs/hou.svg">
</div>
</body>透视（perspective）
显示器是一个2D平面，图像的立体感主要通过透视实现。透视的作用是在元素转换的过程中，呈现3D效果。透视的原理为：
- 近大远小
- perspective设置视距（视距表示视点距离屏幕的长短）（视点用于模拟透视效果时人眼的位置）
所以，视距越大效果越不明显，视距越小，下过越明显。
perspective作用于父级元素，可以对其内的所有子元素设置为透视效果。使用方式为：
<head>
<style>
div{
perspective: 500px;
}
img{
display: block;
margin: 100px auto;
transition: all 5s;
}
img:hover{
transform: rotateX(180peg);
}
</style>
</head>
<body>
<div>
<img src="./img/a.png">
</div>
</body>3D移动
translateX(100px)x轴移动100pxtranslateY(100px)y轴移动100pxtranslateZ(100px)z轴移动100px
其中Z轴的移动，在视觉上就是大小的变化，只有通过透视才能看到Z轴的移动效果。使用方法如下：
.father-div{
perspective: 500px;
}
div:hover{
/*当z轴移动距离等于视距时，元素会被无限放大*/
transform: translateZ(100px);
}translate3d(x,y,z)用于设置三个方向上的移动效果，其中，x、y的值可以是px，也可以是%，但z的值必须是px。
CSS3复杂动画
在css3中通过设置多个节点可以精确的控制一组或多组动画，常用来实现复杂的动画效果，语法格式为animation: 动画名称 动画时间 运动曲线 开始时间 播放次数 是否反向运动;动画中的属性包括：
| 属性 | 描述 |
|---|---|
| @keyframes | 定义动画效果 |
| animation | 所有动画属性组合写法 |
| animation-name | 使用@keyframes定义的动画名称 |
| animation-duration | 设定动画完成一个周期所花费的秒或毫秒，默认0 |
| animation-timing-function | 设定动画的速度曲线，默认ease |
| animation-iteration-count | 设定动画被播放的次数，默认1，可以设置为infinite无限循环播放 |
| animation-direction | 设定动画是否在下一个周期你想播放，默认normal |
| animation-play-state | 设定动画是否正在运行或暂停，默认running |
| animation-fill-mode | 设定动画时间之外的状态 |
具体代码样例：
<head>
<style>
/*两段动画定义*/
@keyframes go{
from{
transform: translateX(0);
}
to{
transform: translateX(600px);
}
}
/*多段动画*/
@keyframes percentGo{
10%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(400px,200px,0) rotateY(180deg);
}
80%{
transform: translate3d(0,0,0);
}
}
div{
width:100px;
height:100px;
background-color: red;
/*全属性引用*/
/*animation: go 2s ease 0s 2 reverse;*/
/*简化引用*/
animation: go 2s;
}
</style>
</head>
<body>
<div>
</div>
</body>无缝滚动效果
<head>
<style>
div{
width:200px;
height: 100px;
background-color: red;
transition: width 0.5s ease 0s,height 0.5s ease-in 0s;
}
div:hover{
width:400px;
height: 300px;
}
nav{
width:500px;
height:100px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
nav ul{
width:200%;
animation: moving 5s linear infinite;
}
nav li{
width:100px;
height: 100px;
background-color: red;
float: left;
}
nav:hover ul{
animation-play-state: paused;
}
@keyframes moving {
from{
transform: translateX(0);
}
to{
transform: translateX(-500px);
}
}
li:nth-child(5n){
background-color: green;
}
li:nth-child(5n-1){
background-color: red;
}
li:nth-child(5n-2){
background-color: blue;
}
li:nth-child(5n-3){
background-color: pink;
}
li:nth-child(5n-4){
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
</body>响应式布局
CSS3伸缩布局
Flex布局
在CSS3中可以设置块级元素的伸缩布局，在响应式开发中作用极大。伸缩布局的基本概念
- 主轴👉Flex容器的主轴用来配置Flex项目，默认是水平方向的。
- 侧轴👉与主轴垂直的轴是侧轴，默认是垂直方向的。
- 方向👉默认主轴从左到右，从上到下。
- 主轴和侧轴并不是固定的，可以通过
flex-direction交换。
值得注意的是，Flex布局规范发生了很大的变化，因为语法规范版本众多，浏览器支持不一致，故Flexbox布局使用的不多
Flex布局各属性详解
min-width:10px;最小宽度10像素max-width最大宽度flex-direction设置排列方式，row：横向排列，column：纵向排列
Flex布局的使用样例
<head>
<style>
section{
width:80%;
height:100px;
display: flex;/*使用伸缩布局*/
flex-direction:row;
min-width:500px;/*最小宽度*/
}
section div{
height:100%;
}
section div:nth-child(1){
background-color:red;
flex:1;
}
section div:nth-child(2){
background-color:greed;
flex:2;
}
section div:nth-child(3){
background-color:yellow;
flex:1;
}
</style>
</head>
<body>
<section>
<div>
</div>
<div>
</div>
<div>
</div>
</section>
</body>常用属性
justify-content可以调整Flex布局中的主轴对齐方式（水平对齐），可选属性包括：
| 值 | 描述 | 详细描述 |
|---|---|---|
| flex-start | 默认值，位于容器开头 | 子元素从父容器的开头开始排列 |
| flex-end | 项目位于容器结尾 | 子元素在父元素结尾开始排列，但盒子顺序不变 |
| center | 中心 | 子元素在父容器中间显示 |
| space-between | 项目位于各行之间有空白的容器内 | 左右的盒子贴近父盒子，中间的盒子平均分布空白边距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内 | 相当于给每个盒子都添加了外边距 |
align-items调整侧轴对齐（垂直对齐），可选属性
| 值 | 描述 | 详细描述 |
|---|---|---|
| stretch | 默认值，项目被拉伸以适应容器 | 让子元素的高度拉伸，以适应父容器（子元素没有高度的情况下） |
| center | 项目位于容器中心 | 垂直居中 |
| flex-start | 项目位于容器开头 | 垂直对齐开始位置 |
| flex-end | 项目位于容器结尾 | 垂直对齐结束位置 |
flex-wrap控制子盒子是否可以换行，可选属性包括
| 值 | 描述 |
|---|---|
| nowrap | 默认值，项目不拆行或不拆列。不换行，则压缩显示。 |
| wrap | 项目在必要的时候拆行或拆列 |
| wrap-reverse | 项目在必要的时候拆行或拆列，但以相反的顺序。用的少 |
flex-flow是flex-flow和flex-direction的综合设置方式，用法为：
div{
display: flex;
flex-flow: column nowrap;
}align-content设置堆栈对齐（由flex-wrap产生的独立行）。
必须对父元素设置自由盒子属性display: flex;并且设置排列方式为横向排列并设置换行，这样align-content的设置才起作用。
div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}可选的属性包括：
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目被拉伸 |
| center | 项目位于容器中心 |
| flex-start | 项目位于容器开头 |
| flex-end | 项目位于容器结尾 |
| space-between | 项目位于各行之间留有空白的容器内 |
| space-around | 项目位于各行之前、之后都留有空白的容器之内 |
order属性用来设置子项目的排列顺序，数字越小排列越靠前，可以是负值，默认为0。使用方式为：
div{
order: 1;
}CSS其他
CSS的引入方式
内部样式
<!DOCTYPE html> <html> <head> <!-- 在html5中type可省略 --> <!-- css可以写在任何位置,一般都写在head标签中 --> <style type="text/css"> .cls{ background:#ccc } </style> </head> <body></body> </html>行内样式
<!DOCTYPE html> <html> <head></head> <body> <div style="color:#ccc;"></div> </body> </html>外部样式
<!DOCTYPE html> <html> <head> <link href="../css/my.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>
三种样式表比较
| 样式表 | 优点 | 缺点 | 使用场景 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便,权重高 | 没有实现样式和结构分离 | 较少 | 控制一个标签 |
| 内嵌样式表 | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式分离 | 需要引入 | 最多 | 控制整个站点 |
CSS三大特性
层叠性
- 同一优先级的选择器样式冲突遵,循就近原则,即哪个样式的定义离得近,执行那个定义
- 样式不冲突,则都能执行
继承性
子标签会继承父标签的样式,子元素可以继承的样式有text-*,font-*,line-*以及color属性
特殊性(优先级)
不同的选择器具有不同的优先级(权重),选择器的权重通过specificity衡量,不同选择器的权重为:
| 选择器 | 贡献值 |
|---|---|
| 继承的属性 | 0,0,0,0 |
| 标签选择器 | 0,0,0,1 |
| 类选择器、伪类选择器、伪元素选择器、属性选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| !important | ∞ |
!important属性用法:
div{
/* important具有最高优先级,一旦出现优先执行 */
color:orange!important;
}选择器的权重可以叠加，但各种层级之间不存在进位关系，即十个标签选择器的权重为0,0,0,10而不是0,0,1,0，继承的权重为0，即便是继承自important权重也是0，叠加效果如下：
<style>
.nav ul li{
/*权重0,0,1,2*/
color: black;
}
nav ul li{
/*权重0,0,0,3*/
color: green;
}
ul li{
/*权重0,0,0,2*/
color: yellow;
}
li{
/*权重0,0,0,1*/
color: blue;
}
</style>
<div>
<nav class="nav">
<ul>
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
</ul>
</nav>
</div>标签显示模式
块级元素,独占一行，默认宽度为100%。块级元素内可以放块级元素和行内元素（p和标题h1~h6都是文字类标签比较特殊，只有文本能组成段落，文字类标签内部不能放其他块元素）
行内元素,不换行,无法设置宽高,但水平方向的padding和margin可以设置,默认宽度就是内容的宽度,行内元素只能容纳纯文本和行内元素（a标签比较特殊,内部可以放块元素）。
行内块元素，有几个特殊的标签<img>,<input>,<td>，它们是行内元素，但是具有块元素的特点，即可以对他们设置宽高和对齐属性
可以转换标签的显示模式，方式为：
div{
/* 块级标签转换为行内标签模式 */
display:inline;
}
span{
/* 行内标签转换为块级 */
display:block;
}
a{
/* 行内标签转换为行内块模式 */
display:inline-block;
}元素的显示和隐藏
CSS中有三个参数可以设置元素显示和隐藏，分别是display、visibility、overflow
display设置对象是否显示及如何显示，（此方法最常用）
.hid-div{ /*隐藏元素，元素没有删除，只是被隐藏，位置也不保留*/ display: none; }visibility设置是否显示对象，hidden隐藏、visible显示
.hid-div2{ /*隐藏元素，但是元素的位置被保留*/ visibility: hidden; }overflow溢出隐藏，设置当对象的内容超过其指定的高度时如何管理内容，可选的参数如下：
参数 说明 visible 不剪切内容，也不添加滚动条 auto 超出自动显示滚动条，不超出不显示滚动条 hidden 不显示超出对象尺寸的内容 scroll 不管是否超出尺寸，都显示滚动条
设置溢出文字的显示和隐藏，包括word-break、white-space、text-overflow三种方式
word-break设置自动换行规则（主要用来处理英文），可选参数包括
属性 说明 normal 使用浏览器默认的规则 break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行 white-space设置对象内文本的显示方式，通常用于强制一行显示内容，可选参数包括
属性 说明 normal 默认的处理方式，显示不开自动换行 nowrap 强制在一行内显示所有文本，直到文本结束或遭遇br标签 text-overflow文字溢出，使用此属性需要强制文本在一行显示
white-space:nowrap;，否则无效属性 说明 clip 直接裁剪，不显示省略标记（...）标示对象内文本溢出 ellipsis 当对象内文本溢出时显示省略标记（...）
CSS精灵图
CSS精灵是一种处理网络图像的方式。它将一个页面涉及到的所有零星图片（图标）都集中到一张大图中去，然后将大图应用于网页。这样，当用户访问页面时，只需要发送一次请求即可获取全部图片。这种很多小的图片合成的大图被称为精灵图
精灵图主要通过背景图片使用，通过background-position控制位置，注意图片往上和左走是负值
CSS滑动门
使用CSS精灵图（主要是背景位置）和盒子的padding撑开宽度，方便适应不同字体
<style>
/*
* a设置背景左侧，padding撑开合适的宽度
* span设置背景右侧，pdding撑开合适的宽度，剩下由文字继续撑开
*/
a {
background: url('../img/bk.jpeg') no-repeat;
display: inline-block;
height: 33px;
padding-left: 15px;
}
a span {
/*背景右对齐*/
background: url('../img/bk.jpeg') no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px;
}
</style>
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>