網站前端開發之常用CSS分享

　　網站制作少不了前端開發，現在一般采用Html5進行開發，發揮空間很大。

　　在網頁前端開發中常用的前端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）強制換行

　　word-break：break-all;實現強制斷行.

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

　　4.不換行的方法

　　white-space：nowrap;文本不會換行，在同一行上繼續，直到遇到br標簽為止。

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

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

　　.img{

　　width：200px;

　　height：200px;

　　border-radius：50%;

　　object-fit：cover;

　　}

　　6.消除input框選中時外邊框

　　outline：none;

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

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

　　（2）圖片設置為背景圖片

　　在css中使用background來設置該圖片，再設置padding

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

　　8垂直居中

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

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

　　（3）已知寬高，父級設置相對定位，子級設置絕對定位+margin：auto

　　position：absolute;

　　top：0;

　　right：0;

　　bottom：0;

　　margin：auto

　　9.利用偽元素清除浮動方法

　　：：after{

　　content：;

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

　　display：block;

　　}

　　10.隱藏元素none

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

　　visibility：hidden;隱藏元素