设计网站页面时全局使用 box-sizing: border-box导致自适应图片无法显示

    现在随着移动互联网的快速发展，我们在建设网站时越来越倾向于自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。

    但是，在我们时间建设网站时会遇到如果全局使用box-sizing: border-box；是会导致一些自适应显示的图片无法正常显示，那么如何解决这个问题呢？

全局使用box-sizing样式的CSS如下：

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

其实，解决办法就是在当前div重新定义样式：

笔者以header_bg里面的图片无法显示为例，只需为header_bg 重新定义样式，如下：

.header_bg *{

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

  }

  .header_bg *:before,

  .header_bg *:after {

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

  }

    重新定义样式属性时使用到了box-sizing的默认值为content-box，该属性复没有继承性，可以不把全局引用的box-sizing的值用默认值content-box来覆盖，从而解决设计网站页面时全局使用 box-sizing: border-box导致自适应图片无法显示的问题。