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);
}