1. 防padding屬性改變盒子模型寬度?

Css代碼??

1. *?{??
2. ??-webkit-box-sizing:?border-box;??
3. ?????-moz-box-sizing:?border-box;??
4. ??????????box-sizing:?border-box;??
5. }??

?? ?當前css將固定盒子模型寬度總是以(顯示)指定的寬度(width:300px)為準, 并不會受到padding而強制改變和模型寬度.

?

2. 文字包圍圖片

Java代碼??

1. img?{??
2. ??float:?right;??
3. ??margin:?2px;??
4. }??

? ? 在相同和模型中, 將圖片浮動而文字內容不浮動時, 將形成文字包圍圖片的效果.?

? ? Note: 因float已脫離流式布局, 為防止圖片溢出和模型, 即需要在和模型中使用樣式 -- overflow:aotu;

?

3. 使用inline-block實現柵格化布局

Css代碼??

1. .layout-box?{??
2. ??display:?inline-block;??
3. ??width:?200px;??
4. ??height:?100px;??
5. ??margin:?2px;??
6. }??

? ? 如果使用 display:block; float:left; 則需要小心當前和模型容器的高度是否會影響到后面的布局, 而使用inline-block則無需擔心, 它會將盒模型撐開.

?

4. 將文字內容分列顯示, column

? ? 當屏幕過寬且文字內容較多時, 你是否常常很難找到正在閱讀的內容, 下一行的開始位置呢? 以下css會將文字內容分為三列顯示

Css代碼??

1. .three-column?{??
2. ??padding:?1em;??
3. ??-moz-column-count:?3;??
4. ??-moz-column-gap:?1em;??
5. ??-webkit-column-count:?3;??
6. ??-webkit-column-gap:?1em;??
7. ??column-count:?3;??
8. ??column-gap:?16px;??
9. }??

? ? Note: 查看column兼容性說明

?

3. CSS設定旋轉功能

Css代碼??

1. .rotate?.item:hover?{??
2. ????-webkit-transform:rotate(-5deg);??
3. ????-moz-transform:rotate(-5deg);??
4. ????-o-transform:rotate(-5deg);??
5. ????-ms-transform:rotate(-5deg);??
6. } ?

=====僅供參考，會有后續更新=======

轉載于:https://www.cnblogs.com/xm1-ybtk/p/5112011.html

總結

以上是生活随笔為你收集整理的常用的CSS（收集）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。