两边固定，中间自适应

本篇总结五种思路实现方式，

圣杯布局

圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面
第一步：中间盒子100%，两边固定宽度，三个盒子依次上下
第二步：子盒子全左浮动 left与right脱离文档流在第二行
第三步：父级盒子不要给宽度，padding：0 200px;留出左右盒子位置
第四步： left 盒子
（1）margin-left:100% 先将浮动元素向上移动一行文档流‘
（2）position：relative；left：自身宽度；微调left位置(此处可以用position：absolute 也行)

第五步：right盒子使用margin-right：自身宽度
第六步：清除浮动，不然可能带来高度塌陷问题

代码如下：

CSS

  <style>*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.clearfix:after,.clearfix:before{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}.main{position: relative;padding: 0 200px;min-height: 400px;}.content,.left,.right{float: left;}.content{width: 100%;min-height: 500px;background-color: hotpink;}.left,.right{background-color: greenyellow;width: 200px;min-height: 300px;}.left{margin-left: -100%;position: relative;left: -200px;/* 通过absoluteposition: absolute;   left: 0;*/  z-index: 1000;}.right{margin-right: -200px;}</style>

html

<body><div class="main clearfix"><div class="content">content</div><div class="left">left</div><div class="right">right</div></div>
</body>

双飞翼布局

双飞翼布局，左右两边像是翅膀插在两边，像每一个平凡人一样需要借助外部力量才能飞翔。
所以中间与左右不属于同级
left right 像是翅膀通过margin-left插在左右两边
content 通过margin 调整
第一步：中间父盒子，左右盒子依次上下排开
第二步：中间父盒子，左右盒子全部脱离文档流，中间父盒子设置100%独占一行
第三步：中间盒子通过margin值调整 margin：0 200px 给左右盒子腾出位置
第四步：left盒子，通过margin-left:-100% 向上一行文档流
第五步：right盒子通过margin-left:-200px 调整位置
第六步：清除浮动，不然可能带来高度塌陷问题

CSS

  <style>*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.clearfix:after,.clearfix:before{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}.main,.left,.right{float:left;}.main{width: 100%;/* min-height: 400px;background-color: pink; */}.content{margin: 0 200px;height: 500px;background-color: pink;}.left,.right{width: 200px;height: 300px;background-color: greenyellow;}.left{margin-left: -100%;}.right{margin-left: -200px;}</style>

html

<body class="clearfix"><div class="main"><div class="content">content</div></div><div class="left">left</div><div class="right">right</div>
</body>

calc()函数

width：calc（100%-400px）
注意：
calc() 函数用于动态计算长度值。
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
步骤：
一：左中右盒子依次上下排开
二：赋值宽度 left right 200px
中间 100% -400px
三：子盒子浮动

缺点只兼容到ie9 计算会阻塞加载对渲染不友好

CSS

  <style>*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.main{width: 100%;}.content,.left,.right{float:left;}.left,.right{width: 200px;min-height: 300px;background-color: greenyellow;}.content{width: calc(100% - 400px);min-height: 400px;background-color: indianred;}</style>

html

<body><div class="main"><div class="left">left</div><div class="content">content</div><div class="right">right</div></div>
</body>

定位

定位也是比较常见的实现布局的方式
中间盒子 margin：0 200px
左右分别使用定位去到对应为位置即可

html

<body><div class="main"><div class="content">content</div><div class="left">left</div><div class="right">right</div></div>
</body>

CSS

  <style>*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.main{position: relative;width: 100%;min-height: 400px;}.content{margin: 0 200px;min-height: 400px;background-color: pink;}.left,.right{position: absolute;width: 200px;height: 300px;background-color: yellowgreen;}.left{left: 0;top: 0;}.right{top: 0;right: 0;}</style>

Flex

flex 是个人觉得布局最方便的方式了。而且兼容性也越来越好，代码简洁
父容器 flex 中间盒子flex：1 即可
CSS

  <style>*{margin: 0;padding: 0;}html,body {overflow: hidden;}.box{height: 100vh;display: flex;}.left,.right{width: 200px;min-height: 500px;background-color: greenyellow;}.content{background-color: pink;min-height: 500px;flex: 1;}</style>

html

<body><div class="box"><div class="left">left</div><div class="content">content</div><div class="right">right</div></div>
</body>

总结

实现的方式有很多种，这个问题算是面试比较基础的吧，还有别的方式，像利用table，grid（栅格，有一定兼容性）等来实现
另外布局时，建议尽量减少定位和浮动来布局，在考虑兼容的同时实现快速布局，推荐flex

是本人第一篇博客，写的比较简单，主要还是为了方便自己闲暇时间可以扫一眼。依次养成一个良好习惯。记得刚入行时，有一个面试官问我，你每天除了工作，主动学习前端技术的时间平均有多少。当时真是充满愧疚哈哈。
代码源自于从一些资料，教程总结，亲测有效。侵删。

全力以赴奔向你le。

CSS(一) 经典布局（两边固定，中间自适应）的五种方式相关推荐

在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
css布局右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
三列布局-中间固定俩边自适应-和两边固定中间自适应布局
中间固定俩边自适应 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" ...
中间固定两边自适应两边固定中间自适应 promise
中间固定两边自适应 www.jianshu.com/p/94666c389- 两边固定中间自适应思路 1.浮动左浮动, 右浮动固定宽,中间的盒子设置左margin (左浮动盒子的宽度) 右marg ...
CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网 ...
详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
页面布局--上下固定中间自适应出现滚动条布局
上下固定中间弹性滚动布局是H5页面最常见的布局方法:现在总结了3中布局方式. 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码: //html结构 ...

CSS(一) 经典布局（两边固定，中间自适应）的五种方式

两边固定，中间自适应

圣杯布局

双飞翼布局

calc()函数

定位

Flex

总结

CSS(一) 经典布局（两边固定，中间自适应）的五种方式相关推荐

最新文章

热门文章