2021-07-05

回顾

 html5：超文本标记语言，一套标记

html5 新增特性

结构标签

智能表单

新增的API

        多媒体：音频，视频

         画布canvas

        地理定位

        本地存储

        结构标签的兼容方法：

                js创建标签：document.createElement()

                引入js插件<script src=""></script>

 css3

         选择器，背景与边框，动画，文本效果，多列布局，用户界面，框模型，2D/3D转换

 选择器：

        结构伪类

        状态伪类

        伪元素选择器

        属性选择器

背景与边框

背景

        多背景：background-image:url(),url()...

        背景的定位区域：background-orgin：content-box / padding-box (默)/ border-box;

        背景的裁剪区域：background-clip:content-box / padding-box / border-box (默);

        背景的尺寸：background-size:x y;

        渐变

                 background-gradient:linear-gradient();

                background-image:radial-fradient();

边框

        border-radius

        box-shadow: x y blur spread color inset;

文本效果：

         text-shadow: x y blur color;

        自定义字体

                @font-face{

                        font-family: ;

                        src=url( );

                }

        字体图标：http://www.iconfont.cn

多列布局

        column-width

        column-count

        column-gap

        column-rule

用户界面

        resize

        outline

        cursor

框模型

        box-sizing

动画

        过渡动画

                transition:property duration timeing-fuction delay;

        关键帧动画

弹性盒子

容器

        设置弹性盒子：display: flex/inline-flex;

        主轴的排列方向：flex-direction: row / row-reverse / column / column-reverse;

        主轴的对齐方式：justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;

        交叉轴的对齐方式：align-items: flex-start / flex-end / center / stretch (拉伸) / baseline(基线对齐)

        换行：felx-wrap:nowrap / wrap / wrap-reverse;

项目

        放大：flex-grow: 0; 自动不放大

        缩小：flex-shrink: 1; 自动缩小

        flex-basis:判断是否有剩余空间

        flex:1;

        排序：order:0;

        项目对齐方式：align-self: flex-start / flex-end / center / stretch (拉伸)/ baseline(基线对齐) /auto;

媒体查询

        @media 媒体类型 链接符 (特性){

                选择器{ 声明 }

        }

        第一种写法： @media screen and (min-width:600px){}

        第二种写法：<link href="" media="媒体类型 连接符 (特性)">

移动端

1. 设置视口

理想视口：布局视口 = 设备视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2. rem适配

确认好基准线，常规布局，使用rem单位取代px

rem的布局原理：

        概念：rem是一个相对单位，相对于根目录（html）下的font-size的值来计算

        默认情况下，rem转换为px的基准值 16px

                1rem = 16px

        修改基准值的转换 1rem = 100px

3. 换算不同设备下的1rem的值即通过媒体查询或js动态计算控制

方法一：通过媒体查询分别设置不同屏幕的根字体

@media screen and (min-width:750px){
    html{
        font-size:100px;
    }
}

方法二：

根据设计稿计算标准的转换率

使用js查找不同的屏幕尺寸

<script> //使用脚本查找屏幕尺寸
    //获取屏幕尺寸
    var deviceWidth = document.documentElement.clienWidth;
    //不同屏幕尺寸下的基准值

    // 超过标准设计稿尺寸的屏幕，需要按照标准设计稿的尺寸的屏幕显示
    if(deviceWidth >= 750){
        deviceWidth = 750;
    }
    var fs = (deviceWidth * 100) / 750;

    document.documentElement.style.fontSize = fs + 'px';
</script>

vw适配

根据视口窗口等均分100份

html{
    font-size: 13.333333vw;
}
.box{
    width: 1rem;
    height: 1rem;
}

调用最高版本的IE内核

<meta http-equiv = "X-UA-Compatible" comtent = "IE=edge">