常见面试题之左边固定，右边自适应布局(四种方法：负边距、flex)

hot_pot_Leo 发布于2019-08-29 13:02 / 2907人阅读

摘要：这个布局是最简单的布局之一，但是网络上大多是，而没有认真解释以及用新的特性实现。

这个布局是最简单的布局之一，但是网络上大多是copy，而没有认真解释以及用新的特性实现。下面就做一个新的概括.

要求：左边固定100px, 右边自适应

左position:absolute, 右margin-left 入门写法


  左边固定1  左边固定2 左边固定3
  右边自适应1 右边自适应2 右边自适应3

//父元素相对定位，作为子元素绝对定位的参考
.parent{display:relative; background:#ffffd }
.l-child{position:absolute; width:100px;background:#bbb }
.r-child{margin-left:100px;background:#999 }

demo展示

左边float，触发父元素宽度计算 入门写法

html结构同上

.parent{background:#ffffd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}

demo展示

左右float，右边使用负边距 奇伎淫巧

这个技能要这样get：

父元素清除浮动

A元素宽100%不变，margin-left:-100px后，外部的文档流认为以边框为界，A减少了100px，而A是右浮动，也就是左边开始有100px空白可填充的文档流空间；

子元素A1是认为父元素大小没有变化，margin-left:100px后，正好等于父元素在外部空出来的文档流空间。

B元素左浮动，且是后面的dom节点，正好占据并且覆盖A空出来的空间


  
    
      右边自适应1 右边自适应2 右边自适应3
    
  
  
    左边固定1  左边固定2 左边固定3

.parent{background:#ffffd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}

demo展示

flex布局 高大尚

父元素flex布局后，子元素默认就是弹性布局，除非你确定子元素的弹性方式
ps：这个方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！！
html同第一个demo

.parent{display:flex; background:#ffffd }
.l-child{flex:0 0 100px; background:#bbb }
.r-child{background:#999}

demo展示

云服务器 GPU云服务器 js常见面试题负边距 html 固定左边 flex布局

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

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

CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS布局——左定宽度右自适应宽度并且等高布局

摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...

dreamtecher 2019-08-29 12:43 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

Clect 2019-08-02 16:17 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

468122151 2019-08-30 10:49 评论0 收藏0