盒子的寬度 = margin-left + border-left + padding-left +
width + padding-right + border-right + margin-right
width和height是框內容顯示的區域——包括框內的文字內容，以及表示巢狀子元素的其他框
也可以使用min-width、max-width、min-height、max-height來設定最低/最高限度的width和height
預設情況下，width和height只包括內容區域的寬和高，不包括border、padding、margin。
使用box-sizing可以使其包含content、padding、border
內聯元素不能設定width和height
box-sizing的值:
/* 預設值，標準盒子模型，只含內容區 */
box-sizing
: content-box;
/* width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距 */
box-sizing
: border-box;
/* -webkit代表safari、chrome私有屬性 */
-webkit-box-sizing
: border-box;
/* -moz代表firefox瀏覽器私有屬性 */
-moz-box-sizing
: border-box;
/*可以單獨設定四個方向，padding-top，padding-left，padding-right，padding-bottom*/
padding
: 10px 20px 30px 40px;
/* 對應: 上 右 下 左 */
padding
: 10px 20px 30px;
/* 對應: 上 左右 下 */
padding
: 10px 20px;
/* 對應 上下 左右 */
padding
: 10px;
/* 對應上下左右 */
屬性說明值備註
border
邊框簡寫
[border-width border-style border-color /inherit]
三角形和梯形可以使用border+transparent來做
border-style
邊框樣式
none、hidden、dotted、dashed、solid、double、(groove、ridge、inset、outset、)inherit
樣式預覽
border-width
邊框寬度
不支援百分比、預設為medium(3px)
border-color
邊框顏色
透明:transparent
預設顏色同color
border-radius
邊界圓角
內聯元素可以設定邊框，但是垂直的邊框不會影響到頁面的布局
內聯元素支援水平方向的外邊距，不支援垂直外邊距，水平方向的相鄰外邊距不會重疊，而是求和
塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為乙個外邊距，其大小取其中的最大者
相鄰兄弟元素margin合併
父級和第乙個/最後乙個子元素
空塊級元素的margin合併
框的高度不能使用百分比長度
border不能使用百分比長度
如果內容區過大，將會溢位，此時可使用overflow
overflow的值:
/* 預設值。內容不會被修剪，會呈現在元素框之外 */
overflow
: visible;
/* 內容會被修剪，並且其餘內容不可見 */
overflow
: hidden;
/* 內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容 */
overflow
: scroll;
/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 */
overflow
: auto;
說明block
塊框（ block box）是定義為堆放在其他框上的框（例如：其內容會獨佔一行），而且可以設定它的寬高，之前所有對於框模型的應用適用於塊框 （ block box）
inline
行內框（ inline box）與塊框是相反的，它隨著文件的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨著文字部分的流動而打亂），對行內盒設定寬高無效，設定padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。
inline-block
行內塊狀框（inline-block box） 像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨著周圍文字而流動，而且他能夠設定寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。
table
像處理table布局那樣處理非table元素，而不是濫用html的;標籤來達到同樣的目的。
flex
處理一些困擾css已久的一些傳統布局問題，例如布置一系列彈性等寬容器或者垂直居中內容。
grid
給出一種簡單實現css網格系統的方式，而在傳統上它依賴於一些棘手難以處理的css網格框架
none
隱藏元素，不會在頁面中顯示，並且不再佔據頁面的位置
CSS自學5 盒模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 中的任意一屬性...
前端基礎第5天（盒子模型）
盒子模型 margin 外邊距 border 邊框 padding 內邊距 邊框 border border top style solid 實線 dotted 點線 dashed 虛線 border top color 邊框顏色 border top width 邊框粗細 演示 box 效果圖 邊...
5天學python python 學習第5天
字典增刪改查 dic1 dic1 asdas dfdsf 新增 預設最後乙個 print dic1 dic1 age 20 如果有建 則值覆蓋 print dic1 dic1.setdefault weight 有建值對 不做任何改變 沒有新增建值對 dic1.setdefault weight 1...