520,自适应布局的思路(待补充)

左侧浮动或者绝对定位,右侧通过margin撑开

使用flex

使用<div>包含,然后靠margin形成bfc(百科:block formatting context块级格式化上下文

bfc是一个独立的渲染区域,只有block-level box参与,他规定了包括内部的block-level box如何布局,并且与这个区域外部毫不相干。

bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此,包括浮动和外边距合并等等,有了这些特性我们布局的时候就不会出现意外了情况了。

  • 哪些情况下会产生bfc

display属性为block,list-item,table的元素,会产生bfc。(最常用的就是块级元素)

  • 什么情况下会触发bfc

设置了float属性,并且不为none

position属性为absolute或者fixed(fixed:固定布局)

display为inline-block,table-cell,table-caption,flex,inline-flex

overflow属性不为visible

 

 

posted @ 2020-02-27 18:08  皮皮买  阅读(121)  评论(0编辑  收藏  举报