用css3的calc()函数做自适应

在一次面试的测试中,我用js的方式设置的一个div的宽度=比clientWidth少20px。然后考官问我有没有css方法能实现同样的效果。我的确不知道,很尴尬。
网上搜索了一圈答案后,发现css3里提供了calc()方法可以让浏览器自行计算元素的宽度,感觉非常棒,用法如下:

  .item-container{
    width:calc(100% - 20px);
  }

当你放大缩小浏览器的时候,item-container对应的width也会相应改变,不像之前用js取得的clientWidth后就固定死大小了。非常适合多终端的显示。

这篇博客讲解比较全面,推荐给大家:
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 摘自http://www.w3cplus.com/css3/how-to-use-css3-calc-functi...
    Lareina林暖暖阅读 783评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,613评论 1 19
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运...
    ddai_Q阅读 423评论 0 1
  • 入夜之前,神谷在三森的吩咐下在樱坂府内结下咒印,为了以防万一,又用稻荷扎了一个草人,换上雫小姐的衣服,立在闺房内。...
    Azure_潮生阅读 260评论 0 1