首頁 > 文章 > web前端 > CSS佈局之盒子模型屬性

CSS佈局之盒子模型屬性

php中世界最好的语言原創: 2018-02-28 09:54:362671瀏覽

這次帶給大家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>
p{
    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 class="box">
    <div class="inner">子级</div>
</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中文网其它相关文章！

CSS佈局之盒子模型屬性

相關文章