认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)…

一.前言 说实话,听到BFC这个概念我心里一阵咯噔,这到底是什么?有种似曾相识的感觉,但是又很模糊.问了一下度娘,看到张鑫旭的<CSS深入理解流体特性和BFC特性下多栏自适应布局>.呀,原来是这东东啊.BFC应该是前端的基础知识,也许很多前端er工作中经常用到,但是未必真的归纳总结过(自己躺枪),反正能完成工作就好了,没必要非得脑海中有BFC这概念.不过我觉得,知识掌握一定的知识之后终究应该要善于总结,归纳成为体系,最后才能回归本真,站在一定的高度去看待一个问题.   说点题外话,学前端的应该…

1.BFC的区域会与float的元素区域重叠 2.计算BFC的高度时,浮动子元素也参与计算 3.BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素 4.BFC意为"块级格式化上下文"   答案:1   解析:     BFC全称"Block Formatting Context", 中文为"块级格式化上下文".     BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素.所以,避免marg…

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…

引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.…

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的块级格式化上下文. 在一个块级格式化上下文里,盒子从包含块的顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的.两个相邻的块级盒子的垂直外边距会发生叠加. 在块级格式化上下文中,每一个盒子的左外边缘(margin-left)会触碰到容…

在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格:  窄空格:  一个汉字宽度的空格:   [用两个空格(  )占一个汉字的宽度时,两个空格比一个汉字略窄,三个空格(   )比一个汉字略宽] 在实际使用中需要灵活使用 和 的组合. android:text="项目名称:" android:text="负  责  人:" 参考资料: http://www.ithao123.cn/content-7409296.…

前言 在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格: (普通的英文半角空格但不换行) 窄空格:  　(中文全角空格 (一个中文宽度))  (半个中文宽度,但两个空格比一个中文略大)  (一个中文宽度,但用起来会比中文字宽一点点) \u3000\u3000(首行缩进) \u3000(全角空格(中文符号)) \u0020(半角空格(英文符号)) …(省略号) 所以如果想要实现文字对齐,那么可以考虑下面的方案: 方案一:一个汉字宽度的空格:…

到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度.而这一切都是依赖于Flexbox属性中的flex属性来完成.一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间,也会按照收缩比率来缩小各Flex项目,以免Flex项目溢出Flex容器.但其中Flex项目又是如何计算呢?他和扩展比率或收缩比率…

前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox(height: 20.0), new Stack( alignment: const FractionalOffset(0.9, 0.1),//方法一 children: <Widget>[ new Image( image: new AssetImage("assets/images/…