码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-27 18:56:32      阅读:46      评论:0      收藏:0      [点我收藏+]

标签:evel   fixed   box   区域   play   cap   list   容器   pos   

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

 

 

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

标签:evel   fixed   box   区域   play   cap   list   容器   pos   

原文地址:https://www.cnblogs.com/1998Archer/p/12373508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!