zoukankan      html  css  js  c++  java
  • html+css

    一:HTML5新特性

    1、语义化标签
    header
    footer
    section
    article
    aside
    main
    menu


    2、本地存储
    localStorage 永久存储,除非手动删除 5m
    sessionStorage 关闭浏览器就清空
    localStorage 和 sessionStorage 前端可以访问和修改,后端不行

    cookie 4K 可以设定过期时间,客户端和服务端都可以访问并且修改
    https://github.com/js-cookie/js-cookie cookie插件

    3、canvas 画布
    一般使用图表插件 v-chart echarts


    4、地理定位
    <script>
    var x=document.getElementById("demo");
    function getLocation(){
    if (navigator.geolocation){
    // 这个就是H5的获取当前经纬度并且获取后执行showPosition回调
    navigator.geolocation.getCurrentPosition(showPosition);
    }else{
    x.innerHTML="Geolocation is not supported by this browser.";
    }
    }

    // position包含经纬度信息
    function showPosition(position){
    x.innerHTML="Latitude:" + position.coords.latitude + "<br />Longitude:" + position.coords.longitude;
    }
    </script>


    *二:水平垂直居中
    1、文字、行内块或者行内元素居中,用text-align:center; line-height等于这些元素的父级的高度
    2、父级div相对定位,子div绝对定位,上下左右0,margin:auto,需要设置宽高
    3、父级div相对定位,子div绝对定位,上下50%,transform:translate(-50%,-50%),不需要设置宽高
    4、flex布局,justify-center,align-items:center


    *三:flex属性
    display:flex
    justify-content 主轴的排列方式
    align-items 侧轴(交叉轴)的排列方式
    flex-direction 决定主轴的方向
    flex-wrop 是否换行
    flex


    四:移动端怎么适配
    使用vw、flex弹性布局、媒体查询

    五:盒子模型(box-sizing: border-box)

    六:css权重


    1.标签选择器 00001
    2.类选择器 00010
    3.ID选择器 00100
    4.行内样式 01000
    5.!important 10000

    七:css预编译 比如less、sass
    编译相当于翻译

  • 相关阅读:
    宏任务与微任务
    reactnative 自定义项目的图标库
    react-native中textInput在androidTV上的焦点处理(坑篇)
    js中!!的运用
    ES6里class杂乱随笔
    浅析链式调用
    link和@import的区别
    ES2020链判断运算符?.和Null判断运算符??
    vue组件使用name属性来生成递归组件
    k8s学习——相关概念
  • 原文地址:https://www.cnblogs.com/HYTing/p/13036997.html
Copyright © 2011-2022 走看看