首页 > Web开发 > 详细

CSS 可视化设计模型(1)块框(Block boxex)和 行内框(Inline boxes)

时间:2016-02-06 01:46:36      阅读:516      评论:0      收藏:0      [点我收藏+]

标签:class   style   log   si   la   sp   ha   as   c   

包含块(Cotaining Blocks)

在CSS2.1中,很多 box 的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算。一般地,生成的 box 会充当其后代 box 的包含块;我们称盒为其后代“创建”了包含块。说“box的包含块”即是说“box所处的包含块”,而不是box所产生的包含块。

每个box会被赋予一个相对于其包含块的位置,但它不会被局限在其包含块内;它有可能溢出。

<div>
<table>
<tr><td>hi</td></tr>
</table>
</div>

如上,div 和 table 都是包含块。div 是 table 的包含块,同时table又是 td 的包含块。

 

块级元素(Block-level Elements)和 块框(Block Boxes)

块级元素(Block-level Element):会生成一个块框(Block box),来包含子box和生成的内容。

块框(Block box):同时也是一个块包含框(containing box),里面要么只包含块框(block boxes),要么只包含 行内框(inline boxes)。

匿名块框(Anonymous block boxes):

<DIV>
Some text
<P>More text
</DIV>

如上,DIV似乎看起来包含行内(in-line)内容和块框,其实,依据CSS规定,在 some text 的周围是一个匿名块框,这样 DIV 块框里只包含块框了。

换句话说:如果一个块框(如上例中为DIV生成的框)在其中包含另外一个块框(如上例中的P),那么,我们强迫它只能包含块框。因此,上面的 “Some text” 被强制加到一个匿名的块框里面。

 

行内元素(Inline-level Elements)和 行内框(Inline Boxes)

行内元素(Inline-level Elements):指能排在一行的元素,允许左右有其他元素,有 a,img,b 等。

行内框(Inline Boxes):一个行内元素生成一个行内框。

匿名行内框(Anonymous Inline Boxes)

<P>Some <EM>emphasized</em> text</P>

如上,P元素生成一个块框,其内还有几个行内框。"emphasized"的框是一个行内元素(<em>)产生的行内框,而其它的框("Some"和"text")是块级元素(P)产生的行内框。后者就称为匿名行内控制框,因为它们没有与之相关的行内元素,所以,这些框被叫做匿名行内框。

 

display 属性

  • block:元素产生一个块框。
  • inline-block:元素产生一个行内级块框。行内块框的内部会被当作块块来格式化,而此元素本身会被当作行内级框来格式化。
  • inline:元素产生一个或多个的行内框。
  • none:元素不出现在格式化结构中(也就是说,元素既不产生框也不影响布局)。其后代元素也不产生任何框:该元素及其内容会被从格式化结构中完全移除。 ‘none‘ 的显示特性并不生成一个不可见的框;它根本不生成框。CSS包含了机制使一个元素能够在格式化结构中生成框而影响格式化,但本身不可见( visible 特性)。

我对块框(block boxes)和行内框(inline boxes)的理

  • 如果一个框(boxes)里,有一个块级元素,那么这个框里的内容都会被当作块框来进行格式化,因为只要出现了块级元素,就会将里面的内容分块几块,每一块独占一行。
  • 如果一个框(boxes)里,没有任何块级元素,那么这个框里的内容会被当成行内框来格式化,因为里面的内容是按照顺序成行的排列。

CSS 可视化设计模型(1)块框(Block boxex)和 行内框(Inline boxes)

标签:class   style   log   si   la   sp   ha   as   c   

原文:http://www.cnblogs.com/womlly/p/5183774.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号