網站前端開發之常用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）

（2）強制換行
word-break : break-all; 實現強制斷行.
字母和單詞換行設置：word-break:break-all;word-wrap:break-word;
4. 不換行的方法
white-space:nowrap;文本不會換行，在同一行上繼續，直到遇到
標簽為止。
字母和單詞不換行設置：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）分別把圖片和文字放入不同的div，div設置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;
left:0;
top:0;
right:0;
bottom:0;
margin:auto
9. 利用偽元素清除浮動方法
::after{
content:"";
clear:both; //如果想clear生效，必須是塊級元素；
display:block;
}
10. 隱藏元素none

網頁名稱：網站前端開發之常用CSS分享
瀏覽路徑：http://m.kartarina.com/news/245651.html

成都網站建設公司_創新互聯，為您提供網站改版、靜態網站、虛擬主機、網站內鏈、響應式網站、企業網站制作

廣告

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