css常見樣式（僅供自己日后查閱）

時(shí)間：2023-08-29 20:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 20:48:01 來源：網(wǎng)站運(yùn)營

css常見樣式（僅供自己日后查閱）：塊級(jí)元素和行內(nèi)元素

常用塊級(jí)元素：div h1~h6 p hr form ul dl ol pre table li dd dt tr td th

常用行內(nèi)元素：em strong span a br img button input label select

區(qū)別：

• 塊級(jí)元素獨(dú)占一行空間（即便設(shè)置了寬度也不例外），默認(rèn)撐滿父容器。行內(nèi)元素只獨(dú)占自身內(nèi)容空間（增加內(nèi)邊距padding，內(nèi)邊距撐大的空間也不是自己的，屬于非法占用）
• 塊級(jí)元素內(nèi)可包含其他塊級(jí)元素和行內(nèi)元素。行內(nèi)元素只能包含文本和行內(nèi)元素
• 塊級(jí)元素可設(shè)置寬width高h(yuǎn)eight。行內(nèi)元素設(shè)置寬高無效。
• 行內(nèi)元素設(shè)置左右外邊距邊距margin有效，設(shè)置上下外邊距margin無效。行內(nèi)元素設(shè)置內(nèi)邊距padding，會(huì)將背景色撐開，撐開的空間重疊占據(jù)其他元素的空間。而塊級(jí)元素內(nèi)外邊距設(shè)置都有效，增加的空間都是獨(dú)占。

使用案例：

塊級(jí)元素居中設(shè)置：

margin: 0 auto;/*對(duì)自身元素生效。效果是在父元素內(nèi)居中（塊級(jí)元素默認(rèn)獨(dú)占一整行，居中顯示需要先設(shè)置width），內(nèi)部元素布局不變*/

行內(nèi)元素（或者inline-block）居中設(shè)置：

text-align: center;/*對(duì)content生效。content是文本，則文本居中；content是行內(nèi)元素，則行內(nèi)元素居中；content是塊級(jí)元素，則塊級(jí)元素的內(nèi)容居中*/

css繼承

css繼承是指：子元素繼承了父元素的CSS樣式。

• 能繼承的屬性：
• 字體：font-family，font-size，font-weight，line-height
• 文本：letter-spacing，word-spacing，text-align, text-indent
• 列表：list-style、list-style-type、list-style-position、list-style-image
• 顏色：color

注：a標(biāo)簽不能繼承父元素的字體顏色，原因是a標(biāo)簽自己有默認(rèn)字體顏色，會(huì)覆蓋掉繼承自父元素的字體顏色。

• 不能繼承的屬性：
• display
• float
• border
• padding和margin
• width和height
• background

注：以上屬性的使用時(shí)，長期驗(yàn)證中

css盒模型

CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距的方式。

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。

背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。

css常見屬性設(shè)置

• display

取值：inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inherit初始值：inline適用范圍：所有元素可繼承否：不可繼承元素的display屬性設(shè)置為inline-block，則該元素具有inline和block的雙重屬性

• border

