CSS布局之盒子模型屬性

1、css布局之盒子模型屬性在css中，可以對(duì)任何塊級(jí)元素設(shè)置顯式高度。假如指定高度大于顯示內(nèi)容所需高度，多余的高度會(huì)產(chǎn)生一個(gè)視覺(jué)效果，就好似有額外的內(nèi)邊距一樣；假如指定高度小于顯示內(nèi)容所需高度，取決于overflow屬性，需要滾動(dòng)條需要設(shè)置為overflow:auto。auto寬高和margin可以設(shè)置auto。對(duì)于塊級(jí)元素來(lái)說(shuō)，寬度設(shè)置為auto，則會(huì)盡可能的寬。具體來(lái)說(shuō)，元素寬度=包含塊寬度—元素水平外邊距-元素水平邊距寬度-元素水平內(nèi)邊距；高度設(shè)置為auto，則會(huì)盡可能的窄。具體來(lái)說(shuō)，元素高度=恰好足以包含其內(nèi)聯(lián)內(nèi)容的高度注重假如沒(méi)有顯式聲明包含塊的height，則元素

2、的百分?jǐn)?shù)高度會(huì)重置為auto【最大最小寬高】min-width|min-height初始值:0應(yīng)用于:塊級(jí)元素和替換元素百分?jǐn)?shù):相對(duì)于包含塊的寬度(高度)max-width|max-heightt初始值:none應(yīng)用于:塊級(jí)元素和替換元素百分?jǐn)?shù):相對(duì)于包含塊的寬度(高度)注重當(dāng)最小寬度(高度)大于最大寬度(高度)時(shí)，以最小寬高的值為準(zhǔn)內(nèi)邊距padding相比于盒模型的其他屬性(如在定位中常常用法負(fù)值的margin)，padding顯得中規(guī)中矩了無(wú)數(shù)，沒(méi)有什么兼容性，也沒(méi)有一些特別的問(wèn)題對(duì)于行內(nèi)元素，左內(nèi)邊距應(yīng)用到元素的開(kāi)頭處，右內(nèi)邊距應(yīng)用到元素的結(jié)尾處，垂直內(nèi)邊距不影響行高，但會(huì)影響自身尺寸，

3、加背景色彩可以看出注重內(nèi)邊距不能是負(fù)值padding初始值:未定義百分?jǐn)?shù):相對(duì)于包含塊的width【50%】塊級(jí)元素通過(guò)padding:50%可以實(shí)現(xiàn)正方形的效果，由于水平和垂直padding的百分比值都是相對(duì)于包含塊的寬度打算的，經(jīng)常用于移動(dòng)端頭圖外邊距margin設(shè)置外邊距margin會(huì)在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域，而且在這個(gè)區(qū)域中可以看到父元素的背景margin初始值:未定義應(yīng)用于:全部元素百分?jǐn)?shù):相對(duì)于包含塊的width注重對(duì)于一般元素來(lái)說(shuō)，包含塊就是塊級(jí)父級(jí)元素，對(duì)于定位元素來(lái)說(shuō)，包含塊是定位父級(jí)。所以，一般元素的margin百分比相對(duì)于塊級(jí)父級(jí)元素的wid

4、th，定位元素的margin百分比相對(duì)于定位父級(jí)的widthmargin可以設(shè)置為負(fù)值，margin和寬高支持auto，以及margin具有十分驚奇的重疊特性。介紹外邊距margin的幾個(gè)重點(diǎn)部分，包括重疊、auto和無(wú)效狀況1.重疊【前提】  margin重疊又叫margin合并，發(fā)生這種狀況有兩個(gè)前提  1、只發(fā)生在block元素上(不包括float、absolute、inline-block元素)  2、只發(fā)生在垂直方向上(不考慮writing-mode)【分類(lèi)】&emsp

5、; margin重疊的狀況1、相鄰的兄弟元素pline-height:2em;margin:2px0;background-color:lightblue;display:inline-block;width:100%;兄弟一兄弟二2、父級(jí)元素和第一個(gè)或最后一個(gè)子元素，父子級(jí)的margin重疊又叫margin傳遞.boxbackground-color:pink;height:30px;.innermargin-top:1em;background-color:lightblue;子級(jí)在網(wǎng)頁(yè)布局中，由于margin重疊的緣由，我們經(jīng)常把margin作為一個(gè)問(wèn)題樣式而盡量少地用

6、法它。但事實(shí)上，它是在很大的作用的，所以，我們要善用重疊，可以在列表項(xiàng)中同時(shí)用法margin-top和margin-bottom。這樣，使頁(yè)面結(jié)構(gòu)更具有茁壯性，最后一個(gè)元素移除或位置調(diào)換，都不會(huì)破壞原生的布局2.auto  惟獨(dú)width/height和margin可以設(shè)置auto。【為什么margin:auto無(wú)法實(shí)現(xiàn)垂直居中】  水平方向可以居中是由于塊級(jí)元素的寬度默認(rèn)是撐滿(mǎn)父級(jí)元素的，假如給寬度設(shè)置一個(gè)固定值，而左右margin設(shè)置為auto，則可以平分剩余空間  垂直方向不行以居

7、中是由于塊級(jí)元素的高度默認(rèn)是內(nèi)容高度，與父級(jí)元素的高度并沒(méi)有挺直的關(guān)系，而上下margin設(shè)置為auto，則被重置為0margin:0auto;【為什么用法margin:auto不能水平居中】  無(wú)法水平居中，類(lèi)似于塊級(jí)元素?zé)o法垂直居中。由于的寬度width默認(rèn)是自身寬度，與父元素的寬度沒(méi)有挺直關(guān)系。左右margin設(shè)置為auto，會(huì)被重置為0  所以，要水平居中，需要設(shè)置為display:block元素3.無(wú)效情形  1、行內(nèi)元素垂直margin無(wú)效  由于行內(nèi)元素垂直布局主要是通過(guò)行高line-height和垂直對(duì)齊vertical-align來(lái)影響的，垂直margin并不會(huì)影響它們，所以不會(huì)影響垂直布局。而在顯示方式，margin區(qū)域不會(huì)顯示元素背景，所以也不會(huì)影響自身元素的顯示，所以行內(nèi)元素垂直margin無(wú)效。注重不包括inline-block2、某些表格類(lèi)元素margin無(wú)效不行設(shè)置margin。3、bfc造成的margin看似無(wú)效