標準盒子模型
塊級元素、行內元素比較
塊級元素：
a. 默認橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素
b. 浮動元素是塊級元素，可以設置寬高,但是其旁邊可以有其他元素
行內元素：
a. 設置width和height無效,豎直方向的margin、padding無效
b. display：inline-block 可以讓元素具有塊級元素和行內元素的特性，既可以設置長寬，讓padding和margin生效，又可以和其他行內元素並排
c. 替換元素：<img> <input> 具有內在尺寸,可以設置width和height(不指定時，按照圖片被保存的時候的寬度和高度顯示)
margin 塌陷
1、垂直並列(少見)：未絕對定位(固定定位)的2個元素,垂直之間塌陷的原則是以兩盒子最大的外邊距爲準
2、嵌套關係(常見)：
子元素設置margin-top：** px時， 父子盒子間並沒出現期望的** px間隙而是父子盒子一起與外部頂端產生了XXpx間隙
解決辦法：
1、父元素設置 padding 值,寬高可以 box-sizing: border-box 控制
2、父盒子添加overflow：hidden；
幽靈空白點
可以參考：css 深入理解 vertical-align line-height 屬性
內聯元素各種想得通或者想不通的行爲表現，基本上都可以用vertical-align和line-height來解釋，以及進行行爲矯正；
矯正方式：設置父元素的font-size: 0;
Position屬性
static(靜態定位): 默認值。沒有定位，元素出現在正常的流中（忽略TRBL、 z-index的 聲明）
relative(相對定位)：元素脫離正常的文本流中，但其在文本流中的位置依然存在
1、無論父級是否存在，無論有沒有TRBL，均以父級的左上角進行定位，但是父級的Padding屬性會對其影響。
2、一般使用relative來改變位置比較少，主要是用來設置子級的absolute定位的參考對象
absolute(絕對定位)：元素脫離正常文本流,其在正常流中的位置不再存在,相對於 static 定位以外的第一個父元素進行定位。
若想把一個定位屬性爲absolute的元素定位於其父級元素內，只有滿足兩個條件：
第一：設定TRBL 第二：父級設定Position屬性(一點不滿足，元素就會以瀏覽器左上角爲原點)
fixed(固定定位)：元素脫離正常文本流,不佔據空間，相對於瀏覽器窗口定位,即使窗口是滾動的它也不會滾動，且它會和其他元素髮生重疊
備註：
1、如果用position來佈局頁面，父級元素的position屬性必須爲relative，而定位於父級內部某個位置的元素，最好用 absolute，因爲它不受父級元素的padding的屬性影響。
2、子元素的position爲fixed或者是absolute，那麼它就會脫離文檔流，這樣的後果是父元素無法被撐開
僞類元素：參考 https://blog.csdn.net/u013594477/article/details/80393667
font-size 字體相關
1、字體用像素表示：rem自適應會導致從客戶端 --> H5頁面，字體大小變化突兀；iphone4小屏手機，一行文字放不下，用媒體查詢處理
2、字體實際高度：字體大小(UI設計稿標註大小)* 三分之二
iphone X、iphone Xs、iphone Xs Max、iphone Xr 適配
iphone X、iphone Xs：
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
iphone Xs Max：
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { }
iphone Xr：
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { }
備註：
- 放大模式下,XR、XS MAX的分辨率和X相同
- viewport-fit=cover 影響：網頁採用自己的title頭時,沒有劉海頭的iphone機型,整體頁面會往上移20px,被手機導航欄遮住一部分
