1.讓圖文不可復(fù)制

-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)塊級(jí)元素垂直居中，基本思想是使用display: inline-block、vertical-align: middle和一個(gè)偽元素讓內(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)容自動(dòng)換行。

它們的區(qū)別：

1）word-break:break-all 例如div寬200px，它的內(nèi)容就會(huì)到200px自動(dòng)換行，如果該行末端有個(gè)英文單詞很長(zhǎng)（congratulation等），它會(huì)把單詞截?cái)?#xff0c;變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
2）word-wrap:break-word 例子與上面一樣，但區(qū)別就是它會(huì)把congratulation整個(gè)單詞看成一個(gè)整體，如果該行末端寬度不夠顯示整個(gè)單詞，它會(huì)自動(dòng)把整個(gè)單詞放到下一行，而不會(huì)把單詞截?cái)嗟舻摹?/p>

?

5.去除蘋果手機(jī)自帶樣式

/*強(qiáng)制去除表單自帶的樣式*/ input,button,select,textarea{outline:none;-webkit-appearance:none;}/*強(qiáng)制去除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元素?fù)Q行符間隙，letter-spacing與font-size清除換行符間隙。

?

總結(jié)

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

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