-HTML5新增特性
一、新增语义化标签
- 新增：
- < header > :头部标签
- < nav >: 导航标签
- < article >： 内容标签
- < section >:定义文档某个区域
- < aside >:侧边栏标签
- < footer >: 尾部标签
- 注意：
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 其实，移动端更喜欢使用这些标签
二、新增音视频标签
2.1 新增video视频标签
- video支持三种视频格式（MP4，wabm，ogg），一般采用MP4格式
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
</body>
2.2 新增audio音频标签
- audio支持三种音频格式（MP3，wav，ogg），一般采用MP3格式
<audio src="文件地址" controls="controls"></audio>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
2.3 音频视频总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JavaScript解决)
- 视频标签是重点，我们经常设置自动播放，不适用controls控件，循环和设置大小属性
三、新增input属性
- 重点记住： number tel search 这三个
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li> <input type="submit" value="提交"></li>
</ul>
</form>
</body>
四、新增表单属性
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocommplete="off">
<input type="submit" value="提交">
</form>
-
重点记住placeholder，multiple这两个属性
-
可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder {
color: pink;
}
-CSS3新增
一、新增选择器
1.1 属性选择器
-
属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器
-
类选择器，属性选择器，伪类选择器，权重为10
-
利用属性选择器就可以不借助于类或者id选择器
<head>
<style>
input[value] {
color: pink;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器可以不借助类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
</body>
- 属性选择器还可以选择 属性 = 值的某些元素
<head>
<style>
input[type=text] {
color: pink;
}
</style>
</head>
<body>
<!-- 2.属性选择器还可以选择 属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
- 属性选择器可以选择属性值开头的某些元素
<head> /* 选择首先是div，然后具有class属性，并且是icon开头的值 */
<style>
div[class^=icon] {
color: pink;
}
</style>
</head>
<body>
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
</body>
- 属性选择器可以选择属性值结尾的某些元素
<head>
<style>
section[class$=data] {
color: pink;
}
</style>
</head>
<body>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">1</section>
<section class="icon2-data">2</section>
<section class="icon3-data">3</section>
</body>
1.2 结构伪类选择器
-
常用于根据父级选择器选择里面的子元素
-
E:first-child 和E:last-child
<style> /* 1.选择ul里面的第一个孩子 小li */ ul li:first-child { background-color: pink; } /* 2.选择ul里面的最后一个孩子 小li */ ul li:last-child { background-color: pink; } -
nth-child(n)
<style> /* 选择ul里面的第2个孩子 小li */ ul li:nth-child(2) { background-color: pink; } ul li:nth-child(even) { background-color: #ccc; } /* 2.把所有的奇数 odd的孩子选出来 */ ul li:nth-child(odd) { background-color: gray; ol li:nth-child(-n+3) { background-color: pink; } </style>-
nth-child(n)选择某个父级元素的一个或多个特定的子元素（重点）- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even 偶数，odd奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
-
-
E:first-of-type和E:last-of-type
<style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-last-child(2) { background-color: pink; } </style> -
nth-child(n)和nth-of-type(n)区别?- nth-child 对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E,然后再根据E 找第n个孩子
-
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
- 关于nth-child(n)， 我们要知道n是从0开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用 nth-child 更多
- 类选择器，属性选择器，伪类选择器，权重为10
1.3 伪元素选择器
- 伪元素选择器可以帮我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
- before 和 after 创建一个元素，但是是属于行内元素
- before和after 都是一个盒子，都作为父元素的孩子
- before是放在内容的前面，after是放在了内容的后面
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素 ，after 在父元素内容的后面插入元素
- 伪元素选择器 和 标签选择器 一样，权重为1
<style>
div::before {
content: '我';
}
div::after {
content: '小猪';
}
</style>
二、CSS3盒子模型
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 这样的话padding和border就不会撑大盒子了 */
}
- 此种情况盒子大小为 宽度，不包括内边距和边框，这样 padding 和 border 就不会撑大盒子了(前提是 padding 和 border 不会超过 width 宽度)
三、transition过渡
-
过渡的口诀：谁做过渡给谁加
-
transition: 要过渡的属性 花费时间 运动曲线 何时开始
- 要过渡的属性：想要变化的 CSS 属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒(必须写单位) 比如0.5s
- 运动曲线：默认是ease(可以省略)
- 何时开始：单位是秒(必须写单位)，可以设置延迟触发事件，默认是0s(可以省略)
-
如果是多个属性过渡，可以用逗号隔开，或者写all
<style>
div {
width: 200px;
height: 50px;
background-color: pink;
transition: width 0.5s,height 0.5s;
}
div:hover {
width: 400px;
height: 100px;
}
四、2D转换
4.1 移动translate
- 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
transform:translate(x,y);
/* 或者分开写 */
transform:translateX(n);
transform:translateY(n);
transform:translate(100px,100px);
/* 如果只移动X轴 */
transform:translate(100px,0);
translateX(100px);
- translate 最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的
translate:(50%,50%);
- 对行内标签没有效果
4.2 旋转rotate
- 2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
transform: rotate(-360deg);
-
rotate 里面跟度数，单位是 deg 比如 rotate(45deg)
-
角度为正时，顺时针，负时，为逆时针
-
默认旋转的中心点是元素的中心点
-
旋转中心点transform-origin
-
旋转中心点是谁的给谁加
transform-origin: top left;
```
- [x] 注意后面的参数x 和 y 用空格隔开
### 4.3 缩放scale
- [x] 只要给元素添加上了这个属性就能控制它放大还是缩小
```html
transform: scale(1.1，2)
- 注意其中的x和y用逗号分割
- sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
4.4 2D转换综合写法
- 同时使用多个转换，其格式为: transform:translate() rotate() scale() 移动-旋转-缩放
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时候，记得要将位移放到最前面
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
五、动画
5.1 定义动画，使用动画
<style>
@keyframes move {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(1000px, 0px);
}
50% {
transform: translate(1000px ,500px);
}
75% {
transform: translate(0px, 500px);
}
100% {
transform: translate(0px ,0px);
}
}
div {
width: 100px;
height: 100px;
background-color: tomato;
/* 使用动画 */
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
5.2 动画常用属性
5.3 动画简写
/* animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 */
animation: myfirst 5s linear 2s infinite alternate;
5.4 速度曲线细节
-
animation-timing-function：规定动画的速度曲线，默认是“ease”
六、3D转换
6.1 三维坐标系
- x轴：水平向右 注意： x 右边是正值，左边是负值
- y轴：垂直向下 注意： y 下面是正值，上面是负值
- z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
6.2 3D位移translate3d
- 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向
- translform:translateX(100px)：仅仅是在x轴上移动
- translform:translateY(100px)：仅仅是在Y轴上移动
- translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
- transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
- 因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动
6.3 透视perspective
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 透视的单位是像素
- 透视写在被观察元素的父盒子上面的
perspective: 1000px;
6.4 translateZ
- 有了透视，就能看到translateZ 引起的变化了
- translateZ：近大远小
- translateZ：往外是正值
- translateZ：往里是负值
6.5 3D旋转rotate
transform: rotateX(45deg) ：沿着X轴正方向旋转45度
transform: rotateY(45deg) ：沿着Y轴正方向旋转45度
transform: rotateZ(45deg) ：沿着Z轴正方向旋转45度
transform: rotate3d(x,y,z,deg) ：沿着自定义轴旋转 deg为角度(了解即可)
transform: rotateY(360deg);
- 左手准则
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
6.6 3D呈现transform-style（重要）
- 控制子元素是否开启三维立体环境
transform-style: flat子元素不开启3d立体空间 默认的transform-style: preserve-3d子元素开启立体空间- 代码写给父级，但是影响的是子盒子
- 这个属性很重要
-移动端
一、视口
- 视口标签
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 视口就是浏览器显示页面内容的屏幕区域
- 视口分为布局视口、视觉视口和理想视口
- 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
- 想要理想视口，我们需要给我们的移动端页面添加 meta视口标签
二、二倍图
2.1 二倍图
**问题：**我们需要一个 50*50 像素(css像素)的图片，直接放到我们的手机里面会放大2倍变成 100 * 100，这样就会模糊。
**解决办法：**我们直接放一个 100 * 100 图片，然后手动的把这个图片缩小为 50 * 50。这样将图放到手机里面，手机自动放大2倍变成 100 * 100，这样就不会造成图片模糊
2.2 背景缩放
div {
width: 500px;
height: 500px;
border: 1px solid red;
background: url(images/dog.jpg) no-repeat;
/* background-size: 500px 200px; */
/* background-size: 500px; */
/* background-size: 50% 50%; */
/* background-size: cover; */
background-size: contain;
}
- 单位： 长度|百分比|cover|contain
- cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
三、特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout: none;
}
四、流式布局
- 流式布局，就是百分比布局，也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
section div:nth-child(1) {
float: left;
width: 50%;
height: 200px;
background-color: pink;
}
五、flex布局
5.1 父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-items：设置侧轴上的子元素的排列方式（多行）
- align-content：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-flow: column wrap;
5.2 子项常见属性
-
flex 子项目占的份数（重点）
flex 属性定义子项目**分配剩余空间**，用flex来表示占多少份数。 父项：section {display: flex;} 子项：section div:nth-child(2) {flex: 1;} -
align-self 控制子项自己在侧轴的排列方式（了解）
-
order属性定义子项的排列顺序（前后顺序）（了解）
六、 背景颜色渐变
background: -webkit-linear-gradient(top left, red, blue);
七、 rem适配布局
7.1 媒体查询
/* 小于540 */
@media screen and (max-width:539px) {
body {
background-color: pink;
}
}
7.2 媒体查询+rem实现元素动态大小变化
@media screen and (min-width:640px) {
html {
font-size: 12px;
}
}
@media screen and (min-width:960px) {
html {
font-size: 50px;
}
}
.shop {
margin: 0 auto;
height: 2rem;
line-height: 2rem;
background-color: green;
text-align: center;
color: #fff;
font-size: 1rem;
}
7.3 less
-
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
-
less变量
@color :pink;
@font14 :14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
- less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
a {
color: purple;
&:hover {
color: blue;
}
}
}
-
内层选择器的前面没有 & 符号，则它被解析为父选择器的后代
-
如果有 & 符号，它就被解析为父元素自身或父元素的伪类
-
a{ &:hover{ color: red; } } -
less运算
@basefont :50px;
@border :5px + 5;
.top {
width: 200px * 2;
height: 200px - 50;
border: @border solid red;
}
img {
width: (82rem / @basefont);
height:(82rem / @basefont);
}
-
乘号（*）和除号（/）的写法
-
运算符中间左右有个空格隔开 1px + 5
-
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
-
如果两个值之间只有一个值有单位，则运算结果就取该单位
-
less适配方案
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
