读书人

初学者关于块框和行内框的有关问题~大

发布时间: 2012-03-24 14:00:46 作者: rapoo

菜鸟关于块框和行内框的问题~~求助大家!!!
买了一本《精通CSS-高级web标准解决方案》的书自己看,但看到“可视化格式模型”的时候,就有点迷糊了。
以下摘自书中几段话:
1、 行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整他们的水平间距。但是,垂直内边距、边框和外边距不影响行内框的高度。同样,在行内框上设置显示的高度或宽度也没有影响。由一行形成的水平框成为行框,行框的高度总是足以容纳它包含的所有行内框。但是设置行高可以增加这个框的高度。因此,修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或外边距。

问题:
第一段红字说“在行内框上设置显示的高度...”,第二段红字又说“修改行内框尺寸的唯一方法是修改行高...”。这两句话不是自相矛盾吗?作者到底是想表达什么意思呢?
(我经过测试,是可以用height属性修改行内元素的行高的)
--------------------------------------------------------------------------

2、 允许把元素的display属性设置为inline-block。顾名思义,这个声明让元素像行内元素一样水平地依次排序。但是,框的内容仍然复合块级框的行为,例如能够显示地设置宽度、高度、垂直外边距和内边距。

问题:
这句话完全没理解是什么意思~能帮我举个小例子吗?
--------------------------------------------------------------------------

3、框可以按照HTML元素的潜逃方式包含其他框。大多数框由显示定义的元素形成。但是,在一种情况下,即使没有进行显示定义,也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素的开头时。

HTML code
<div>    some text    <p>Some More text</p></div>


问题:
书中的例子我觉得不太合适,因为<p>本来就是块级元素(即会自己占一行),所以看不出来文本“some text”是不是块级元素。因此我自己改了这个例子:
HTML code
<div>    some text    <span>Some More text</span></div>

运行结果是“some text”和“Some More text”在同一行,那也就是说some text这行文本不是块级元素,那书里写的是怎么回事??

打这么多字不容易,麻烦各位了:)
谢谢!!!

[解决办法]
例子,分别可以说明上面几点

注意前面的DTD定义,不同的DTD,浏览器的解释不同
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><span style="height:600px;border:1px solid red">设置高度无效</span><br><span style="height:600px;border:1px solid red">设置高度无效</span><br><span style="line-height:60px;border:1px solid red">设置行高有效效</span><br><span style="line-height:60px;border:1px solid red">设置行高有效效</span><br><br><span style="display:inline-block;border:1px solid green;height:60px">设置inline-block;能够显示地设置宽度</span>
[解决办法]
探讨

引用:
3.按自己理解的就行了

啊???我自己没理解是什么意思啊。。。

读书人网 >CSS

热点推荐