前端 - HTML5与CSS3

CSS文档

目录
  • HTML5新增特性
    • 语义化标签
    • 音/视频标签
      • 视频
      • 音频
    • input表单
  • CSS3新增特性
    • 属性选择器
    • 结构伪类选择器
      • child
      • type
    • 伪元素选择器
    • border-box盒子模型
    • transition过渡
      • 进度条动画
    • 图片模糊处理
    • calc()函数
    • 2D转换transform
      • 2D移动translate
      • 2D旋转rotate
        • rotate中心点
      • 缩放scale
      • 总结
    • 动画animation
      • keyframes定义动画
      • animation调用动画
      • 常见属性
        • 动画速度曲线
      • 简写
      • 样例：热点
    • 3D转换transform
      • 3D位移translate3d
      • 透视perspective
      • 3D旋转rotate3d
      • 3D呈现transform-style
      • 翻转盒子样例

HTML5新增特性

语义化标签

新增标签 语义
头部标签
导航标签
内容标签
定位文档某个区域
侧边栏标签
尾部标签

注意：

  1. 这种语义化标准主要针对搜索引擎
  2. 页面中可以使用多次
  3. 在IE9中，需要把它们转化为块级元素
  4. 移动端使用得更多

音/视频标签

注意：Chrome禁止了音/视频的自动播放。

视频

元素支持MP4、WebM、Ogg，推荐使用MP4。常用属性如下表：

属性 值 描述
width 像素 宽度
height 像素 高度
src url 视频url地址
autoplay autoplay 自动播放，Chrome浏览器需要加上muted才能自动播放
muted muted 静音
loop loop 循环播放
controls controls 向用户展示播放控件
preload `auto none`
poster Imgulr 等待加载时的图片

音频

元素支持MP3、Wav、Ogg，推荐使用MP3。使用方法和标签类似。

input表单

HTML5新增的input类型：

属性值 说明
type="email" 限制输入为Email类型
type="url" 限制输入为URL类型
type="date" 限制输入为日期类型
type="time" 限制输入为时间类型
type="month" 限制输入为月类型
type="week" 限制输入为星期类型
type="number" 限制输入为数字类型
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单

新增的表单属性：

属性 值 说明
required required 必填，不能为空
placeholder 提示文本 表单提示信息，存在默认值则不显示
autofocus autofocus 自动聚焦
autocomplete `off on`
multiple multiple 可以选择多文件提交

CSS3新增特性

属性选择器

属性选择器和类选择器与伪类选择器权重相同，为(0,0,1,0)

选择器 说明
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值为val的E元素
E[att^="val"] 选择具有att属性且属性值以val开头的E元素
E[att$="val"] 选择具有att属性且属性值以val结尾的E元素
E[att*="val"] 选择具有att属性且属性值包含val的E元素

结构伪类选择器

选择器 说明
E:first-child 选择父元素中第1个E子元素
E:last-child 选择父元素中最后1个E子元素
E:nth-child(n) 选择父元素中第n个E子元素
E:first-of-type 第1个E元素
E:last-of-type 最后1个E元素
E:nth-of-type 第n个E元素

child

    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 



ul li:first-child {
    color: red;
}
ul li:last-child {
    color: orange;
}
ul li:nth-child(3) {
    color: skyblue;
}

效果如下：

  • 1
  • 2
  • 3
  • 4
  • 5

nth-child()中可以填：

  1. 数字，例如nth-child(3)表示选择第3个子元素

  2. 关键字even表示所有偶数子元素，odd表示所有奇数子元素

  3. nth-child(n)中的n从0开始，每次+1，直到超出了元素个数，一般搭配下面的公式：

    公式 说明
    2n 偶数元素
    2n+1 奇数元素
    5n 第5, 10, 15个子元素
    n+5 从第5个子元素开始到最后
    -n+5 前5个子元素

type

