摘要：优点兼容所有浏览器容易理解，效率高注意盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的左侧也可考虑使用绝对定位，或者使用等，大家可以试验一下。。
作为一个前端，所见的最多的就是左右布局的情况，无论框架还是各种写法中都有左右布局，然而有些情况下非常让人头疼，那就是一侧固定宽度，另一侧根据屏幕或者外层宽度自动适应，例如表单：
如图所示：左右布局，但是左侧按照百分比排版的，在屏幕小的情况下非常拥挤，在屏幕宽的时候非常宽松，不能够做到左边固定宽度（因为左侧是固定的几个文字），右侧自动适应。类似问题还有N多，比如后台界面左右布局形式，tab选项卡左右布局形式等等。
一、使用JavaScript来计算的弊端麻烦，写一大堆，然后不一定对。
效率低，改变屏幕或者改变外层div宽度，效率极低。
样式和JavaScript不分开，非常不规整。
二、使用css3的calc计算的弊端弊端：一言以蔽之，兼容性不好
优点：简单易用，效率高，能解决兼容性是最好不过了，能不能使用css2.0来写出这个效果呢，答案是能！
具体的布局如上，父元素定位，左侧固定宽度的元素定位，右侧自动适应宽度，使用padding来撑开被定位元素占有的那部分，这样就能达到右侧宽度根据父元素的宽度适应，而且左侧达到固定宽的效果。左右颠倒亦如此。
优点：
兼容所有浏览器
容易理解，效率高
注意：
盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的（左侧也可考虑使用绝对定位，或者使用min-height等，大家可以试验一下。）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51146.html
摘要：优点兼容所有浏览器容易理解，效率高注意盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的左侧也可考虑使用绝对定位，或者使用等，大家可以试验一下。。 作为一个前端，所见的最多的就是左右布局的情况，无论框架还是各种写法中都有左右布局，然而有些情况下非常让人头疼，那就是一侧固定宽度，另一侧根据屏幕或者...
摘要：不过最大的好处就是用在流体布局上，可以通过计算得到元素的宽度。于是，就是浏览器滚动条的宽度大小如果有，如果没有滚动条则是左右都有一个滚动条宽度或都是被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动参考的使用 什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来...
摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。 前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...
摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。 前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...
阅读 1177·2023-04-25 16:45
阅读 1742·2021-11-17 09:33
阅读 2088·2021-09-27 14:04
阅读 812·2019-08-30 15:44
阅读 2483·2019-08-30 14:24
阅读 3268·2019-08-30 13:59
阅读 1559·2019-08-29 17:00
阅读 785·2019-08-29 15:33
