CSS文档流与块级元素和内联元素.docxVIP

CSS 文档流与块级元素和内联元素 CSS 文档流与块级元素（ block ）、内联元素（ inline ）， 之前翻阅不少书籍 ,看过不少文章 , 看到所多的是零碎的 CSS 布局基本知识 ,比较表面 .看过 OReilly 的,发现里面提到的文档流概念让我很敏感 可恶的是书中并没有解释文档流是什么东西 ,或许作者觉得 这个太简单了以至于不值一提 .但我觉得 ,这个概念实在太重 要了 .理解了它 ,一堆 CSS 布局的理论都 变得易于理解 ,并且体会到 CSS 这套设计的合理性所在 . 于 是我根据猜测 ,再加实验 ,得出一下说法 .如有错误 ,纯属正常 . 文档流 将窗体自上而下分成一行行 , 并在每行中按从左至右的顺序 排放元素 ,即为文档流 . 每个非浮动块级元素都独占一行 , 浮动元素则按规定浮在行 的一端 . 若当前行容不下 , 则另起新行再浮动 . 内联元素也不会独占一行 . 几乎所有元素 （包括块级 ,内联和 列表元素 ）均可生成子行 , 用于摆放子元素 . 有三种情况将使得元素脱离文档流而存在 ,分别是浮动 ,绝对 定位 , 固定定位 . 但是在 IE 中浮动元素也存在于文档流中 （还让我觉得这样很合理 gt; 浮动元素不占任何正常文档流空间，而浮动元素的定位还是 基于正常的文档流，然后从文档流中抽出并尽可能远的移动 至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个 元素从正常文档流中抽出后，仍然在文档流中的其他元素将 忽略该元素并填补他原先的空间。 浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只 能说很多人以 IE 做标准，其实它不是。 基于文档流 , 我们可以很容易理解以下的定位模式 相对定位 , 即相对于元素在文档流中位置进行偏移 . 但保留原占位 . 绝对定位 , 即完全脱离文档流 , 相对于 position 属性非 static 值的最近 父级元素进行偏移 固定定位 , 即完全脱离文档流 , 相对于视区进行偏移 . 接下来还有几个问题我搞不明白的 作为三大基本元素之一的内联元素 , 它跟块级元素的主要区 别在哪 ? Clear 属性取 right 值时怎么理解 ? 貌似实验情况总跟理论不 符.内联元素是什么意思呢？什么是块级别元素。 CSS 权威指南》 CSS 权威指南》 中文字显示: 任何不是块级元素的可见元 素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终 以行进行显示。比如，我们设定一个内联元素 border-bottom:1px solid #000; 时其表现是以每行进行重复，每一行下方都会有一条 黑色的细线。如果是块级元素那么所显示的的黑线只会在块 的下方出现。 p、h1 、或 div 等元素常常称为块级元素， 这些元素显示为 块内容； Strong,span 等元素称为行内元素，它们的内容显 示在行中，即“行内 框”。（可以使用 display=block 将行内元素转换成块元素， display=none 表示生成的元素根本没有框， 也既不显示元素， 不占用文档中 的空间） A :行内就是在一行内的元素，只能放在行内；块级元素， 就是一个四方块，可以放在页面上任何地方。 B :说白了，行内元素就好像一个单词；块级元素就好像 个段落，如果不另加定义的话，它将独立一行出现。 C :一般的 块级元素诸如段落 lt;p 、标 题 ... 、列表 , 表格、表单、 DIV 和 BODY 等元素。而内联元素 则如 : 表单元素、超级链接、图像、 D:块级无素的显著特点是：每个块级元素都是从一个新行 开始显示，而且其后的无素也需另起一行进行显示。 E:在CSS定义中属于一个行内元素，而是块级元素。 对于学过 CSS 的人来说一听就能明白。可对于新手来说不 易理解，我主要对新手说通熟点吧 用容器这一词会更容易形象理解它们的存在与用途，行内元 素相当一个小容器，而相当于一个大容器，大容器当然可以 放一个小容器 了。就是小容器，这样一说你也许会在脑海中有一个初步的 印象了吧，如果我们想在大容器中装一些清水。但我也想在 里装一些墨水怎么 办？很简单，我们把小容器拿出来装上墨水然后放入大容器 里的清水中不就成了吗。 我在举个简单的一个实际例子吧：比如 上海网站制作 - 我想用 CSS 定义字母 c 的样式，因此我们就可以用到了。 标准块元素海网站设计 - W3C (block element) 一般是其他元素的容器元素 块元素一般都从新行开始，它可以容纳内联元素和其他块元 素,常见块元素是段落标签’P。“ form这个块元素比较特殊， 标准块元素 它只能用来容纳其他块元素。 如果没有 css 的作用，块元素会顺序以每次另起一行的方式 直往下