用法类似，在上面的

    例子中效果没有区别，在下面的例子会有区别：

    
    
    p-1
    
    
    div-1
    
    
    div-2
    

    

    section div:first-child {
    color: skyblue;
}
section div:nth-of-type(2) {
    color: orangered;
}

    效果如下：

    p-1

    div-1 div-2

    只有nth-of-type(2)生效了，这是因为二者选择的过程不同：

    1. div:first-child会对父元素
      中的所有元素先排序，之后查看序号为1的元素是否为
      标签，由于是

      标签，没有选择到元素

    2. div:nth-of-type(2)会对父元素
      中的所有指定元素，即所有
      标签进行排序，再选择序号为2的元素

    伪元素选择器

    伪元素选择器帮助我们使用CSS创建新标签元素，不需要HTML标签。

    选择符 简介
    ::before 在元素内部的前面插入内容
    ::after 在元素内部的后面插入内容

    注意：

    1. before和after创建一个元素，属于行内元素
    2. 新创建的元素在文档树找不到，所以称为伪元素
    3. 语法：element::before{}
    4. 必须有content属性
    5. 和标签选择器一样，权重为(0,0,0,1)
    BBBBB
    

    div {
    width: 300px;
    height: 150px;
    background-color: skyblue;
}

div::before {
    content: "AAAAA";
    background-color: orangered;
}

div::after {
    content: "CCCC";
    background-color: pink;
}

    效果如下：

    AAAAABBBBBCCCC

    border-box盒子模型

    使用box-sizing属性来设置盒模型，默认为content-box，即padding和border会撑开盒子；如果设置为border-box，则不会撑开盒子(前提是padding和border不会超过盒子的宽高)。

    11111
    

    22222
    

    .box1 {
    float: left;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid black;
    background-color: skyblue;
    /* 默认值 */
    box-sizing: content-box;
}
.box2 {
    float: left;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid black;
    background-color: skyblue;
    box-sizing: border-box;
}

    效果如下，box1的实际大小为230*230px，box2的实际大小为200*200px:

    transition过渡

    可以从一个状态渐渐过渡到另一个状态，经常搭配:hover。用法如下：

    transition: 属性 时间 运动曲线 何时开始;
    1. 属性：想要变化的CSS属性，例如内外边距、宽度高度、背景颜色，所有的属性用all表示
    2. 花费时间：要写单位，例如0.5s
    3. 运动曲线：默认为ease，可以省略
    4. 何时开始：必须写单位，默认是0s
    5. 不同的效果用逗号隔开
    .transition-test {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 注意用逗号隔开 */
    transition: width .5s ease .1s, height 2s ease-in-out .5s;
}

.transition-test:hover {
    width: 400px;
    height: 200px;
}

    效果如下：

    进度条动画

    
    
    

    

    .bar {
    width: 150px;
    height: 14px;
    border: 1px solid red;
    border-radius: 7px;
    padding: 1px;
}
.bar-in {
    width: 0;
    height: 100%;
    border-radius: 7px;
    background-color: orangered;
    transition: width .8s;
}
.bar:hover .bar-in{
    width: 80%;
}

    效果如下：

    图片模糊处理

    使用filter: blur(5px);将图片模糊，数值越大越模糊。

    头像
头像

    效果如下：

    头像 头像

    calc()函数

    可以在声明CSS属性时进行一些计算，括号内可以写+, -, *, /。

    例如让子盒子永远比父盒子小30px，可以写成：

    width: calc(100%-30px);

    2D转换transform

    2D移动translate

    2D移动能够改变元素在页面中的位置，用法：

    /* 沿着x和y轴移动 */
