H5 的新特性

語義化標簽
增強型表單
視頻和音頻audio和video
canvas
svg
Web Worker/Web Storage/WebSocket
本地存儲localStorage和seessionStorage
拖拽

css3 新特性

2D/3D轉(zhuǎn)換
動畫過渡transition
box-sizing

div 盒子居中

1、====
 position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
2皮迟、====
無需知道寬度
position: absolute;
left: 50%;  /* 父盒子寬度的50% */
top: 50%;   /* 父盒子高度的50% */
transform: translate(-50%,-50%);    /* 子盒子自身寬高的50% */
3一疯、===
display: flex;
justify-content: center;    /* 水平方向 居中*/
align-items: center;        /* 垂直方向 居中*/

css 的彈性盒模型和怪異盒模型

標準盒模型:width和height分別應(yīng)用到元素的內(nèi)容框咒精，在寬度和高度的范圍之外繪制元素的內(nèi)邊距、邊框、外邊距
怪異盒模型:為元素設(shè)定的width和height屬性決定了元素的邊框盒樟凄，即為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度范圍之內(nèi)進行繪制，通過已設(shè)定的高度和寬度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的高度和寬度

css 實現(xiàn)三角形

#triangle-down {
    width: 0;
    height: 0;
    border-left:100px solid transparent;
    border-right: 100px solid transparent;
    border-top:100px solid yellow;
}

瀏覽器兼容前綴

-ms-:IE瀏覽器
-moz-:火狐瀏覽器
-o-:歐朋瀏覽器
-webkit-:谷歌兄渺、蘋果瀏覽器

移動端適配

(1)用vw定制rem自適應(yīng)布局
    ==>/* 基于UI width=750px DPR=2的頁面 */
    ==>html:{font-size: calc(100vw / 750 * 100);}
(2) @media screen and (max-width: 600px) { /當屏幕尺寸小于600px時缝龄，應(yīng)用下面的CSS樣式/
    ==>h5:{font-size: 20px;}
(3) var browserWidth = document.body.clientWidth;//獲取瀏覽器可視區(qū)域的寬度。
    ==>

兩欄布局

a.左側(cè)float:left;右側(cè)margin-left;
b.左側(cè)float:left; 右側(cè)overflow:hidden;
c.絕對定位 .right{ position: absolute; top: 0; left: 200px; right: 0}
d.彈性布局

flex 布局/彈性布局

display:flex;

bfc 原理

BFC是一個獨立的布局環(huán)境挂谍，其中的元素布局是不受外界的影響叔壤，并且在一個BFC中，行內(nèi)元素水平排列口叙，直到占滿一行再換行炼绘，塊元素則會獨占完整的一個新行,在BFC中，它有自己的布局規(guī)則妄田。

觸發(fā)BFC：

1. 根元素
2. float 屬性的屬性值不為none
3. position屬性的屬性值為absolute或fixed
4. display屬性的屬性值為inline-block,table-cell,flex,inline-flex

作用：

1. 避免外邊距重疊
2. 清除浮動
3. 阻止正常元素被浮動元素覆蓋

動畫使用

1俺亮、animation  @keyframes
2驮捍、transition  transform
3、/*setInterval(()=>{
    console.log('2222222')
    },100)*/

清除浮動

1脚曾、在后面加空div加上clear:both
2东且、在父元素添加clearfix類名====.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}