網(wǎng)站制作少不了前端開發(fā),現(xiàn)在一般采用Html5進(jìn)行開發(fā),發(fā)揮空間很大。
在網(wǎng)頁(yè)前端開發(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)父級(jí)元素設(shè)置display:table 、height:200px, 子級(jí)元素設(shè)置display:table-cell和vertical-align: middle 、text-align:center, 父級(jí)需要設(shè)置高度,table-cell容易被float,position:absolute影響,對(duì)margin值無效果,響應(yīng)padding屬性。
(2)元素設(shè)置display:flex; align-items:center;justify-content:center;適用于IE10+、chrome、Safari、Firefox,justify-content是定義水平方向的元素位置,align-items是定義垂直方向的元素位置。
(3)已知寬高,父級(jí)設(shè)置相對(duì)定位,子級(jí)設(shè)置絕對(duì)定位+margin:auto
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto
9. 利用偽元素清除浮動(dòng)方法
::after{
content:"";
clear:both; //如果想clear生效,必須是塊級(jí)元素;
display:block;
}
10. 隱藏元素none
display:none;會(huì)清除原本占用的布局空間.
分享名稱:網(wǎng)站前端開發(fā)之常用CSS分享
文章鏈接:http://m.newbst.com/news1/245651.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)