如何实现左右定宽，中间自适应宽度的css布局？对于左右定宽中间自适应这种css布局，其实有很多实现方法，下面简单介绍几种，供大家参考；绝对定位 margin原理是将左右两边的div使用绝对定位分别定位

如何实现左右定宽，中间自适应宽度的css布局？

对于左右定宽中间自适应这种css布局，其实有很多实现方法，下面简单介绍几种，供大家参考；

绝对定位 margin

原理是将左右两边的div使用绝对定位分别定位到左右两边，中间的div使用margin属性，留出左右div的宽度，将其中间的div宽度设为100%即可，代码如图

flex布局（弹性盒子）

在外层包一层div，设置属性display：flex，里面的子元素设置属性flex:1，具体实现，看下图代码

float（浮动布局）

float布局将左右div分别浮动到左右，中间使用margin属性，留出左右的宽度，这个跟绝对定位布局有点相似，代码如下图

效果图：
总结：

实现这种左右定宽，中间自适应的css布局，其实有很多种实现方法，比如还有“圣杯布局”、“双飞翼布局”；个人比较推荐flex布局方式，这也是css3新属性，实现起来比较方便；如有疑问，欢迎在评论下方留言，大家一起讨论

先学js还是HTML5好？

个人建议先学容易的后学复杂的。毫无疑问，HTML语言会比JavaScript容易上手。

HTML语言与css一般一起学，是用于画网页的语言工具，HTML好玩之处在于让你马上感受到编程的乐趣，可能有人说这语言算编程？其实编程没有这么难，你把代码输完然后可以马上出效果，这就是HTML，代码就是砖块，HTML就是砖块的原料，最后的网页产品就是被砖块造好的房子。

JavaScript别看它是个脚本语言，如今的使用度已经遥遥领先很多语言，甚至一度被评为最受欢迎的语言。JavaScript的写法非常精炼，而且用它确实是能感受到编程的厚重感，很多如今的前端框架基本上都是JavaScript为基础，也就是说你如果想搞前端，学JavaScript是必不可少的。

不过如果零基础可以先学HTML练练手，一两天就能掌握个大概。

关注“极客宇文氏”，更多独到见解