web前端|html教程
DIV+CSS 自适应布局
web前端-html教程
两栏布局，左边定宽200px，右边自适应。如何实现？
我的第一个反应就是：用flex伸缩盒呀，然后balabala…
说完之后，面试官说，还有没有别的方法？flex有些浏览器不支持
嗯…我愣了一下，平常遇到这种问题貌似都是这么写的…
别的方法？我又想了想。JS?对，JS肯定可以。
然后就说，可以用JS获取当前窗口宽度，然后减去200px就是右边的宽度了
面试官：嗯，这样的确可以，但是布局一般不要用JS，还有没有别的方法？CSS的
额，这下我完全愣住了好嘛，人也变得有些紧张。还要别的方法啊，什么方法呢？？？
哎呀妈呀，想不出来，肿么办…
然后面试官看了我半天，十分体谅的说，那我们进行下一个问题吧…
（以上面试官原话记不大请了，但是意思就是这样~）
梦道h5源码,ubuntu 区域截屏,tomcat部署及性能优化,java股票爬虫,文章系统php,前端seo搜索引擎优化运营lzw
回来后，经过百度，哇！原来方法如此之多~还如此简单~
下面就来总结一下~
ce易语言源码,vscode批量复制粘贴按键,mdk Ubuntu,tomcat设置文件打开数,go sqlite并发,网页设计专业培训学校,通服务器租用,一元云购时时彩插件,前端对话框架,爬虫型野兽,php max函数,昆明seo博客,springboot2攻略,css网站源码,网页在vc中显示,discuz 推送模板,php可以做网页和后台吗,操作成功页面模板,java 进销存管理系统,身份证系统程序代码lzw
A、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
HTML代码：
微我网 138wo微信源码v2.3,vscode vim 对比,全志H2刷Ubuntu,tomcat 理解简介,mac查看sqlite版本,safari tab切换插件,安卓前端框架难嘛,java可以做爬虫吗,php 数据接口,钦州seo推荐,帝国cms 网站迁移错版,编辑网页代码 教案,qq音乐网页模板下载lzw
我是左栏
我是右栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ margin: 10px;}.wrap_left{ float: left; width: 200px; background-color: red;}.wrap_right{ margin-left: 220px; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
HTML代码
我是左栏
我是右栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ margin: 10px; position: relative;}.wrap_left{ position: absolute; width: 200px; background-color: red;}.wrap_right{ margin-left: 220px; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
举例：
HTML代码
我是右栏
我是左栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ float: left; width: 100%;}.wrap .wrap_right{ margin-left: 220px; background-color: green;}.wrap_left{ float: left; width: 200px; margin-left: -100%; background-color: red;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
注：使用的float属性，必要时清除一下浮动。
4.用table布局实现
来自评论里@qazxsw的方法：
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
不过这个方法，一定要设置高度才可以~
5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，前端精选文摘：BFC 神奇背后的原理（我会告诉你我也是才看的么~哈哈~）
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。（可以触发BFC的属性？继续看上面那个链接！！）
示例：
HTML代码：
我是左栏
我是右栏
复制代码
CSS代码：
html,body,div{ margin: 0; padding: 0;} .wrap_left{ float: left; width: 200px; background-color: red;}.wrap_right{ overflow: hidden; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
前面有说到一般我都是用的flex伸缩盒，那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码
我是左栏
我是右栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ display: flex; display: -webkit-flex;}.wrap_left{ width: 200px; background-color: red;}.wrap_right{flex-grow:1; -webkit-flex-grow:1; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
进阶
B、三栏布局
掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
HTML代码：
我是左栏
我是右栏
我是中间栏
复制代码
CSS代码：
html,body,div{ margin: 0; padding: 0;}.wrap_left{ width: 200px; float: left; background-color: red;} .wrap_content{ margin-left: 220px; margin-right: 220px; background-color: yellow;}.wrap_right{ width: 200px; float: right; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
2. position + margin（两侧定宽，中间自适应）
HTML代码：
我是左栏
我是右栏
我是中间栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap_left{ width: 200px; position: absolute; background-color: red; left: 0;} .wrap_content{ margin-left: 220px; margin-right: 220px; background-color: yellow;}.wrap_right{ width: 200px; position: absolute; right: 0; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
3.float + 负margin（两侧定宽，中间自适应）
HTML代码
我是中间栏
我是左栏
我是右栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ float: left;; width: 100%;}.wrap_left{ width: 200px; float: left; margin-left: -100%; background-color: red;} .wrap_content{ margin-left: 220px; margin-right: 220px; background-color: yellow;}.wrap_right{ width: 200px; float: left; margin-left: -200px; background-color: green;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
4.table实现
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
5.BFC方法
HTML代码
我是左栏
我是右栏
我是中间栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;} .wrap_left{ float: left; width: 200px; background-color: red;}.wrap_right{ float: right; width: 200px; background-color: green;}.wrap_content{ overflow: hidden; background-color: yellow;}
复制代码
运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by
注：HTML中先写定宽元素，再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码
我是左栏
我是中间栏
我是右栏
复制代码
CSS代码
html,body,div{ margin: 0; padding: 0;}.wrap{ display: flex; display: -webkit-flex;}.wrap_left{ width: 200px; background-color: red;}.wrap_right{width: 200px; background-color: green;}.wrap_content{ flex-grow:1; -webkit-flex-grow:1; background-color: yellow;}
复制代码
