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、浮动
特性：不会超过父级的内边距，所有子级都需要设置浮动
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执行，其他浏览器不执行*/
}
// 4、使用双伪元素:before,:after
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
7、定位
position：fixed; // static、relative、absolute、fixed
position：static、relative、absolute、fixed
8、文字细节
// 自动换行
word-break: break-all; // normal， break-all（词内换行），keep-all（只能在半角空格或连字符处换行）
// 文本溢出
text-overflow: clip; // clip（修剪文本），ellipsis（显示省略号代替裁剪的文本）
// 内容换行
word-wrap: break-word; // normal，break-word（在长单词或 URL 地址内部进行换行）
// 空白字符
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、旋转
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; // 背对屏幕隐藏
