收录惯用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兼容性说明