1、width:
auto 預設值。瀏覽器可計算出實際的寬度。
length 使用 px、cm 等單位定義寬度。
% 定義基於包含塊（父元素）寬度的百分比寬度。
inherit 規定應該從父元素繼承 width 屬性的值。
2、padding
length： 規定以具體單位計的填充值，比如畫素、厘公尺等。預設值是 0px
% ： 規定基於父元素的寬度的百分比的填充
inherit： 指定應該從父元素繼承padding
為什麼使用父元素的寬度作為邊距參考值？
css權威指南中的解釋：
我們認為，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），如果乙個元素的上下外邊距是父元素的height的百分數，就可能導致乙個無限迴圈：
父元素的height增加，來適應後代元素上下外邊距的增加；而相應的，上下外邊距因為父元素height的增加也會增加，如此迴圈。
3、vw vh
vw viewpoint width，視窗寬度，1vw=視窗寬度的1%
vh viewpoint height，視窗高度，1vh=視窗高度的1%
那什麼是視窗寬度？
在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：layout viewport（布局視口），visual viewport（視覺視口），ideal viewport（理想視口）。
視口單位中的「視口」，桌面端指的是瀏覽器的可視區域；移動端指的就是viewport中的layout viewport。
根據css3規範，視口單位主要包括以下4個：
vh and vw：相對於視口的高度和寬度，而不是父元素的（css百分比是相對於包含它的最近的父元素的高度和寬度）。1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度。
比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin。
當需要製作乙個「長寬成比例、且隨著螢幕寬度動態變化」的元素時，由於無法設定具體寬高，只能使用設定比例的方式。如九宮格布局：
1、常規思路：
橫向大div
寬度為螢幕寬度，內含3個正方形，使用flex布局：
.line正方形設定
由於需要留邊距，這裡設定單個正方形寬度為外部div寬度的30%；
高度與寬度相同。結合上面的padding屬性，可以想到使用padding-top或者padding-bottom屬性，即其高度等於寬度，也就是外部div寬度的30%：
.square設定好寬度和左右外邊距使得寬度總和接近100%。
.square使用百分比為單位時，是以body寬度為父元素寬度；vw則以視窗寬度為參考，此時視窗寬度包括了整個頁面寬度及滾動條等元素，則正方形的寬度應該設定稍小一些；且隨著視窗縮小，body佔百分比越小，到後面會出現正方形換行的情況。
2）改變div屬性
單個正方形設定display：inline-block，也可實現併排效果。
這裡需要注意的是，使用該設定後，每個正方形之間的空格也會佔1個位置。
解決方法：設定font-size：0
3、自適應九宮格中加內容
由於不能破壞九宮格正方形布局，那麼內容應該是不能干涉九宮格文字流空間的。
可以在正方形內加容器，設定position:absolute;再設定定位居中。
參考資料：
CSS Margin（外邊距） 寬高屬性
外邊距實現盒子居中 必須是塊級元素 盒子必須指定寬度 width 給左右外邊距都設定為auto就可使塊級元素水平居中。如.header 文字盒子居中和背景區別 1.文字水平居中是text align center 2.盒子水平居中 左右margin改為auto 如text align center ...
JS Jquery常用寬高及應用
關於js的寬高，隨便一搜就是一大堆。這個一大堆對我來說可不是什麼好事，看的頭都大了。所以今天就總結了一些比較會常用的，並說明一下應用場景。先來扯一下documentelement和body的微妙關係 documentelement html documentelement.childnode 2 b...
jq獲取元素的所有寬高（包括內邊距和外邊距）
width 返回元素的寬度。height 返回元素的高度。innerwidth 方法返回元素的寬度 包括內邊距 innerheight 方法返回元素的高度 包括內邊距 outerwidth 方法返回元素的寬度 包括內邊距和邊框 outerheight 方法返回元素的高度 包括內邊距和邊框 outer...