css兼容所有浏览器的宽度计算方法，非calc

468122151 发布于2019-08-29 13:11 / 3385人阅读

摘要：优点兼容所有浏览器容易理解，效率高注意盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的左侧也可考虑使用绝对定位，或者使用等，大家可以试验一下。。

作为一个前端，所见的最多的就是左右布局的情况，无论框架还是各种写法中都有左右布局，然而有些情况下非常让人头疼，那就是一侧固定宽度，另一侧根据屏幕或者外层宽度自动适应，例如表单：

如图所示：左右布局，但是左侧按照百分比排版的，在屏幕小的情况下非常拥挤，在屏幕宽的时候非常宽松，不能够做到左边固定宽度（因为左侧是固定的几个文字），右侧自动适应。类似问题还有N多，比如后台界面左右布局形式，tab选项卡左右布局形式等等。

一、使用JavaScript来计算的弊端

麻烦，写一大堆，然后不一定对。

效率低，改变屏幕或者改变外层div宽度，效率极低。

样式和JavaScript不分开，非常不规整。

二、使用css3的calc计算的弊端

弊端：一言以蔽之，兼容性不好
优点：简单易用，效率高，能解决兼容性是最好不过了，能不能使用css2.0来写出这个效果呢，答案是能！

三、使用定位法实现calc

具体的布局如上，父元素定位，左侧固定宽度的元素定位，右侧自动适应宽度，使用padding来撑开被定位元素占有的那部分，这样就能达到右侧宽度根据父元素的宽度适应，而且左侧达到固定宽的效果。左右颠倒亦如此。
优点：

兼容所有浏览器

容易理解，效率高

注意：
盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的（左侧也可考虑使用绝对定位，或者使用min-height等，大家可以试验一下。）。

云服务器 GPU云服务器兼容java的浏览器 beta2的CSS兼容性浏览器对和css3的支持 css兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112436.html

css兼容所有浏览器的宽度计算方法，非calc

摘要：优点兼容所有浏览器容易理解，效率高注意盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的左侧也可考虑使用绝对定位，或者使用等，大家可以试验一下。。作为一个前端，所见的最多的就是左右布局的情况，无论框架还是各种写法中都有左右布局，然而有些情况下非常让人头疼，那就是一侧固定宽度，另一侧根据屏幕或者...

Lin_YT 2019-08-01 17:27 评论0 收藏0
CSS基础篇--CSS3 calc实现滚动条出现页面不跳动

摘要：不过最大的好处就是用在流体布局上，可以通过计算得到元素的宽度。于是，就是浏览器滚动条的宽度大小如果有，如果没有滚动条则是左右都有一个滚动条宽度或都是被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动参考的使用什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来...

894974231 2019-08-30 13:45 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 评论0 收藏0