css盒模型指的是什么

本文將為大家詳細(xì)介紹“css盒模型指的是什么”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點(diǎn)，希望這篇“css盒模型指的是什么”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

盒模型

1.定義

1.任意一個元素都可以當(dāng)作盒模型
2.盒子的大小由內(nèi)容寬高(width/height)+邊距(padding)+邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文檔中所有功能性及內(nèi)容性標(biāo)簽,及文檔中所有顯示性標(biāo)簽.
狹義盒模型:文檔中以塊級形式存在的標(biāo)簽(塊級標(biāo)簽擁有盒模型100%特性且最常用)

2.盒模型成員介紹

content

• 通過設(shè)置width與height來規(guī)定content

• 塊級標(biāo)簽可以設(shè)置自身寬高,默認(rèn)寬為父級寬(width=auto),高為自動(由內(nèi)容撐開)

• 內(nèi)聯(lián)標(biāo)簽不可以設(shè)置自身寬高,默認(rèn)均為自動(由內(nèi)容撐開)

border

• border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風(fēng)格)三部分組成

• border成員:border-left、border-right、border-top、border-bottom

• border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width

• border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color

• border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style

margin

• margin成員：margin-left、margin-right、margin-top、margin-bottom

• margin整體設(shè)置

• 總結(jié):1.規(guī)定起始位置 2.順時針 3.不是找對面

3.邊界圓角

border-radius

• border-radius成員

• 單方位設(shè)置

賦值個數(shù)(值類型:長度或百分比):1  解釋為:橫縱
賦值個數(shù)(值類型:長度或百分比):2  解釋為:橫|縱

• 分向整體設(shè)置

格式:1/1  解釋為:橫向|縱向

4.其他相關(guān)屬性

• max|min-width|height

• overflow

• display

5.盒模型布局

盒模型布局基本介紹

• 布局方位：margin-left、margin-right、margin-top、margin-bottom

• 影響自身布局：margin-left、margin-top

• 影響兄弟布局：margin-right、margin-bottom

• 正向 / 反向：正值 / 負(fù)值

margin布局坑

• 很多語義標(biāo)簽具有默認(rèn)margin

• 父子標(biāo)簽margin-top重疊取大者

• 兄弟標(biāo)簽margin-bottom、margin-top重疊取大者

如果你能讀到這里，小編希望你對“css盒模型指的是什么”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會，具體使用情況還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！