css小知識(shí)

CSS設(shè)置縮進(jìn)、字體間距、行間距(行高)

1. 縮進(jìn) text-index

text-index:20px; 段落開頭縮進(jìn)了20px;主要對(duì)設(shè)置的標(biāo)簽的開頭縮進(jìn);

小技巧:給頁(yè)面添加logo利用h標(biāo)簽,輸入文字并且對(duì) text-index 給其設(shè)置一個(gè)較大的負(fù)值,可達(dá)到隱藏文本的效果

2. 字體間距 letter-spacing

letter-spacing:3px;

3. 行間距(行高)line-height

設(shè)置行間距及設(shè)置行高,line-height;注意單位

line-height:27;line-height:27px;是2個(gè)概念

CSS的幾種隱藏方式

1. opacity

通過(guò)設(shè)置透明度opacity:0;可以達(dá)到隱藏的效果,但是會(huì)出現(xiàn)占位的情況,被隱藏的元素依然會(huì)對(duì)我們的網(wǎng)頁(yè)布局起作用,用戶可以與它交互;

2. Visibility

設(shè)置 visibility:hidden;也可以達(dá)到隱藏的效果,同樣也會(huì)出現(xiàn)占位的情況,被隱藏的元素依然會(huì)對(duì)我們的網(wǎng)頁(yè)布局起作用,與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互;

3. display

設(shè)置display:none;這個(gè)就是真正意義上的隱藏了,不會(huì)出現(xiàn)占位的情況,被隱藏的元素不占據(jù)任何空間,何對(duì)該元素直接進(jìn)行用戶交互操作都不可能生效;;

注:這里的占位和不占位的意思是:

  • 占位:當(dāng)前元素還在這個(gè)位置,如果你想點(diǎn)擊操作這個(gè)標(biāo)簽覆蓋的元素,就會(huì)發(fā)現(xiàn)無(wú)法操作;
  • 不占位:當(dāng)前元素已經(jīng)不在這個(gè)位置,此時(shí)如果你點(diǎn)擊操作這個(gè)標(biāo)簽覆蓋的元素,就可以操作;這種方式產(chǎn)生的效果就像元素完全不存在。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,108評(píng)論 1 92
  • position不同值和區(qū)別 absolute: 生成絕對(duì)定位的元素,相對(duì)于 static 定位以外的第一個(gè)父元素...
    zy懶人漫游閱讀 161評(píng)論 0 0
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,866評(píng)論 32 459
  • 前言:放手也是種了不起的愛(ài),每個(gè)人都有自己的路要走。 帶女兒去領(lǐng)居家玩,他們家有兩個(gè)小朋友。 一個(gè)剛3歲,另一個(gè)1...
    萌媽育兒記閱讀 599評(píng)論 2 2
  • 改變就是一個(gè)決定,可是我們?yōu)槭裁匆鲆粋€(gè)改變的決定呢?人都愛(ài)待在舒適區(qū),習(xí)慣讓多少人就這么平平淡淡過(guò)完一生,你不主...
    趙遠(yuǎn)東閱讀 149評(píng)論 0 2

友情鏈接更多精彩內(nèi)容