html+css备忘

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; // 背对屏幕隐藏