時(shí)間：2023-07-22 20:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-22 20:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
CSS高級(jí)技巧：
在線咨詢
visibility：visible ; 對(duì)象可視 visibility：hidden; 對(duì)象隱藏特點(diǎn)： 隱藏之后，繼續(xù)保留原有位置。（相當(dāng)于停職留薪）| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內(nèi)容也不添加滾動(dòng)條 |
| hidden | 不顯示超過(guò)對(duì)象尺寸的內(nèi)容，超出的部分隱藏掉 |
| scroll | 不管超出內(nèi)容否，總是顯示滾動(dòng)條 |
| auto | 超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條 |
| 屬性 | 區(qū)別 | 用途 |
|---|---|---|
| display | 隱藏對(duì)象，不保留位置 | 配合后面js做特效，比如下拉菜單，原先沒(méi)有，鼠標(biāo)經(jīng)過(guò)，顯示下拉菜單， 應(yīng)用極為廣泛 |
| visibility | 隱藏對(duì)象，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動(dòng) 2. 保證盒子里面的內(nèi)容不會(huì)超出該盒子范圍 |
| 屬性值 | 描述 |
|---|---|
| default | 默認(rèn) |
| pointer | 小手 |
| move | 移動(dòng) |
| text | 文本 |
| not-allowed | 禁止 |
<ul> <li style="cursor:default">我是默認(rèn)</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移動(dòng)</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是禁止</li> </ul>outline : outline-color ||outline-style || outline-width最直接的寫法是 ： outline: 0; 或者 outline: none;<input type="text" style="outline: 0;"/><textarea style="resize: none;">| 屬性 | 用途 | 用途 |
|---|---|---|
| 鼠標(biāo)樣式 | 更改鼠標(biāo)樣式cursor | 樣式很多，重點(diǎn)記住 pointer |
| 輪廓線 | 表單默認(rèn)outline | outline 輪廓線，我們一般直接去掉，border是邊框，我們會(huì)經(jīng)常用 |
| 防止拖拽 | 主要針對(duì)文本域resize | 防止用戶隨意拖拽文本域，造成頁(yè)面布局混亂，我們r(jià)esize:none |
vertical-align : baseline |top |middle |bottom注意：img{vertical-align:top;border:0;}2.給img 添加 display：block; 轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問(wèn)題了。img{display:block;}text-overflow : clip ；不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切 text-overflow: ellipsis; 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）注意：一定要首先強(qiáng)制一行內(nèi)顯示，再次和overflow屬性 搭配使用。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>溢出的文字省略號(hào)顯示</title> <style> div { width: 150px; height: 25px; border: 1px solid pink; /*當(dāng)文字顯示不開(kāi)的時(shí)候，自動(dòng)換行*/ /*white-space: normal;*/ /*1. 要文字強(qiáng)制一行內(nèi)顯示 除非 遇到 br */ white-space: nowrap; /*2. 溢出隱藏*/ overflow: hidden; /*3. 文字溢出 用省略號(hào)替代 ellipsis 省略號(hào)*/ text-overflow: ellipsis; } </style> </head> <body> <div>歡迎來(lái)到前端開(kāi)發(fā)網(wǎng)</div> </body> </html>展示如下：/*1. 先強(qiáng)制一行內(nèi)顯示文本*/ white-space: nowrap; /*2. 超出的部分隱藏*/ overflow: hidden; /*3. 文字用省略號(hào)替代超出的部分*/ text-overflow: ellipsis;background-image background-repeat background-position屬性進(jìn)行背景定位， 其中最關(guān)鍵的是使用background-position 屬性精確地定位。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>體會(huì)css精靈技術(shù)</title> <style> .duo { width: 36px; height: 42px; background: url(images/jlt.png) no-repeat 0 -192px; } .kuai { width: 36px; height: 42px; background: url(images/jlt.png) no-repeat -41px -192px; } .hao { width: 36px; height: 42px; background: url(images/jlt.png) no-repeat -82px -192px; } .sheng { width: 36px; height: 42px; background: url(images/jlt.png) no-repeat -123px -192px; } p{ overflow: hidden; width: 100%; height: 42px; line-height: 42px; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; color: #444; } body{ margin: 0 auto; width: 1170px; } div{ float: left;width: 279px; } p{ margin-left: 47px; margin-top: -65px; } </style> </head> <body> <div> <h5 class="duo"></h5> <p>品類齊全，輕松購(gòu)物</p> </div> <div> <h5 class="kuai"></h5> <p>多倉(cāng)直發(fā)，極速配送</p> </div> <div> <h5 class="hao"></h5> <p>正品行貨，精致服務(wù)</p> </div> <div> <h5 class="sheng"></h5> <p>天天低價(jià)，暢選無(wú)憂</p> </div> </body> </html>關(guān)鍵詞：技巧,高級(jí)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
