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

Css代碼??

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

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

?

2. 文字包圍圖片

Java代碼??

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

? ? 在相同和模型中, 將圖片浮動(dòng)而文字內(nèi)容不浮動(dòng)時(shí), 將形成文字包圍圖片的效果.?

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

?

3. 使用inline-block實(shí)現(xiàn)柵格化布局

Css代碼??

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

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

?

4. 將文字內(nèi)容分列顯示, column

? ? 當(dāng)屏幕過(guò)寬且文字內(nèi)容較多時(shí), 你是否常常很難找到正在閱讀的內(nèi)容, 下一行的開(kāi)始位置呢? 以下css會(huì)將文字內(nèi)容分為三列顯示

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兼容性說(shuō)明

?

3. CSS設(shè)定旋轉(zhuǎn)功能

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. } ?

=====僅供參考，會(huì)有后續(xù)更新=======

轉(zhuǎn)載于:https://www.cnblogs.com/xm1-ybtk/p/5112011.html

總結(jié)

以上是生活随笔為你收集整理的常用的CSS（收集）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。