html:

1、label標簽

css:

1、標簽顯示模式： block，inline， inline-block

2、選擇器： 元素、id、類、鏈接、屬性、class^, class&, class*、:target

3、外邊距合并， overflow:hidden

4、布局建議：width,height > padding > margin

5、盒子模型

box-sizing: content-box; // 默認
box-sizing: border-box; // padding、margin計算在width、height中

6、浮動

特性：不會超過父級的內(nèi)邊距，所有子級都需要設(shè)置浮動

float: left; // left, right
// 清除浮動的方法
// 1、添加一個塊級標簽 style="clear:both" 
// 2、父級元素添加overflow:hidden
// 3、添加偽元素標簽:after
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行*/
}

// 4、使用雙偽元素:before,:after
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行*/
}

7、定位

position：fixed; // static、relative、absolute、fixed

position：static、relative、absolute、fixed

8、文字細節(jié)

// 自動換行
word-break: break-all; // normal， break-all（詞內(nèi)換行），keep-all（只能在半角空格或連字符處換行）
// 文本溢出
text-overflow: clip; // clip（修剪文本），ellipsis（顯示省略號代替裁剪的文本）
// 內(nèi)容換行
word-wrap: break-word; // normal，break-word（在長單詞或 URL 地址內(nèi)部進行換行）
// 空白字符
white-space:nowrap; // 不換行

9、過渡

transtion: with 0.3s linear 0.1s;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: linear; // linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
transition-delay: 0.1s;

10、2D變形 與過度搭配使用

1、移動

 transform: translate(x,y)
 transform: translateX(100px)
 transform: translateY(100px)

2、縮放

transform: scale(10)
transform: scaleX(30)
transform: scaleY(0.1)

3、旋轉(zhuǎn)

transform: rotate(-180deg)
transform: rotateX(-180deg)
transform: rotateY(-180deg)

4、原點 變換中心點

transform-origin: left top;
transform-origin: 100px 300px;

5、傾斜

transform:skew(-60deg, -60deg)
transform:skewX(-60deg)
transform:skewY(-60deg)

11、3D變形

// 透視 perspective:300px; (變換的父標簽樣式)
backface-visibility: hidden; // 背對屏幕隱藏