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

时间：2022-07-02 21:08:11
CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不
少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指
南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东
西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了
它,一堆css布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我
根据猜测,再加实验,得出一下说法.如有错误,纯属正常.
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不
下, 则另起新行再浮动.
内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子
行, 用于摆放子元素.
有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在
IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从
文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当
一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原
先的空间。
浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其
实它不是。
基于文档流, 我们可以很容易理解以下的定位模式:
  • 相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位.
  • 绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
  • 固定定位, 即完全脱离文档流, 相对于视区进行偏移.

接下来还有几个问题我搞不明白的

  • 作为三大基本元素之一的内联元素, 它跟块级元素的主要区别在哪?
  • Clear属性取right值时怎么理解? 貌似实验情况总跟理论不符.

内联元素是什么意思呢？什么是块级别元素。
《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表
现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行
显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以
每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑
线只会在块的下方出现。
p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；
Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。
（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根 本没有框，也既不显示元素，不占用文档中的空间） A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页
面上任何地方。
B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的
话，它将独立一行出现。
C：一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表,<ul><ol><li> 、表 格<table>、表单<form>、DIV<div>和BODY<body>等元素。
而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........
D：块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素
也需另起一行进行显示。
E：<span>在CSS定义中属于一个行内元素，而<div>是块级元素。
对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟
点吧!
用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而
<div>相当于一个大容器，大容器当然可以放一个小容器 了。<span>就是小容器，这
样一说你也许会在脑海中有一个初步的印象了吧，如果我们想在大容器中装一些清水。
但我也想在里装一些墨水怎么办？很简单，我们把小容器拿出来装上墨水然后放入大容
器里的清水中不就成了吗。
我在举个简单的一个实际例子吧：比如
<div>上海手写DIV+CSS培训-www.xinran001.com</div> 我想用CSS定义字母www.xinran001.com的样式，因此我们就可以用到<span>了。
<div>上海手写DIV+CSS培训- <span>www.xinran001.com</span> W3C标准 </div>
块元素(block element)一般是其他元素的容器元素
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标
签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以
后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不
是每次都愚蠢的另起一行。
需要指出的是，table标签也是块元素的一种，table based layout和css based l
ayout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载
入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按
钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，
至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css
layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容
易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一
个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸
上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵
循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元
素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和
内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内
联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上
display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可
变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元
素或者内联元素的规则限制。大致的元素分类见全文。
关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。
基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个
display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)
　　* address - 地址 　　* blockquote - 块引用 　　* center - 举中对齐块 　　* dir - 目录列表 　　* div - 常用块级容易，也是css layout的主要标签 　　* dl - 定义列表 　　* fieldset - form控制组 　　* form - 交互表单 　　* h1 - 大标题 　　* h2 - 副标题 　　* h3 - 3级标题 　　* h4 - 4级标题 　　* h5 - 5级标题 　　* h6 - 6级标题 　　* hr - 水平分隔线 　　* isindex - input prompt 　　* menu - 菜单列表 　　* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 　　* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） 　　* ol - 排序表单 　　* p - 段落 　　* pre - 格式化文本 　　* table - 表格 　　* ul - 非排序列表
内联元素(inline element)
　　* a - 锚点 　　* abbr - 缩写 　　* acronym - 首字 　　* b - 粗体(不推荐) 　　* bdo - bidi override 　　* big - 大字体 　　* br - 换行 　　* cite - 引用 　　* code - 计算机代码(在引用源码的时候需要) 　　* dfn - 定义字段 　　* em - 强调 　　* font - 字体设定(不推荐) 　　* i - 斜体 　　* img - 图片 　　* input - 输入框 　　* kbd - 定义键盘文本 　　* label - 表格标签 　　* q - 短引用 　　* s - 中划线(不推荐) 　　* samp - 定义范例计算机代码 　　* select - 项目选择 　　* small - 小字体文本 　　* span - 常用内联容器，定义文本内区块 　　* strike - 中划线 　　* strong - 粗体强调 　　* sub - 下标 　　* sup - 上标 　　* textarea - 多行文本输入框 　　* tt - 电传文本 　　* u - 下划线 　　* var - 定义变量
可变元素
　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。
　　* applet - java applet 　　* button - 按钮 　　* del - 删除文本 　　* iframe - inline frame 　　* ins - 插入的文本 　　* map - 图片区块(map) 　　* object - object对象 　　* script - 客户端脚本

CSS文档流与块级元素和内联元素的更多相关文章

  1. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南&gt ...

  2. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. css 文档流中块级非替换元素水平区域的计算规则&lpar;1&rpar;

    最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...

  4. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  5. CSS块级元素、内联元素概念&lbrack;转&rsqb;

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  6. 什么是css块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),文档流这个概念理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流 将窗体自上而下分成一行行, ...

  7. CSS-position 属性&amp&semi;元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  8. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  9. CSS文档流

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

随机推荐

  1. 使用nuget打包类库并发布

    前言 NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库.今天的目的就是记录一下如何打包一个类库,并发布到官网.在开始之前需要在www.nuget. ...

  2. perl Can&&num;39&semi;t use string Cxxx&rpar; as a symbol ref while &quot&semi;strict refs&quot&semi; in use at XXXX&period;pl错误

    今天写脚本遇到Can't use string ("bond2     Link encap:InfiniBand ") as a symbol ref while "s ...

  3. &lbrack;Neural Networks&rsqb; Dropout阅读笔记

    多伦多大学Hinton组 http://www.cs.toronto.edu/~rsalakhu/papers/srivastava14a.pdf 一.目的 降低overfitting的风险 二.原理 ...

  4. Zxing中文乱码解决方法

    Zxing中文乱码解决方法总结 尝试过非常多方法  最后发现此方法解决的乱码最多....... 在百度搜索二维码图片 经过前2页的測试  除开一张图之外  其余都能扫描出结果 假设大家有更好的解决方法 ...

  5. Android IPC机制全解析&lt&semi;一&gt&semi;

    概要 多进程概念及多进程常见注意事项 IPC基础:Android序列化和Binder 跨进程常见的几种通信方式:Bundle通过Intent传递数据,文件共享,ContentProvider,基于Bi ...

  6. CSS命名实践

    前面的话 每次写HTML结构涉及到CSS命名时,都要挣扎一番.关于CSS命名的规范,市面上有不少,如OOCSS.SMACSS.BEM和MVCSS等.在这里面最火的应该算BEM了.本文将详细介绍CSS命 ...

  7. IDEA鼠标显示javadoc的设置

    IDEA鼠标显示javadoc的设置 从Eclipse切换到IDEA中以后最不适用的就是鼠标放到方法上没有注释弹出来给我看,很难受,每次使用ctrl+Q来看总觉得不开心,找了一下设置,设置方法如下: ...

  8. Java常用的九种排序方法及代码实现

    package com.algorithm.Demo; import java.util.ArrayList; import java.util.Arrays; import java.util.Li ...

  9. 【BZOJ2259】&lbrack;Oibh&rsqb;新型计算机 最短路

    [BZOJ2259][Oibh]新型计算机 Description Tim正在摆弄着他设计的“计算机”,他认为这台计算机原理很独特,因此利用它可以解决许多难题. 但是,有一个难题他却解决不了,是这台计 ...

  10. 本地配置环境打开项目出现404&sol;本地wampserver配置伪静态以及php&period;ini配置

    本地wamp/phpstudy实现虚拟主机后,出现了500错误看日志看到.htaccess: Invalid command ‘RewriteEngine’, perhaps misspelled o ...

相关文章