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

網(wǎng)站制作少不了前端開發(fā)，現(xiàn)在一般采用Html5進行開發(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）強制換行
word-break : break-all; 實現(xiàn)強制斷行.
字母和單詞換行設(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框選中時外邊框
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

分享名稱：網(wǎng)站前端開發(fā)之常用CSS分享
文章鏈接：http://www.bm7419.com/news1/245651.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計公司、定制網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計公司

廣告

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