青岛做网站
新闻动态

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

2020-06-03来源:青岛做网站

    现在随着移动互联网的快速发展,我们在建设网站时越来越倾向于自适应的布局方式,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导致自适应图片无法显示的问题。