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

原创 tiffany拉拉 随笔 css 342阅读 2017-12-26 17:22:49 举报

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

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

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

//父元素相对定位,作为子元素绝对定位的参考
css 代码

左边float,触发父元素宽度计算 入门写法
html结构同上
css 代码

左右float,右边使用负边距 奇伎淫巧
这个技能要这样get:

父元素清除浮动

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

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

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

css 代码

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

css 代码

评论 ( 3 )
最新评论
tiffany拉拉 1F 2017-12-27 11:44:25 3F

看了一下菜单教程,上面的解释:flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; (flex-basis:项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。)第三个值已经写出了子元素的宽度,所以不用再写width了

tiffany拉拉 1F 2017-12-27 11:40:43 2F

那样写好像是OK的哦,我已经用到项目中去啦,完全没有问题

921021656 2017-12-26 19:02:08 1F

最后一个还是有点问题的,你应该让.1-child { width:100px} 然后 .2-child{flex:1},按照你这样的写法,2-child应该是个空元素