css盒模型指的是什么

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

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

盒模型

1.定義

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

2.盒模型成員介紹

content

• 通過設置width與height來規定content

• 塊級標簽可以設置自身寬高,默認寬為父級寬(width=auto),高為自動(由內容撐開)

• 內聯標簽不可以設置自身寬高,默認均為自動(由內容撐開)

border

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

• 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整體設置

• 總結:1.規定起始位置 2.順時針 3.不是找對面

3.邊界圓角

border-radius

• border-radius成員

• 單方位設置

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

• 分向整體設置

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

4.其他相關屬性

• max|min-width|height

• overflow

• display

5.盒模型布局

盒模型布局基本介紹

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

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

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

• 正向 / 反向：正值 / 負值

margin布局坑

• 很多語義標簽具有默認margin

• 父子標簽margin-top重疊取大者

• 兄弟標簽margin-bottom、margin-top重疊取大者

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