css實作盒子模型詳細解說

 這篇文章講述了css實現盒子模型，大家對css實現盒子模型不了解的話或對css實現盒子模型感興趣的話那麼我們就一起來看看這篇文章吧， 好了廢話少說進入正題吧

盒子模型是html+css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面佈局。以下是自己累積和總結的關於css盒子模型的知識，希望對初學者有用。

一、css盒子模型概念

#CSS css盒子模型又稱框模型(Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：

圖中最內部的框是元素的實際內容，也就是元素框，緊鄰元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋週邊的其他元素。

那麼，元素框的總寬度= 元素（element）的width + padding的左邊距和右邊距的值+ margin的左邊距和右邊距的值+ border的左右寬度；

元素框的總高度= 元素（element）的height + padding的上下邊距的值+ margin的上下邊距的值＋ border的上下寬度。

二、css 外邊距合併（疊圖）

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合併，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，如圖：

比較容易理解，所以在頁面中有時候遇到實際情況是需要考慮這個因素的。當然外邊距合併其實也有存在的意義，如下圖：

#

要注意的是：只有在普通文件流程中區塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

css reset 中也會常用到

* {
  margin : 0;
  padding : 0;
}

三、box-sizing屬性介紹

box-sizing屬性是使用者介面屬性裡的一種，之所以介紹它，是因為這個屬性跟盒子模型有關，而且在css reset中有可能會用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box# ,預設值，可以使設定的寬度和高度值套用到元素的內容框。盒子的width只包含內容。

　　即總寬度=margin+border+padding+width

(2) border-box , 設定的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容

　　　　即總寬度=margin+width

#很多CSS框架，都會對盒子模型的運算方法進行簡化。

(3) inherit , 規定應從父元素繼承box-sizing 屬性的值

關於border-box的使用：

1 一個box寬度為100%，又想要兩邊有內間距，這時候用就比較好
2 全域設定border-box 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有一個關鍵作用——讓有邊框的盒子正常使用百分比寬度。

四、實際開發中遇到的和框模型相關的應用及小問題。

1 margin越界（第一個子元素的margin-top和最後一個子元素的margin-bottom的越界問題）

#

以第一个子元素的margin-top 为例：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

（1）给父元素加边框border （副作用）

（2）给父元素设置padding值  （副作用）

（3）父元素添加 overflow：hidden （副作用）

（4）父元素加前置内容生成。（推荐）

以第四种方法为例：

.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}.parent : before {
     content : " ";
     display : table;
}.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}

<p class="parent">
<p class="child"></p> </p>

2 浏览器间的盒子模型。

（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

（2）标准盒子模型与IE模型之间的差异：

　　标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。

3 用盒子模型画三角形

nbsp;html>
  
    <style>
        .triangle {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
        }
    </style>
  
  
    <p></p>
  

页面显示结果为：

以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！

相关推荐：

HTML与CSS的盒子模型

CSS布局之盒子模型属性

以上是css實作盒子模型詳細解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！