網(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）分別把圖片和文字放入不同的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. 利用偽元素清除浮動(dòng)方法
 ::after{
       content:"";
       clear:both;   //如果想clear生效，必須是塊級元素；
       display:block;
}
10. 隱藏元素none
display:none;會(huì)清除原本占用的布局空間.
visibility:hidden; 隱藏元素