文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图:

文本溢出、垂直外边距合并、BFC、hasLayout

关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html

从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本。然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数。

文本溢出、垂直外边距合并、BFC、hasLayout

用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的根本原因呢,还是对margin的特性没有了解清楚。w3school(http://www.w3school.com.cn/css/css_margin_collapsing.asp)外边距合并这一章讲的很清晰,实际上就是父元素和子元素在垂直方向上的外边距进行了合并,所以只显示出20px,而水平方向上不会,故显示40px。注释当中还有一句重要的话:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。此注释就为解决这个问题提供了思路。(http://www.nowamagic.net/librarys/veda/detail/1608)也有助于清晰的了解margin的一些特性,作者还分析了IE浏览器下关于margin可能出现的bug。

文本溢出、垂直外边距合并、BFC、hasLayout

效果如下:文本溢出、垂直外边距合并、BFC、hasLayout

问题的解决:(http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html)给出了几种方法,其中最简单的就是在父元素中设置:overflow:hidden,果然问题就解决了,但是我并不明白问什么,作者给出原因:盒子没有获得 haslayout  造成 margin-top无效。再继续学习的过程中接触到了一个新的名词BFC(Block Formatting Content),BFC决定了元素如何对内容进行定位,集中触发方式:

1.float不为none;2.overflow不为visible;

3.display:(table-cell\table-caption\inline-block);4、position:(任何值除了static\relative)

BFC和hasLayout的作用:浮动元素和常规元素的重叠问题;解决相邻元素margin边距重叠问题(http://www.cnblogs.com/ILYljhl/p/3169419.html)

所以margin的外边距合并清除的问题就这样解决啦,至于BFC和hasLayout还要继续学习~

上一篇:修改sqlserver的数据库排序规则语句


下一篇:web前端笔记整理一---HTML