網(wǎng)站前端開發(fā)之常用CSS分享

　　網(wǎng)站制作少不了前端開發(fā)，現(xiàn)在一般采用Html5進(jìn)行開發(fā)，發(fā)揮空間很大。

　　在網(wǎng)頁前端開發(fā)中常用的前端css有：

　　1.單行省略

　　overflow：hidden;

　　text-overflow：ellipsis;

　　white-space：nowrap;

　　2.多行省略

　　display：-webkit-box;

　　-webkit-box-orient：vertical;

　　-webkit-line-clamp：3;//超出3行顯示省略

　　overflow：hidden;

　　3.換行的方法

　　（1）br/

　　（2）強(qiáng)制換行

　　word-break：break-all;實(shí)現(xiàn)強(qiáng)制斷行.

　　字母和單詞換行設(shè)置：word-break：break-all;word-wrap：break-word;

　　4.不換行的方法

　　white-space：nowrap;文本不會(huì)換行，在同一行上繼續(xù)，直到遇到br標(biāo)簽為止。

　　字母和單詞不換行設(shè)置：word-break：keep-all;word-wrap：normal;

　　5.圖片剪裁防止圖片變形

　　.img{

　　width：200px;

　　height：200px;

　　border-radius：50%;

　　object-fit：cover;

　　}

　　6.消除input框選中時(shí)外邊框

　　outline：none;

　　7.圖片和文字在同一行居中顯示

　　（1）vertical-align：middle給img添加這個(gè)屬性。

　　（2）圖片設(shè)置為背景圖片

　　在css中使用background來設(shè)置該圖片，再設(shè)置padding

　　（3）分別把圖片和文字放入不同的p，p設(shè)置display：inline-block;

　　8垂直居中

　　（1）父級(jí)元素設(shè)置display：table、height：200px，子級(jí)元素設(shè)置display：table-cell和vertical-align：middle、text-align：center，父級(jí)需要設(shè)置高度，table-cell容易被float，position：absolute影響，對(duì)margin值無效果，響應(yīng)padding屬性。

　　（2）元素設(shè)置display：flex;align-items：center;justify-content：center;適用于IE10+、chrome、Safari、Firefox，justify-content是定義水平方向的元素位置，align-items是定義垂直方向的元素位置。

　　（3）已知寬高，父級(jí)設(shè)置相對(duì)定位，子級(jí)設(shè)置絕對(duì)定位+margin：auto

　　position：absolute;

　　top：0;

　　right：0;

　　bottom：0;

　　margin：auto

　　9.利用偽元素清除浮動(dòng)方法

　　：：after{

　　content：;

　　clear：both;//如果想clear生效，必須是塊級(jí)元素；

　　display：block;

　　}

　　10.隱藏元素none

　　display：none;會(huì)清除原本占用的布局空間.

　　visibility：hidden;隱藏元素