Css宽高自适应&&浏览器的相关内容

宽高自适应

宽自适应

• 若块级元素宽度不设置，或者设置成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