前端-7-display、box-sizing、渐进增强和优雅降级

盒的display类型

1. block 块级元素

2. inline 行内元素

3. inline-block 行内块元素：在父容器内写，可以使子元素div在一行

   与float:left区别：
   1. inline-block没有脱离文档流，不会高度塌陷
   2. inline-block子元素之间有空格，换行引起的。去空格：父元素添加font-size:0px；删除子元素间的空格）
   3. inline-block 当子元素内部均有内容时，顶部对齐； inline-block 当子元素内部均没内容时，底部对齐；当子元素内容有无不统一，会留出内容那一行，因为隔离区

4. istitems 列表项，也可以把行内元素变为块级元素

5. table-cell

   让块级元素放在一行方法：
   1. float:left;
   2. display:inline-block
   3. display:table-cell
   垂直居中：vertical-align:middle

box-sizing

默认情况下，加个背景图片时，border和padding也是该图片

1. box-sizing:content-box（和默认一样）
   width == content
2. box-sizing:border-box
   width == content+padding+border

浏览器适配的渐进增强和优雅降级

1. 优雅降级
   一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。

   .transition{ 
   　　     transition: all .5s;
   　　  -o-transition: all .5s;
     　-moz-transition: all .5s;
    -webkit-transition: all .5s;
   }
   

2. 渐进增强
   针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

   .transition{
     -webkit-transition: all .5s;
        -moz-transition: all .5s;
          -o-transition: all .5s;
             transition: all .5s;  
   }