web前端（三）

6.HTML5与CSS3

6.1CSS权重

CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
权重的计算实例

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

6.2css3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->
2、E:first-chi

ld：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素
属性选择器：
1、E[attr] 含有attr属性的元素

     < style type="text/css">
            div[data-attr='ok']{
                color:red;
            }
        </style>
        ......
        <div data-attr="ok">这是一个div元素</div>

2.E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”

6.3css3圆角、rgba

CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角：
border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
rgba（新的颜色值表示法）
1、盒子透明度表示法：

 .box
    {
        opacity:0.1;
        /* 兼容IE */
        filter:alpha(opacity=10); 
    }

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

6.4 css3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

6.5 css3 transition变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

6.6 css3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
eg：人物走路动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

6.7 css3 浏览器前缀

浏览器样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如：

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自动添加浏览器前缀
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
可以在Sublime text中通过package control 安装 autoprefixer
Autoprefixer在Sublime text中的设置：
1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

6.8 HTML5新增标签

新增语义标签
1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚
音频视频
1、<audio>
2、<video>
PC端兼容h5的新标签的方法，在页面中引入以下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"><script/>

6.9 HTML5新增表单控件

新增类型：网址邮箱日期时间星期数量范围电话颜色搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件

属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

7.移动端页面开发

7.1 移动端与pc端页面布局区别

视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用
meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下( 快捷方式：meta:vp + tab )：

<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>

pc端与移动端渲染网页过程：在这里插入图片描述
视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
清晰度解决过程示意图：
在这里插入图片描述
背景图强制改变大小，可以使用background新属性
background新属性
background-size:

length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

7.2适配布局类型

设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：

流体布局+少量响应式
基于rem的布局

流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如：
width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码如下：

  @media (max-width:960px){
        .left_con{width:58%;}
        .right_con{width:38%;}
    }
    @media (max-width:768px){
        .left_con{width:100%;}
        

.right_con{width:100%;}
}

基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -> Preferences -> Browse Packages…
复制下载的cssrem目录到刚才的packges目录里。
重启Sublime Text。
配置参数
参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem
px_to_rem - px转rem的单位比例，默认为40。
max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
available_file_types - 启用此插件的文件类型。默认为：[".css", “.less”, “.sass”]。

7.3移动端布局实例

移动端页面布局
1、结合流体布局和响应式布局制作天天生鲜移动端首页页面
2、使用基于rem的布局方式制作天天生鲜移动端首页页面
天天生鲜首页效果图如下：
在这里插入图片描述

8.常用css列表

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal设置不加粗
List itemline-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗字号/行高字体；如： font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-overflow 设置一行文字宽度超过容器宽度时的显示方式，如：text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号
white-space 一般用来设置文本不换行，如：white-space:nowrap 设置文本不换行一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字如：list-style:none
width 设置盒子内容的宽度，如： width：100px;
height 设置盒子内容的高度，如： height：100px;
border-top 设置盒子顶部边框的三个属性如：border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线，详细设置说明：盒子模型
border-left 设置盒子左边边框的三个属性如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线，详细设置说明：盒子模型

border-right 设置盒子右边边框的三个属性如：border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线，详细设置说明：盒子模型

border-bottom 设置盒子底部边框的三个属性如：border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线，详细设置说明：盒子模型
border 同时设置盒子的四个边框，如果四个边的样式统一就使用它如：border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线，详细设置说明：盒子模型
padding 设置盒子四个边的内边距如：padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针)，详细设置说明：盒子模型
margin 设置盒子四个边的外边距如：margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针)，详细设置说明：盒子模型
overflow 设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式如：overflow:hidden 超出的子元素被裁切，详细设置说明：元素溢出
display 设置盒子的显示类型及隐藏，如：display:block 将盒子设置为以块元素显示
display:none 将元素隐藏，详细设置说明：元素类型
float 设置元浮动如：float:left 设置左浮动 float:right 设置右浮动，详细设置说明：元素浮动
clear 在盒子两侧清除浮动如：clear:both 在盒子两侧都不允许浮动，详细设置说明：元素浮动
position 设置元素定位如：position:relative 设置元素相对定位，详细设置说明：元素定位
background 设置元素的背景色和背景图片，如：background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg，背景色为cyan，详细设置说明：元素背景
background-size 设置盒子背景图的尺寸，如：background-size:30px 40px;设置背景图的尺寸宽为30px，高为40px，这个属性不能合到background属性中，详细设置说明：retina屏适配
opacity 设置元素整体透明度，一般为了兼容需要加上filter属性设置如：opacity:0.1;filter:alpha(opacity=10)
cursor 设置鼠标悬停在元素上时指针的形状如：cursor:pointer 设置为手型
outline 设置文本输入框周围凸显的蓝色的线，一般是设为没有如：outline:none
border-radius 设置盒子的圆角如：border-radius:10px 设置盒子的四个角为10px半径的圆角，详细设置说明：css圆角
box-shadow 设置盒子的阴影，如：box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影，详细设置说明：css阴影
transition 设置盒子的过渡动画，如：transition:all 1s ease;设置元素过渡动画为1秒完成，所有变动的属性都做动画，详细设置说明：过渡动画
animation 设置盒子的关键帧动画，详细设置说明：关键帧动画
transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度，详细设置说明：元素变形
box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。