一 css3高级技巧
1 精灵图标
1 css精灵技术作用/原理
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
原理：将网页中的一些笑背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
2 使用场景
1 针对于小背景图片。
2 借助背景位置属性来实现。
3 背景位置属性常为负值。
3 案例
4 优缺点
1 图片文件大
2 放大缩小会失真
3 不易更换
5 精灵图核心
1 针对于把多个小背景图片放到一张大背景图片中使用
2 移动图片位置
3 精确精灵图中每个小图片的大小和位置
2 字体图标
1 使用场景
应用于网页中通用，常用的一些小图标。
2 优点
1 轻量级：图标文字比图像小，图标一旦被加载，图标立马被渲染出来，减少服务器请求。
2 灵活性：本质是文字，拥有文字的属性，别u颜色，阴影，透明效果等，
3 兼容性：几乎所有浏览器都能使用。
注意：字体图标不能代替精灵技术，只是对优化了图标部分的技术。
3 两者比较
精灵图：适用于结构，样式稍稍复杂的小图片。
字体图标：适用于结构，样式比较简单的小图片。
4 使用方法
1 下载
字体图标下载网站：icomoon / iconfont
2 解压
3 引入软件 
字体声明代码在style.css文件
4 选择字体图标，复制对应的方框/ 或者方框前的编码写入代码
文件是demo.html
5 更新已下载的字体图标
此时把新下载的压缩包替换原本压缩包即可。
再解压。
3 css三角
本质：正方形除需要的一块外其余三块设置透明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三角</title>
<style>
div{
height: 0px;
width: 0px;
/*兼顾低版本浏览器能正常显示css三角*/
/*line-height: 0;*/
/*font-size: 0;*/
border: 50px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三角</title>
<style>
.div0 {
display: inline-block;
width: 50px;
height: 100px;
background-color: gainsboro;
border-radius: 3px;
}
.div1 {
position: absolute;
top: -2px;
left: 40px;
height: 0px;
width: 0px;
/*兼顾低版本浏览器能正常显示css三角*/
/*line-height: 0;*/
/*font-size: 0;*/
border: 5px solid transparent;
border-bottom-color: gainsboro;
}
.div2 {
display: inline-block;
width: 50px;
height: 50px;
background-color: #75c2ff;
border-radius: 50px;
}
.div3{
position: absolute;
top:28px;
left: 68px;
height: 0px;
width: 0px;
/*兼顾低版本浏览器能正常显示css三角*/
/*line-height: 0;*/
/*font-size: 0;*/
border: 20px solid transparent;
border-bottom-color: #75c2ff;
}
</style>
</head>
<body>
<!--对话框形式运用css三角-->
<div class="div0"></div>
<div class="div1"></div>
<!--水滴形式运用css三角-->
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
4 常见的css用户界面样式
1 更改用户的鼠标样式
设置或检索再对象上移动时鼠标的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标样式</title>
</head>
<body>
<p style="cursor: default">默认</p>
<p style="cursor: pointer">小手</p>
<p style="cursor:move;">移动</p>
<p style="cursor:text;">文本</p>
<p style="cursor:not-allowed;">禁止</p>
</body>
</html>2 表单轮廓
去掉表单在点击时的默认轮廓。
<!--此属性为none或0,能去掉表单在点击时的默认轮廓-->
<input style="outline: none" type="text">3 防止表单域拖拽
<!--此时文本域表单就不能进行拖拽，-->
<!--注意标签中间不能有空格/换行，以此可使光标紧贴标签边缘-->
<textarea style="resize: none" name="textarea1" id="" cols="30" rows="10"></textarea>
4 vertical-align
用来设置针对图片/表单 等 行内块元素和文字垂直对齐。
行内块元素都可加此属性。
5 图片底部默认的空白缝隙
原因：图片（等行内块元素）默认和文字的基线对齐，所以留一段空隙。
解决方法：
1 设置行内块元素与文字的对齐方式不是与基线对齐。
/*解决盒子下端因为默认与文字基线（baseline）对齐预留的空隙问题
middle/ bottom/top都可*/
.div1 img {
vertical-align: top;
}2 转为块级元素，实际运用不可取
6 溢出盒子的文字用省略号显示
1 单行文本显示
.div2 {
height: 100px;
width: 100px;
border: 1px solid orange;
/*设置单行文本溢出部分用省略号显示*/
/*强制一行显示文本,默认normal自动换行*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*超出部分用省略号替代*/
text-overflow: ellipsis;
}2 多行文本显示
5 常见的布局技巧
一行内多个盒子排列时，会出现左右边距合并问题
此时可使盒子左外边距设置为边框的像素值，第一个盒子的右边框就能压住后面盒子的左边框
若想给每个边框添加浮动效果，就要额外设置边框的z-index属性，以此就能把被压的左边框显示出来。
1 案例：margin负值的运用
/*7 外边距在边距合并问题中的运用*/
.div4 div{
display: inline-block;
float: left;
height: 100px;
width: 100px;
border: #ff8500 1px solid;
margin-right: -1px;
}
.div4 div:hover{
/*如果没定位，加相对定位（保留位置）*/
position: relative;
/*如果有定位，再加层级属性*/
/*z-index: 3;*/
border-color: #75c2ff;
}
2 案例：对于行内块默认边距的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见用户界面</title>
<style>
* {
margin: 0px;
padding: 0px;
/*8 对于行内块元素默认外边距的运用*/
.div5 div {
display: inline-block;
height: 20px;
width: 20px;
border: 1px solid orange;
line-height: 20px;
text-align: center;
margin-bottom: 10px;
}
.div5 .fifth1,
.div5 .fifth5,
.div5 .fifth6 {
width: 80px;
}
.div5 .fifth7 {
border: 1px solid #75c2ff;
height: 20px;
width: 170px;
}
.div5 .fifth7 input {
display: inline-block;
border: 1px solid orange;
width: 20px;
height: 20px;
outline: #75c2ff;
/*vertical-align: top;*/
/*margin-top: -1px;*/
}
.div5 .fifth7 button {
height: 20px;
width: 35px;
}
</style>
</head>
<body>
<div class="div5">
<div class="fifth1"><<上一页</div>
<div class="fifth2">2</div>
<div class="fifth3">3</div>
<div class="fifth4">...</div>
<div class="fifth5">下一页>></div>
<div class="fifth6">共10页</div>
<div class="fifth7">
目前第
<input type="text">
页
<button>确定</button>
</div>
</div>
</body>
</html>
2.1 取消input的默认上外边距
.div5 .fifth7 input {
display: inline-block;
border: 1px solid orange;
width: 20px;
height: 20px;
outline: #75c2ff;
/*取消input的上外边距*/
vertical-align: top;
margin-top: -1px;
}
6 浮动在文字环绕中的运用
1 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见用户界面</title>
<style>
* {
margin: 0px;
padding: 0px;
/*6 浮动在文字环绕中的运用*/
.div3 {
width: 200px;
height: 20px;
border: 1px solid orange;
margin: 0px auto;
}
.div3 .pic {
float: left;
height:20px;
margin-right: 5px;
}
.div3 .pic img {
/*让图片填满图片的父盒子*/
height: 100%;
}
.div3 p{
/*强制文字不默认换行,并溢出部分隐藏,用省略号显示*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="div3">
<div class="pic"><img src="img/logoOrangeCat.png" alt=""></div>
<p>我是一段文字我是一段文字我是一段文字我是一段文字</p>
</div>
</body>
</html>
7 css三角的运用
1 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见用户界面</title>
<style>
* {
margin: 0px;
padding: 0px;
}
/*9 css三角的运用*/
.div6 {
width: 400px;
height: 100px;
border: 1px solid orange;
margin: 0px 0px 10px 10px;
text-align: center;
line-height: 100px;
}
.juxing {
position: relative;
float: left;
width: 200px;
background-color: orange;
}
.div6 .sanjiao {
width: 0px;
height: 0px;
border-color: transparent white transparent transparent ;
border-style: solid;
border-width: 100px 30px 0 0;
position: absolute;
right: 0;
top: 0;
}
.div6 > p {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="div6">
<div class="juxing">
<div class="sanjiao"></div>
<p>1</p>
</div>
<p>2</p>
</div>
</body>
</html>
8 css的初始化
作用：为了统一不同浏览器对一段代码可能出现的不一样的呈现。
简单理解：重设浏览器的样式，每个网页必须先css初始化。
二 h5和css3提高
1 h5新特性--video标签
1 不同浏览器对于格式兼容问题
1 不同浏览器对于video文件格式支持情况，MP4兼容性最好。
2 运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新特性</title>
<style>
/*video*/
video {
/*1 设置播放器宽度,也有高度属性*/
width: 400px;
/*2 视频就绪自动播放，谷歌不兼容，需要另设muted属性实现*/
autoplay: autoplay;
/*3 设置静音播放*/
muted: muted;
/*4 播放结束后循环播放*/
loop: loop;
/*5 预先加载视频(如果有autoplay属性,就忽略还属性)*/
preload: auto;
/* 不预先加载视频*/
preload: none;
/*6 加载等待时的视频画面图片*/
poster: url(img/searchOrange.png);
}
</style>
</head>
<body>
<!--7 展示显示播放控件-->
<video controls="controls">
<!-- 解决文件的不同格式造成的不能兼容问题-->
<source src="video/birthday20.ogg" type="video/ogg">
<source src="video/birthday20.mp4" type="video/mp4">
您的浏览器不支持video标签播放视频
</video>
</body>
</html>2 h5新特性--audio标签
1 浏览器对于不同格式的兼容情况
2 运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新特性</title>
<style>
/*audio*/
audio {
/*1 音频就绪自动播放，谷歌不兼容*/
autoplay: autoplay;
/*2 播放结束后循环播放*/
loop: loop;
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<!--3 展示显示播放控件-->
<audio src="audio/yigubigu.mp3" controls="controls"></audio>
</body>
</html>3 对于不同格式的兼容问题解决方法
3 h5新特新--input标签 / 新增input属性
1 应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*新增input属性*/
input {
display: block;
}
/*设置placeholder里的属性*/
input::placeholder{
color: #ff8500;
}
</style>
</head>
<body>
<form action="">
<!-- 新增input特性必须写在form表单里
用户只能输入对应表单类型的数据-->
<!-- <input type="email" placeholder="email类型input" required="required" autofocus="autofocus">-->
<input type="url" placeholder="url类型input">
<input type="date" placeholder="date类型input">
<input type="time" placeholder="time类型input">
<input type="month" placeholder="month类型input">
<input type="week" placeholder="week类型input">
<input type="number" placeholder="number类型input">
<input type="tel" placeholder="tel类型input" name="tels" autocomplete="on">
<input type="search" placeholder="search类型input">
<input type="color" placeholder="color类型input">
<input type="file" multiple="multiple">
<button>提交</button>
<!-- required="required" 表单内容不能为空
autofocus="autofocus" 页面加载完成时自动聚焦到指定表单
autocomplete="on" 用户成功提交的表单作为以后输入时的选项
注意：必须放在form内使用
有name属性
默认是打开的，但为了信息的安全要手动关闭-->
</form>
</body>
</html>2 注意：必须在form表单里使用。
4 h5新特新--结构（语义）化标签
1.section。
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
2.article。
article标签装载显示一个独立的文章内容。还可以嵌套，则内层的artilce对外层的article标签有隶属的关系。
例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
3.aside。标签内容之外与标签内容相关的辅助信息；
4.header。header标签定义文档的页面组合，通常是一些引导和导航信息。
5.hgroup。
hgroup标签用于对网页或区段的标题元素（h1-h6）进行组合。
例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
6.footer。页尾信息；
7.nav。nav标签定义显示导航链接。
8.figure。独立的单元，例如某个有图片与内容的新闻块。
9.time。
time标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码。
举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
10.mark。mark标签定义带有记号的文本。请在需要突出显示文本时使用标签。
11.figure。
figure标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
12.figcaption。
figcaption 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
13.contextmenu。contextmenu 标签添加到系统右键菜单 [貌似这个功能只有firefox支持]
5 css3新特性
1 使用场景
1 ie9+支持
2 移动端支持优于PC端
3 处于优化中
4 应用广泛
5 常用新增选择器和盒子模型以及其他特性
6 css3新特性--新增选择器
作用：更加自由，快捷的选择标签。
1 属性选择器
作用：根据元素特定属性来选择属性，可以不借助类或id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性,属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*1 属性选择器*/
/*1.1 选择带有class属性的li标签*/
li[class]{
color: #ff8500;
}
/*1.2 选择带有class属性且值为li2的li标签**常用*/
li[class="li2"]{
color:yellow;
}
/*1.3 选择带有class属性且值以li开头的li标签*/
li[class^="li"]{
text-decoration: underline;
}
/*1.4 选择带有class属性且属性值以3结尾的li标签*/
li[class$="3"]{
color: green;
text-decoration: line-through;
}
/*1.5 选择带有class属性且属性值内含有4的li标签*/
li[class*="4"]{
color: blue;
font-style: italic;
text-decoration: none;
}
/*2 结构伪类选择器*/
/*3 伪元素选择器*/
</style>
</head>
<body>
<ul>
<li class="li1">li1</li>
<li class="li2">li2</li>
<li class="li3">li3</li>
<li class="li4">li4</li>
</ul>
</body>
</html>2 结构伪类选择器
根据文档结构选择，用于根据父级选择器选择里面的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性，属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*2 结构伪类选择器*/
/*2.1 父元素中的第一个子元素li*/
li:first-child{
/*li:last-child最后一个*/
font-weight: 700;
}
/*2.2 父元素中的第n个子元素li*/
li:nth-child(2){
text-decoration: none;
}
/*2.3 指定类型的第一个*/
ol li:first-of-type{
/*ol li:last-of-type最后一个*/
color: #75c2ff;
}
/* 指定类型的第n个*/
ol li:nth-of-type(2){
color: purple;
}
</style>
</head>
<body>
<ul>
<li class="li1">li1</li>
<li class="li2">li2</li>
<li class="li3">li3</li>
<li class="li4">li4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
</body>
</html>4 nth-child(n) 和 nth-of-type(n)两者区别
li:nth-child(n) 先给内含的所有子元素排列顺序（不论类型，从1开始），再去匹配类型。所以会出现子元素有多个类型时，前者类型与后者某个子元素不能正确匹配。常用于无序列表。
ol li:nth-of-type(n） 先找出指定类型属性，在给找出的属性排列顺序，此时前后就能准确到特定元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性，属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*2.4 nth-child(n) 和nth-of-type(n) 两者区别：*/
/*不能选中*/
div span:nth-child(1) {
color: pink;
}
/*可以选中*/
div span:nth-of-type(2) {
color: #75c2ff;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<span>s1</span>
<span>s2</span>
</div>
</body>
</html>注意：n可以是
数字（从第一个子元素开始)，
关键字（even偶数，odd奇数），
公式（会从0开始计算，多以2n是偶数，但没有第0个元素，所以不计入。前五个子元素可写为-n+5）。
4 伪元素选择器（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性，属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*3 伪元素选择器*/
/*3.1 在元素内部的前面插入内容*/
div::before {
content: "我插到了前面";
}
/*3.2 在元素内部的末尾插入内容*/
div::after {
content: "我插到了末尾";
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<span>s1</span>
<span>s2</span>
</div>
</body>
</html>注意：
创建的是行内元素
在文档树中不存在，所以是伪元素
必须有content元素
伪元素选择器和标签选择器权重都为1
5 伪元素选择器应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性，属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*3.3 伪类选择器应用*/
ul li:after{
content: ">";
margin-left: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">li1</li>
<li class="li2">li2</li>
<li class="li3">li3</li>
<li class="li4">li4</li>
</ul>
</body>
</html>
也可用于遮罩层
6 伪元素在清除浮动中的应用原理
7 css3新特性--css3盒子模型
1 应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3新特性，属性选择器</title>
<style>
/*注意：类/属性/伪类选择器权重为10*/
/*二 新增盒子模型*/
.div2 div:nth-child(1){
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid dodgerblue;
}
.div2 div:nth-child(2){
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid dodgerblue;
/*限定盒子宽度为width，paddin和border不会撑大盒子 */
box-sizing: border-box;
/*属性默认值，默认padding和border会撑大盒子*/
/*box-sizing: content-box;*/
}
</style>
</head>
<body>
<div class="div2">
<div></div>
<div></div>
</div>
</body>
</html>
2 使用场景
8 css3新特性--其他特性
1 图片变模糊
/*三 图片变模糊*/
img[src]{
width: 300px;
/*越大越模糊*/
filter:blur(6px);
}2 calc()属性
/*四 calc()属性，可用加减乘除计算*/
div[class="div3"] {
width: calc(200px + 50px);
background-color: pink;
}9 css3新特性--过渡
1 应用场景
常和hover搭配使用
ie9+版本支持
2 应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css新特新的应用</title>
<style>
div {
width: 100px;
height: 10px;
background-color: #75c2ff;
/*变化属性 花费时间 运动曲线 何时开始 后两个可略写*/
transition: width 2s;
/*-webkit-transition: width 2s;*/
/*宽高都要过渡时，transition: width 0.5s,height 0.5s;*/
/*再多个属性过渡时，transition: all 0.5s;*/
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3 注意
1 谁过渡给谁加过渡属性
2 过渡属性前两个值必须写
10 css新特性应用案例
1 绿果手机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css新特新的应用--过渡</title>
<style>
* {
margin: 0px;
padding: 0px;
/*规定padding和border不会撑开盒子*/
box-sizing: border-box;
font-size: 12px;
}
li {
/*去掉li的小圆点*/
list-style: none;
font-size: 10px;
}
a {
display: inline-block;
text-decoration: none;
color: black;
}
div {
width: 300px;
border: 1px solid #468477;
background-color: white;
border-radius: 6px;
}
ul li img {
border-radius: 5px;
width: 100%;
}
ul li img:hover {
transform: rotateY(-180deg);
}
ul li a {
width: 100%;
margin: 10px 10px 0px 10px;
}
ul li:nth-child(3) {
font-size: 16px;
color: red;
margin: 10px 10px 0px 10px;
}
ul li:nth-child(3)::after {
content: "￥6988";
text-decoration: line-through;
color: darkgrey;
font-size: 10px;
margin-left: 10px;
}
ul li:nth-child(4) {
margin: 10px 10px 0px 10px;
}
ul li span {
display: inline-block;
height: 10px;
width: 150px;
border: 1px solid red;
border-radius: 5px;
}
ul li span span {
float: left;
height: 10px;
width: 100px;
background-color: red;
transition: width 1s;
}
ul li span span:hover {
width: 135px;
}
ul li:nth-child(5) a {
width: calc(100% - 20px);
height: 30px;
background-color: red;
margin: 10px 10px 10px 10px;
border-radius: 6px;
line-height: 30px;
text-align: center;
color: white;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/phoneModel.jpg" alt="手机模型"></li>
<li><a href="#">绿果 greenPhone 6s Plus 32G 绿色 全网通4G手机</a></li>
<li>￥6088</li>
<li>已售87%
<span>
<span></span>
</span>
剩余29件
</li>
<li><a href="#">立即抢购</a></li>
</ul>
</div>
</body>
</html>2 成果图
11 广义的h5
包含h5，css3，js即新的元素，属性和行为。
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