.box {border-width: 1px; /*邊框?qū)挾?/ border-color: red; /*邊框顏色*/ border-style: solid; /* 邊框樣式，eg：dotted、dash*/使用案例：

• 三角形

• 正方形

• 漏斗

• 橢圓

• border-radius:px等于寬高的一半是圓形

• font

p { line-height: 1.5; /*行高，可以用百分比、倍數(shù)或者固定尺寸*/ font-size: 14px; /*字體大小*/ font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; /*宋體、微軟雅黑、Arial等*/ font-weight: bold;/*文字粗度，常用的就是默認(rèn)值regular和粗體bold*/}/* 簡(jiǎn)寫 */body { font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','/5b8b/4f53',sans-serif;/*取值無順序差異*/}字體大小為12px，行高是字體大小的1.5倍，

tahoma,arial,'Hiragino Sans GB','/5b8b/4f53',sans-serif是瀏覽器在解析網(wǎng)頁字體時(shí)需要在用戶主機(jī)上查找的字體庫，按順序查找，找到為止。

1. line-height和height改變的都是element的高度。設(shè)置line-height，單行相當(dāng)于垂直居中。
2. 用引號(hào)包裹是因?yàn)樽煮w的名字中包含空格等特殊符號(hào)，避免瀏覽器解析時(shí)候把它解析成多個(gè)詞匯，出現(xiàn)亂碼。
3. '/5b8b/4f53'是Unicode碼。Unicode碼（統(tǒng)一碼、萬國碼、單一碼），為每種語言中的每個(gè)字符設(shè)定了統(tǒng)一并且唯一的二進(jìn)制編碼，以滿足跨語言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求。查找方法：在開發(fā)者工具中點(diǎn)開Console控制臺(tái)，輸入escape("字體名") ，回車，獲得字符串。eg：escape("宋體")回車得到"%u5B8B%u4F53" ，然后將字符串中所有“%u”替換為“/”，即可獲得最終Unicode碼。
4. font這個(gè)綜合屬性，簡(jiǎn)寫的時(shí)候必須寫字體大小和字體類型這兩個(gè)屬性值。如果只是font:12px；這樣寫是沒效果的，必須至少寫font:12px arial;才會(huì)有效。

• 文本

text-align：文本對(duì)其方式 left、center、right、justifytext-indent：文案第一行縮進(jìn)距離text-decoration： none、underline、line-through、overlinecolor：文字顏色text-transform：改變文字大小寫none、uppercase、lowercase、capitalizeword-spacing：可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔letter-spacing：字母間隔修改的是字符或字母之間的間隔使用案例：

• line-height
  設(shè)置line-height時(shí)，可使用絕對(duì)值，也可使用相對(duì)值。
  相對(duì)值的使用有兩種方式。都是自身元素字體大小的倍數(shù)。區(qū)別在元素繼承上

1. line-height: 2 /*先繼承父元素設(shè)置的倍數(shù)值，后根據(jù)自身元素字體大小折算實(shí)際大小*/ 2. line-height: 200% /*在父元素里根據(jù)父元素的字體大小折算實(shí)際大小，再繼承*/

• background

1. background-color 設(shè)置元素的背景顏色
2. background-image 把圖像設(shè)置為背景
3. background-repeat 設(shè)置背景圖像是否及如何重復(fù) 取值：no-repeat（背景圖片在規(guī)定位置）、repeat-x（圖片橫向重復(fù)）、
   repeat-y（圖片縱向重復(fù)）、repeat（全部重復(fù)）
   
   
4. background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
5. background-position 設(shè)置背景圖像的起始位置，先水平后垂直
6. background-size 設(shè)置背景的大小
7. 像素值（先水平后垂直，圖像比例根據(jù)設(shè)置會(huì)發(fā)生變化）
8. contain（圖像比例不發(fā)生變化，最長的兩邊剛好放進(jìn)元素窗口，最短的兩邊可能不能鋪滿窗口）
9. cover（圖像比例不發(fā)生變化，最短的兩邊剛好放進(jìn)元素窗口，最長的兩邊可能被窗口遮擋，顯示不全）

.box { background-color: #F00; background-image: url(background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0;}/*簡(jiǎn)寫*/.box2{ background: #f00 url(background.gif) no-repeat fixed 0 0;/*習(xí)慣順序*/}使用常識(shí)

• 顏色

表示方式： 1. 單詞: red, blue, pink, yellow, white, black 2. 十六進(jìn)制: #000000, #fff, #eee, #ccc, #666, #333,#f00, #0f0, #00f 3. rgb: rgb(255, 255, 255), rgb(0, 255, 0) 4. rgba: rgba(0,0,0,0.5)取色方法：
在瀏覽器的檢查元素中操作。在element.style里面分別輸入color和red（熟悉的顏色名），回車，red前出現(xiàn)選框，點(diǎn)擊選框，有下圖


然后點(diǎn)擊彈出圖片頂端的色域，出現(xiàn)小圓圈，這時(shí)可移動(dòng)小圓圈到你要識(shí)別的顏色上，點(diǎn)擊你要識(shí)別的顏色，彈出圖片中間顯示該顏色的十六進(jìn)制數(shù)值，復(fù)制該數(shù)值即可。

• 單位：

px： 固定單位百分比：相對(duì)單位em: 相對(duì)單位，相對(duì)于父元素字體大小rem: 相對(duì)單位，相對(duì)于根元素(html)字體大小vw vh: 相對(duì)單位，1vw 為屏幕寬度的1%