CSS布局之盒子模型屬性有哪些

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

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ù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

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

寬高width/height

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

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

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

auto

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

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

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

【最大最小寬高】

min-width | min-height

　　初始值: 0

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

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

max-width | max-heightt

　　初始值: none

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

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

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

內(nèi)邊距padding

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

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

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

padding

　　初始值: 未定義

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

【50%】

　　塊級元素通過padding:50%可以實(shí)現(xiàn)正方形的效果，因?yàn)樗胶痛怪眕adding的百分比值都是相對于包含塊的寬度決定的，常常用于移動(dòng)端頭圖

外邊距margin

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

margin

　　初始值: 未定義

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

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

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

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

介紹外邊距margin的幾個(gè)重點(diǎn)部分，包括重疊、auto和無效情況

1.重疊

【前提】

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

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

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

【分類】

??margin重疊的情況

1、相鄰的兄弟元素

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

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

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子級</div>
</div>

在網(wǎng)頁布局中，因?yàn)閙argin重疊的原因，我們常常把margin作為一個(gè)“問題樣式”而盡量少地使用它。但實(shí)際上，它是在很大的作用的，

所以，我們要善用重疊，可以在列表項(xiàng)中同時(shí)使用margin-top和margin-bottom。這樣，使頁面結(jié)構(gòu)更具有健壯性，最后一個(gè)元素移除或位置調(diào)換，都不會(huì)破壞原生的布局

2.auto

??只有width/height和margin可以設(shè)置auto。

【為什么margin:auto無法實(shí)現(xiàn)垂直居中】

??水平方向可以居中是因?yàn)閴K級元素的寬度默認(rèn)是撐滿父級元素的，如果給寬度設(shè)置一個(gè)固定值，而左右margin設(shè)置為auto，則可以平分剩余空間

??垂直方向不可以居中是因?yàn)閴K級元素的高度默認(rèn)是內(nèi)容高度，與父級元素的高度并沒有直接的關(guān)系，而上下margin設(shè)置為auto，則被重置為0

margin: 0 auto;

【為什么圖片使用margin:auto不能水平居中】

??圖片無法水平居中，類似于塊級元素?zé)o法垂直居中。因?yàn)閳D片的寬度width默認(rèn)是自身寬度，與父元素的寬度沒有直接關(guān)系。左右margin設(shè)置為auto，會(huì)被重置為0

??所以，圖片要水平居中，需要設(shè)置為display:block元素

3.無效情形

??1、行內(nèi)元素垂直margin無效

??因?yàn)樾袃?nèi)元素垂直布局主要是通過行高line-height和垂直對齊vertical-align來影響的，垂直margin并不會(huì)影響它們，所以不會(huì)影響垂直布局。而在顯示方式，margin區(qū)域不會(huì)顯示元素背景，所以也不會(huì)影響自身元素的顯示，所以行內(nèi)元素垂直margin無效。[注意]不包括inline-block

　　2、某些表格類元素margin無效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可設(shè)置margin。

　　3、BFC造成的margin看似無效

??左側(cè)元素使用浮動(dòng)，右側(cè)元素使用overflow-hidden實(shí)現(xiàn)兩欄自適應(yīng)的布局時(shí)，右側(cè)元素的margin-left值只有足夠大，才能看到效果。這是因?yàn)閙argin-left是相對于父元素左側(cè)，而不是圖片右側(cè)

以上是“CSS布局之盒子模型屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！