這次給大家帶來CSS布局之盒子模型屬性，CSS布局的盒子模型屬性的注意事項有哪些，下面就是實戰案例，一起來看一下。

寬高width/height

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

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

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

auto

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

高度設置為auto，則會盡可能的窄。詳細來說，元素高度=恰好足以包含其內聯內容的高度

[注意]如果沒有顯式聲明包含塊的height，則元素的百分數高度會重置為auto

【最大最小寬高】

min-width | min-height

初始值: 0

應用于: 塊級元素和替換元素

百分數: 相對于包含塊的寬度(高度)

max-width | max-heightt

初始值: none

應用于: 塊級元素和替換元素

百分數: 相對于包含塊的寬度(高度)

[注意]當最小寬度(高度)大于最大寬度(高度)時，以最小寬高的值為準

內邊距padding

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

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

[注意]內邊距不能是負值

padding

初始值: 未定義

百分數: 相對于包含塊的width

【50%】

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

外邊距margin

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

margin

初始值: 未定義

應用于: 所有元素

百分數: 相對于包含塊的width

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

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

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

1.重疊

【前提】

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

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

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

【分類】

??margin重疊的情況

1、相鄰的兄弟元素

 style  line-height: 2em; margin: 2px 0;background-color: lightblue; display:inline-block; width: 100%;} /style  p 兄弟一 /p  p 兄弟二 /p 

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

 style .box{ background-color: pink; height:30px;}.inner{ margin-top: 1em; background-color: lightblue;} /style  div >
 在網頁布局中，因為margin重疊的原因，我們常常把margin作為一個“問題樣式”而盡量少地使用它。但實際上，它是在很大的作用的，
所以，我們要善用重疊，可以在列表項中同時使用margin-top和margin-bottom。這樣，使頁面結構更具有健壯性，最后一個元素移除或位置調換，都不會破壞原生的布局
2.auto
??只有width/height和margin可以設置auto。
【為什么margin:auto無法實現垂直居中】
??水平方向可以居中是因為塊級元素的寬度默認是撐滿父級元素的，如果給寬度設置一個固定值，而左右margin設置為auto，則可以平分剩余空間
??垂直方向不可以居中是因為塊級元素的高度默認是內容高度，與父級元素的高度并沒有直接的關系，而上下margin設置為auto，則被重置為0
margin: 0 auto;
【為什么圖片使用margin:auto不能水平居中】
??圖片無法水平居中，類似于塊級元素無法垂直居中。因為圖片的寬度width默認是自身寬度，與父元素的寬度沒有直接關系。左右margin設置為auto，會被重置為0
??所以，圖片要水平居中，需要設置為display:block元素
3.無效情形
??1、行內元素垂直margin無效
??因為行內元素垂直布局主要是通過行高line-height和垂直對齊vertical-align來影響的，垂直margin并不會影響它們，所以不會影響垂直布局。而在顯示方式，margin區域不會顯示元素背景，所以也不會影響自身元素的顯示，所以行內元素垂直margin無效。[注意]不包括inline-block
 2、某些表格類元素margin無效
 thead `` tbody `` tfoot `` tr `` col `` colgroup `` td `` th 不可設置margin。
 3、BFC造成的margin看似無效
??左側元素使用浮動，右側元素使用overflow-hidden實現兩欄自適應的布局時，右側元素的margin-left值只有足夠大，才能看到效果。這是因為margin-left是相對于父元素左側，而不是圖片右側
相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！
相關閱讀：
如何解決layer.photos()異步修改圖片地址后顯示異常的問題
怎樣監聽angularJs列表數據是否渲染完畢
ES6的“類”與html' target='_blank'>面向對象的關系
ES6箭頭函數中的this應該如何使用
以上就是CSS布局之盒子模型屬性的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。