網(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;文本不會換行，在同一行上繼續(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添加這個屬性。
（2）圖片設(shè)置為背景圖片
在css中使用“background”來設(shè)置該圖片，再設(shè)置padding
（3）分別把圖片和文字放入不同的div，div設(shè)置display: inline-block;

8 垂直居中
（1）父級元素設(shè)置display：table 、height:200px, 子級元素設(shè)置display：table-cell和vertical-align: middle 、text-align:center， 父級需要設(shè)置高度， table-cell 容易被float，position：absolute影響，對margin值無效果，響應(yīng)padding屬性。
（2）元素設(shè)置display:flex; align-items:center;justify-content:center; 適用于IE10+、chrome、Safari、Firefox，justify-content是定義水平方向的元素位置，align-items是定義垂直方向的元素位置。
（3）已知寬高，父級設(shè)置相對定位，子級設(shè)置絕對定位+margin：auto
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto

9. 利用偽元素清除浮動方法
 ::after{
       content:"";
       clear:both;   //如果想clear生效，必須是塊級元素；
       display:block;
}
10. 隱藏元素none
display:none;會清除原本占用的布局空間.
visibility:hidden; 隱藏元素

以上就是關(guān)于網(wǎng)站前端開發(fā)之常用CSS分享(掘金網(wǎng)站前端開發(fā))，希望對你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

網(wǎng)站欄目：網(wǎng)站前端開發(fā)之常用CSS分享(掘金網(wǎng)站前端開發(fā))
網(wǎng)頁鏈接：http://jinyejixie.com/news34/314184.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、小程序開發(fā)、服務(wù)器托管、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)