1.讓圖文不可復制

-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;

?

2.讓圖片垂直居中

.Logo{height: 109px;line-height: 109px;} .Logo img{vertical-align: middle;}

?

3.行內(nèi)塊級元素垂直居中，基本思想是使用display: inline-block、vertical-align: middle和一個偽元素讓內(nèi)容塊處于容器中央。

.parent::after, .son{display:inline-block;vertical-align:middle; } .parent::after{content:'';height:100%; }

?

4.word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的內(nèi)容自動換行。

它們的區(qū)別：

1）word-break:break-all 例如div寬200px，它的內(nèi)容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
2）word-wrap:break-word 例子與上面一樣，但區(qū)別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

?

5.去除蘋果手機自帶樣式

/*強制去除表單自帶的樣式*/ input,button,select,textarea{outline:none;-webkit-appearance:none;}/*強制去除textarea自帶的樣式*/ textarea{resize:none;-webkit-appearance:none;}

?

6.文字從右向左

語法：
writing-mode : lr-tb | tb-rl
參數(shù)：
lr-tb : 左-右，上-下
tb-rl : 上-下，右-左
例如：

div { writing-mode: tb-rl; }

?

7.font-size:0清除display:inline-block元素換行符間隙，letter-spacing與font-size清除換行符間隙。

?

總結(jié)

以上是生活随笔為你收集整理的CSS小记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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