transform: translate(x, y);
/* 沿着x轴移动 */
transform: translateX(x);
/* 沿着y轴移动 */
transform: translateY(y);

    特点：

    1. 不会影响其他元素
    2. 可以使用百分比单位(相对于元素的width和height)
    3. 对行内标签没有效果
    

    

    .translate-2d {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    transform: translate(20px, 30px);
    transition: all .2s ease;
}
.translate-2d:hover {
    transform: translate(20px, 15px);
}
.translate1-2d {
    width: 200px;
    height: 100px;
    background-color: orangered;
}

    效果如下：

    由于translate可以使用百分比单位，我们可以配合定位实现盒子的水平和垂直居中。

    
    
    

    

    .father{
    position: relative;
    width: 300px;
    height: 200px;
    background-color: skyblue;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 可以使用百分比 */
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    background-color: orangered;
}

    效果如下：

    2D旋转rotate

    2D旋转让元素顺时针或逆时针旋转，用法：

    transform: rotate(45deg);

    特点：

    1. 单位为deg度数
    2. 正表示顺时针，负表示逆时针
    3. 默认旋转的中心点是元素的中心点
    

    .test-rotate {
    width: 200px;
    height: 100px;
    background-color: orangered;
    transition: all .8s ease;
}
.test-rotate:hover {
    transform: rotate(360deg);
}

    效果如下：

    可以用旋转代替字体图标实现arrow的效果：

    
    
    

    

    .box {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
}
.arrow-down {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    transform: rotate(45deg) translateY(-75%);
}

    效果如下：

    rotate中心点

    transform-origin: x y;

    特点：

    1. 参数x和y用空格分开
    2. x y的默认值是50% 50%
    3. 还可以给x y设置像素或者方位名词(top|bottom|left|right|center)
    

    .test-origin {
    width: 200px;
    height: 100px;
    background-color: orangered;
    transition: all .8s ease;
}

