今天偶遇一個css方面的問題，因為以前也為該問題苦惱過，今天得到了解決方案，而且答案很簡單，就是給css加上一個屬性就搞定了，由於該屬性平時很少用，為了方便以後檢視，特此記錄。

要實現的效果圖

我們想實現如下效果：

一般做法

那麼我們如何通過使用html+css來實現這個效果呢？按照一般的思維，我們會設計出如下的程式碼

html程式碼：

<div class="container">
    <div class="content">
    </div>
    <div class="tab">
    </div
 
>
    <div class="tab">
    </div>
</div>

css程式碼：

.container {
  margin: 0;
  background-color: yellow;
  height: 200px;
  width: 400px;
}
.content {
  width: 85%;
  height: 100%;
  float: right;
  border: 1px solid red;
}
.tab {
  width: 15%;
  height: 30%;
  float: left;
  border: 1px solid green
 
;
}

此時我們會發現，如果不新增border，左右兩邊的div可以正常並排，一旦加了border，靠左的兩個div會被擠出container之外，並且iframe的高度還會超出container。
如圖：

問題解決方法

其實，對css的樣式很精通的人，這個應該不算是問題，因為css有一個屬性，box-sizing可以很方便的解決這個問題，將該屬性值設定為border-box，該值的相關描述如下：

為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

html程式碼不變
css程式碼如下

.container {
  margin: 0;
  background-color: yellow;
  height: 200px;
  width: 400px;
}
.content {
  width: 85%;
  height: 100%;
  float: right;
  border: 1px solid red;
  box-sizing: border-box;
}
.tab {
  width: 15%;
  height: 30%;
  float: left;
  border: 1px solid green;
  box-sizing: border-box;
}