這篇“CSS布局之盒子模型屬性有哪些”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS布局之盒子模型屬性有哪些”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了沁縣免費建站歡迎大家使用！

css是什么意思

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

這次給大家?guī)鞢SS布局之盒子模型屬性，CSS布局的盒子模型屬性的注意事項有哪些

寬高width/height

在CSS中，可以對任何塊級元素設(shè)置顯式高度。

如果指定高度大于顯示內(nèi)容所需高度，多余的高度會產(chǎn)生一個視覺效果，就好像有額外的內(nèi)邊距一樣；

如果指定高度小于顯示內(nèi)容所需高度，取決于overflow屬性，需要滾動條需要設(shè)置為overflow:auto。

auto

寬高和margin可以設(shè)置auto。對于塊級元素來說，寬度設(shè)置為auto，則會盡可能的寬。詳細(xì)來說，元素寬度=包含塊寬度—元素水平外邊距-元素水平邊距寬度-元素水平內(nèi)邊距；

高度設(shè)置為auto，則會盡可能的窄。詳細(xì)來說，元素高度=恰好足以包含其內(nèi)聯(lián)內(nèi)容的高度

[注意]如果沒有顯式聲明包含塊的height，則元素的百分?jǐn)?shù)高度會重置為auto

【最大最小寬高】

min-width | min-height

初始值: 0

應(yīng)用于: 塊級元素和替換元素

百分?jǐn)?shù): 相對于包含塊的寬度(高度)

max-width | max-heightt

初始值: none

應(yīng)用于: 塊級元素和替換元素

百分?jǐn)?shù): 相對于包含塊的寬度(高度)

[注意]當(dāng)最小寬度(高度)大于最大寬度(高度)時，以最小寬高的值為準(zhǔn)

內(nèi)邊距padding

相比于盒模型的其他屬性(如在定位中經(jīng)常使用負(fù)值的margin)，padding顯得中規(guī)中矩了很多，沒有什么兼容性，也沒有一些特殊的問題

對于行內(nèi)元素，左內(nèi)邊距應(yīng)用到元素的開始處，右內(nèi)邊距應(yīng)用到元素的結(jié)尾處，垂直內(nèi)邊距不影響行高，但會影響自身尺寸，加背景顏色可以看出

[注意]內(nèi)邊距不能是負(fù)值

padding

初始值: 未定義

百分?jǐn)?shù): 相對于包含塊的width

【50%】

塊級元素通過padding:50%可以實現(xiàn)正方形的效果，因為水平和垂直padding的百分比值都是相對于包含塊的寬度決定的，常常用于移動端頭圖

外邊距margin

設(shè)置外邊距margin會在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域，而且在這個區(qū)域中可以看到父元素的背景

margin

初始值: 未定義

應(yīng)用于: 所有元素

百分?jǐn)?shù): 相對于包含塊的width

[注意]對于普通元素來說，包含塊就是塊級父級元素，對于定位元素來說，包含塊是定位父級。所以，普通元素的margin百分比相對于塊級父級元素的width，定位元素的margin百分比相對于定位父級的width

margin可以設(shè)置為負(fù)值，margin和寬高支持auto，以及margin具有非常奇怪的重疊特性。

介紹外邊距margin的幾個重點部分，包括重疊、auto和無效情況

1.重疊

【前提】

??margin重疊又叫margin合并，發(fā)生這種情況有兩個前提

??1、只發(fā)生在block元素上(不包括float、absolute、inline-block元素)

??2、只發(fā)生在垂直方向上(不考慮writing-mode)

【分類】

??margin重疊的情況

1、相鄰的兄弟元素

兄弟一
兄弟二

2、父級元素和第一個或最后一個子元素，父子級的margin重疊又叫margin傳遞

    子級