常用的CSS（收集）

1. 防padding属性改变盒子模型宽度 

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

    当前css将固定盒子模型宽度总是以(显示)指定的宽度(width:300px)为准, 并不会受到padding而强制改变和模型宽度.

2. 文字包围图片

img {
float: right;
margin: 2px;
}

在相同和模型中, 将图片浮动而文字内容不浮动时, 将形成文字包围图片的效果.

Note: 因float已脱离流式布局, 为防止图片溢出和模型, 即需要在和模型中使用样式 -- overflow:aotu;

3. 使用inline-block实现栅格化布局

.layout-box {
display: inline-block;
width: 200px;
height: 100px;
margin: 2px;
}

如果使用 display:block; float:left; 则需要小心当前和模型容器的高度是否会影响到后面的布局, 而使用inline-block则无需担心, 它会将盒模型撑开.

4. 将文字内容分列显示, column

当屏幕过宽且文字内容较多时, 你是否常常很难找到正在阅读的内容, 下一行的开始位置呢? 以下css会将文字内容分为三列显示

.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 16px;
}

Note: 查看column兼容性说明

3. CSS设定旋转功能

.rotate .item:hover {
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
}