CSS：盒模型
2019獨角獸企業重金招聘Python工程師標準>>>
在CSS中有兩種盒模型:
(1)W3C標準盒模型：包括content(內容)，padding(內邊距：內容與邊框的距離)，border(邊框)；margin(與其他元素的距離)，在此模型中，width/height(寬度和高度就是內容的寬和高)；
（2）IE下怪異模型：當html沒有寫<!doctype html>時，在IE6下就會開啟怪異模式，此時的寬度和高度（width/height）=content+padding+border;
eg:
應用：
- 在父子盒子中，給子元素加padding想要移動子元素的位置，而不改變父元素的大小，可以將標準模型轉化為怪異模型（box-sizing:border-box;）;
- eg:
- 結果：
-
box-sizing:border-box的應用:原生普通文本框<input >和文本域<textarea>的100%自適應父容器的寬度；width/border 和 padding 注定要共存，同時還要整體寬度 100%自適應容器。<input >，<textarea>都有border,而且需要padding的大小，否則輸入的光標會頂著邊框。
解決: textarea{
width:100%;
-ms-box-sizing:border-box
box-sizing:border-box;
}
-
eg:
-
結果
-
box-sizing:改變width/height的作用細節；
內在盒子：content-box,padding-box,border-box,margin-box;默認情況下width是作用在content-box上的，box-sizing的作用是把width作用的盒子變成其他幾個；
{
box-sizing:content-box;//默認值
box-sizing:padding-box;//
box-sizing:border-box;//支持，此時，border和padding/content平分width
box-sizing:margin-box;//不支持
注意事項：絕對定位的元素，使用百分比設置其寬和高時，它參考的是其第一個定位非static祖先節點的padding-box;即width:padding+content
?
轉載于:https://my.oschina.net/u/4045971/blog/3017010
總結
