美文网首页
多列布局(上)

多列布局(上)

作者: Ryann | 来源:发表于2016-10-04 20:19 被阅读0次

    多列布局可分为:1、定宽+自适应布局 2、不定宽+自适应布局 3、等分布局 4、等高布局。我们现在先来探讨第1、2种布局。
    如何实现定宽+自适应布局?先来考虑单列定宽+单列自适应。假设parent元素,下面有left和right两个块级元素,我们要实现left宽度为80px, right自适应宽度,并且left与right水平间距为20px。点击查看固宽+自适应布局

    定宽+单列自适应布局可以有如下几种方式:1、设置left元素float:left; 并设置right的margin-left;该方法存在一个“bug”-当right中子元素设置了清除浮动后,right会整体下移。解决方法是,用一个container将right包裹起来,并设置container左浮动,宽度为100%,然后使用margin-left将容器上移。由于parent的两个子元素都是浮动元素,在浮动元素内部设置clear:both,不会影响外部布局。由于right浮动元素盖在了left元素上,导致无法选中left元素中的文本,可以设置left元素position: relative提高其层级。关于为何可以通过设置position:relative提高元素层级,参考张鑫旭的深入理解CSS中的层叠上下文和层叠顺序
    2、设置left元素float:left; 设置right的overflow:hidden。这里是利用了BFC(块级格式化上下文),参考关于Block Formatting Context--BFC和IE的hasLayout。简单来说就是,当设置right的overflow:hidden后即生成了一个BFC,一个BFC就是页面上的一个独立容器,它不与外面的浮动元素发生重叠,也即遇到浮动元素后就会自动收缩。打个比方就是,BFC就像是有内涵又有点羞涩的汉子,float元素就像柔情似水的菇凉,当某天BFC汉子碰到float妹子,就会不由自主的缩起身子,与菇凉保持似近非近的距离。如果float没有设置margin-right,则默认BFC与float是肩碰肩,所以,如果float菇凉觉得距离太近,可以设置其margin来控制与BFC汉子的距离。
    3、使用table,设置parent的display:table,并设置其宽度width: 100%; 然后设置left,right元素display: table-cell。当给left设置宽度width: 80px后,right默认宽度为table剩余宽度。由于table-cell是无法设置margin的,我们可以通过设置padding来为table-cell元素间保留空隙。为了提高渲染速度,我们还会给parent设置table-layout: fixed。
    4、使用强大的flex。设置parent的display: flex;此时left,right变为flex-item,他们的宽度与内容自适应。现在给left设置宽度width: 80px; 并设置其margin-right: 20px; 设置right的flex:1;后right占据flex元素剩余宽度。由于flex自适应内容的灵活性,大范围使用flex会影响浏览器性能,所以我们通常使用flex做一些小范围的布局。
    那么如何实现定宽(n)+自适应呢?方法与单列定宽+自适应类似。
    现在,我们来看看如何实现不定宽+自适应。
    不定宽+自适应可以说是定宽+自适应的拓展,区别在于,不定宽元素的宽度可以改变。我们可以试着从定宽+自适应的方法中寻找我们要的解决方法。我们的筛选条件是,自适应元素(right)与定宽(left)元素的宽度无关,也就是说,right元素可以自动调整与left元素的举例。上述4中方法中符合这个条件的分别是第2、3、4种方法。
    方法2、float+overflow。设置left的float:left;使得left元素宽度自适应,right元素由于设置了overflow:hidden;默认与left元素挨着而不重叠。left使用margin控制与right的距离。
    方法3、设置parent的display: table;子元素display: table-cell;我们的目标是left元素自适应内容宽度,right元素为table剩余宽度,那么如何实现呢?我们可以将left的width设置得足够小,为0.1%,为什么是0.1%,而不是1px呢?这主要是出于在ie8中的兼容性考虑。然后我们给left里面的文本元素设置一个宽度,使得left中的内容将left撑开,由于left的宽度足够小,所以right会占满它所能占有的全部宽度。这里要注意,不能给parent设置table-layout:fixed,因为这样会使得布局固定,left无法被内容撑开,right宽度近似为table宽度。现在我们再探究一下table-cell默认宽度。若不给table下的table-cell设置宽度table-cell默认宽度根据内容平分,例如,如果left元素中内容为字符“A”,right元素中内容为字 符“B”,那么left与right的宽度相等,若left元素中内容改为“AB”那么,left的宽度为right的两倍。当给parent元素设置 table-layout: fixed后,table-cell元素的默认宽度与内容无关,而是固定的,若未给table-cell设置宽度,table-cell元素默认平分 parent宽度。
    方法4、依旧是强大的flex,flex-item默认宽度为内容宽度,只需给parent设置display: flex;然后right的flex: 1;即可使得right默认填满parent剩余空间。
    参考:网易前端微专业布局课程。

    原文:http://www.huangruixuan.com/2016/04/01/%EF%BC%88%E4%B8%8D%EF%BC%89%E5%AE%9A%E5%AE%BD%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80/

    相关文章

      网友评论

          本文标题:多列布局(上)

          本文链接:https://www.haomeiwen.com/subject/gwhsyttx.html