.test-origin:hover {
    transform: rotate(360deg);
    transform-origin: right bottom;
}

    中心点变成了右下角，效果如下：

    缩放scale

    transform: scale(x, y);

    特点：

    1. x, y用逗号分隔，写倍数无单位
    2. 默认transform: scale(1, 1);，即宽和高都为1倍
    3. transform: scale(2);等价于transform: scale(2, 2);
    4. 不影响其他盒子，默认以中心点缩放，也可以修改缩放中心

    页面按钮示例：

    
    
    1
    
    
    2
    
    
    3
    

    

    .number {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    line-height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    text-align: center;
    transition: all .5s;
}
.number:hover {
    transform: scale(1.2);
}

    效果如下：

    1 2 3

    总结

    1. 可以同时使用多个转换，中间用空格隔开，transform: translate() rotate() scale();
    2. 顺序会影响效果，因为如果先旋转，坐标轴会被改变
    3. 所以尽量将位移放在最前面

    动画animation

    分为2步：

    1. 定义动画
    2. 调用动画

    keyframes定义动画

    使用keyframes定义动画

    @keyframes move {
    /* 0% {
    transform: translate(0px);
    } */

    25% {
        transform: translate(400px, 0px);
    }

    50% {
        transform: translate(400px, 200px);
    }

    75% {
        transform: translate(0px, 200px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

    注意：

    1. 0%是动画的开始，100%是动画的结束
    2. 动画使元素的样式逐渐变化，可以改变任意多的样式、任意多的次数
    3. 使用百分比(需要是整数)规定变化发生的时间，或使用from, to，等价于0%和100%

    animation调用动画

    div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 调用动画 */
    animation-name: move ;  /* 动画名称 */
    animation-duration: 4s;  /* 持续时间 */
}

    常见属性

    属性 描述
    @keyframes 规定动画
    animation 所有动画属性的简写，但不包含animation-play-state属性
    animation-name 必须，动画名称
    animation-duration 必须，规定动画完成一个周期所需时间
    animation-timing-function 动画的速度曲线，默认ease
    animation-delay 规定动画何时开始，默认0
    animation-iteration-count 规定动画被播放的次数，默认为1，可以设置为infinite
    animation-direction 规定动画是否在下一周期逆向播放，默认normal，逆向播放为alternate
    animation-play-state 规定动画是否运行/暂停，默认running，暂停是paused
    animation-fill-mode 规定动画结束之后的状态，保持forwards，回到开始点backwards

    动画速度曲线

    其中的animation-timing-function：

    值 描述
    ease 默认，动画低速开始，然后加快，在结束前变慢
    linear 匀速，动画从头到位的速度是相同的
    ease-in 动画以低速开始
    ease-out 动画以低速结束
    ease-in-out 动画低速开始和结束
    steps() 指定了时间函数中的间隔数量(步长) 
    你好！你好！你好！你好！你好！
    

     @keyframes cover {
     from {
         width: 0;
     }
     to {
         width: 300px;
     }
}
.test-timing {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    animation: cover 4s steps(15) infinite;
}

    效果如下：

    你好！你好！你好！你好！你好！

    简写

    animation: 名称 持续时间 曲线 何时开始 播放次数 是否反方向 结束状态;

    将上面的CSS修改为：

    div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    animation: move 4s infinite alternate;
}

    效果如下：

    样例：热点

    
    
    
    
    
    
    
    
    

    

    .point {
    position: relative;
    width: 8px;
    height: 8px;
    margin: 0 auto;
}

.dotted {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #09f;
}

.point div[class^="pulse"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 12px #009dfd;
    animation: pulse 1.2s linear infinite;
}
.point div.pulse2 {
    animation-delay: 0.4s;
}
.point div.pulse3 {
    animation-delay: 0.8s;
}
@keyframes pulse {
    70% {
        transform: scale(5);
        opacity: 1;
    }
    100% {
        transform: scale(9);
        opacity: 0;
    }
}

    效果如下：

    3D转换transform

    3D位移translate3d

    transform: translateZ(100px);表示向外移动100px，一般单位为px，或者使用transform: translate3d(0, 0, 100px);

    透视perspective

    使用透视来模拟人的视觉位置，即模拟视距(人眼到屏幕的距离)，单位是px。简单的来说，就是让元素实现近大远小的效果。透视写在被观察元素的父盒子上，例如：

    body {
    perspective: 500px;
}

    3D旋转rotate3d

    3D旋转让元素在三维平面沿着x轴/y轴/z轴或者自定义轴进行旋转。

    
    
    
    
    
    
    

    

    .father {
    perspective: 500px;
    width: 900px;
    height: 100px;
}

.test-3drotate {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 100px;
    background-color: skyblue;
    transform: rotateX(45deg);
}

    效果如下：

    自定义轴旋转rotate3d(x, y, z, 45deg)中的x, y, z表示旋转轴的矢量：

    div {
	transform: rotate3d(1, 0, 0, 45deg);  /* 沿着x轴旋转45度 */
    transform: rotate3d(1, 1, 0, 45deg);  /* 沿着x,y轴对角线旋转45度 */
}

    沿着x,y轴对角线旋转45度效果如下：

    3D呈现transform-style

    写给父元素，控制子盒子是否开启三位立体环境，默认是transform-style: flat;不开启，transform-style: preserve-3d;表示开启。

    body {
    perspective: 500px;
}
.box3d {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transition: all .8s;
    /* transform-style: preserve-3d; */
}
.box3d:hover {
    transform: rotateY(60deg);
}
.box3d div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box3d-child1 {
    background-color: skyblue;
}
.box3d-child2 {
    transform: rotateX(45deg);
    background-color: orangered;
}

    效果如下：

    取消transform-style: preserve-3d;的注释之后，效果如下：

    翻转盒子样例

    
    
    你好
    
    
    再见
    

    

    body {
    perspective: 500px;
}

.nav-test {
    position: relative;
    width: 100px;
    height: 35px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: all 1s;
}

.nav-test:hover {
    transform: translateY(-50%) rotateX(90deg);
}

.front-box,
.bottom-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    transition: all 1s;
}

.front-box {
    background-color: orangered;
}

.bottom-box {
    background-color: royalblue;
    transform: translateY(50%) translateZ(-17.5px) rotateX(-90deg);
}

    效果如下：

    你好 再见
前端前端基础

相关

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

web前端面试题

箭头流程图--前端实现

GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结

第十一章 前端基础

前端性能优化

前端开发框架Vue之findIndex() 的使用

标签