常用的CSS（收集）

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

Css代码


* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

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

2. 文字包围图片

Java代码


img {

float: right;

margin: 2px;

}

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

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

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

Css代码


.layout-box {

display: inline-block;

width: 200px;

height: 100px;

margin: 2px;

}

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

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

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

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设定旋转功能

Css代码


.rotate .item:hover {

-webkit-transform:rotate(-5deg);

-moz-transform:rotate(-5deg);

-o-transform:rotate(-5deg);

-ms-transform:rotate(-5deg);

}

=====仅供参考，会有后续更新=======