寬高自適應

寬自適應

• 若塊級元素寬度不設定，或者設定成100%，都是佔據其父級元素的一整行
  
  適用情況
  
  1. 頁面最外層的盒子一般都要佔據螢幕的大小，所以寬度100%。
  2. 子元素在寬度的設定為百分比，那麼會按父級寬度計算

高自適應

• 父級元素的高度由子元素撐開
  
  1. 若子元素為浮動時，子元素不會撐開父元素的高度
     
     解決方法
     
     • 給父級元素新增樣式 {overflow:hidden}
       原理是為父級元素設定BFC，在BFC下會將浮動元素的高度計算入內
       
     • 偽元素的clearfix
       css .clearfix::after{ content:' '; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; zoom:1; }
  2. 若子元素並沒有內容可以撐開父元素的高度，可以設定min-height
     
     {min-height:300px}=>父級元素
     

瀏覽器

廠家及核心

• ie :trident
• firefox ：gecko
• opera ： presto
• safari、chrome ： webkit
• chrome、opera ： blink