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

蓝咒 提交于 2020-02-27 18:40:07

左侧浮动或者绝对定位,右侧通过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

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

overflow属性不为visible

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!