青岛做网站
        行业新闻
行业新闻
当前位置:首页> 新闻动态 > 行业新闻

设计网站页面时全局使用 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导致自适应图片无法显示的问题。

 

 

免责声明:本站所有资讯内容搜集整理于互联网或者网友提供,并不代表本网赞同其观点,仅供学习与交流使用,如果不小心侵犯到你的权益,如果你对文章内容、图片和版权等问题存在异议,请及时联系我们删除该信息,电话:18766290210 QQ:1105881163