今天jquery博客遇上CSS文档流与块级元素(block)内联元素(inline)之间的关系，最近一直加班，睡眠不好，有点糊涂了，简单的问题复杂化了。
项目多了，有些需要和同事们齐心协力，有些放进去出错，头大啊。
文档流
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。
内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。
基于文档流， 我们可以很容易理解以下的定位模式：
相对定位， 即相对于元素在文档流中位置进行偏移。 但保留原占位。
绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。
固定定位， 即完全脱离文档流， 相对于视区进行偏移。
《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
1 行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。
2 说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。
3 一般的 块级元素诸如段落<p>、标 题<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..
4 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
5 <span>在CSS定义中属于一个行内元素，而<div>是块级元素。
主要列出一些常见的啊，不怎么见就拉倒了
块元素（block element）
div dl ul h1 h2 h3 h4 h5 h6 hr ol table
内联元素（inline element）
b img span
转自 jquery http://www.jqueryba.com/204.html
发表评论
-
jquery仿凡客诚品图文切换效果
2012-12-29 22:31 999前端开发过程中需要不断学习，不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 666不断学习，对前端开发来说很是重要，况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 727现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 776习惯性的早起，星期天睡不着啊，估计这个是前端开发的职业病，落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1106jquery博客之前代码插件好好的，最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 791有时候，我们的css样式表中字体乱码，很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH（swf文件）的html代码
2012-10-26 09:44 862记得jquery博客从学校出来，走上这条前端开发这不归路，就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 794jquery博客继续折腾shopex纠结了，老是出现无法安装， ... -
jquery简单attr用法
2012-10-24 11:39 831之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 972又是一个周末，jquery特效继续折腾我那discuz论坛，我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 713战斗月，7月即将结束，回首望去，jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 889今天晚上是jquery博客连续加班的最后一个晚上了，明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 673jquery特效对seo优化了解的不多，只是一些瞎折腾，今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 730前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 728自动为文件添加 utf-8 编码 为了避免编码问题，你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 616jquery特效之前只是用，有些东西没有深入追究。惭愧，好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 619jquery博客这两天在看原生的javascript，看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 598jquery博客最近在看原生javascript，是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 689今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 714隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ...
相关推荐
### CSS文档流与块级元素（block）、内联元素（inline）详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前，我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
### 什么是块元素（block）和内联元素（inline） 在HTML中，元素根据其默认显示方式被分为两大类：块元素（block elements）和内联元素（inline elements）。了解这两种元素的区别对于网页布局和样式设计至关重要。...
* div - 常用块级元素，也是 CSS 布局的主要标签 * dl - 定义列表 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3 级标题 * h4 - 4 级标题 * h5 - 5 级标题 * h6 - 6 级标题 * hr - 水平分隔线 * menu - ...
在CSS布局中，块级元素（Block Element）和行内元素（Inline Element）是两种基本的元素类型，它们之间的区别和联系是理解网页布局的关键。本文将深入探讨这两种元素的概念、特点以及它们如何影响文档流。 块级元素...
Inline element 内联元素通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
在HTML中，元素的布局和显示方式主要分为两种类型：块级元素（Block Element）和内联元素（Inline Element）。这两种元素具有不同的特性，对网页的结构和样式有着重要影响。 **块级元素**是HTML中最基本的构建单元...
- **示例：** 通过`display: inline-block`属性将元素设置为内联块级元素。 #### 三、文档流中的元素行为 **1. 非浮动块级元素：** - **特点：** 每个非浮动块级元素都独占一行。 - **示例：** `<div>`元素。 **2...
不过，顶部和底部的内边距和外边距是无效的，除非通过CSS将其转换为块级或内联块级元素。 3. **常见例子**：`<a>`, `<abbr>`, `<b>`, `<i>`, `<img>`, `<label>`, `<q>`, `<span>`等是典型的内联元素。 **可变元素...
例如，一个`<div>`元素可以通过`display: inline`变为内联元素，而一个`<span>`元素可以通过`display: block`变为块级元素。这种灵活性使得开发者可以根据设计需求调整元素的布局特性。 在严格模式（Strict DTD）的...
在CSS布局中，块级元素（Block-level Elements）和行级元素（Inline Elements）是两种基本的元素类型，它们在HTML文档结构中扮演着至关重要的角色。了解它们的区别和使用方式是创建有效网页布局的基础。 块级元素...
inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）可以当做一个块级元素来...
首先，我们来看两种主要的元素类型：块级元素（block elements）和内联元素（inline elements）。 1. **块级元素**： - 块级元素默认以`display: block`的方式显示，这意味着它们会独占一行，后面的元素会自动换行...
首先，我们需要理解CSS中的三种主要元素类型：块级元素（block-level）、内联元素（inline）和内联块级元素（inline-block）。 1. 块级元素（如`<div>`、`<p>`、`<h1>`等）： - 占满整个容器的宽度。 - 默认情况...
在HTML与CSS中，元素被分为两大类：行内元素（inline element）和块元素（block element）。这两种类型的元素有着不同的显示特性和布局行为，了解它们的区别对于网页设计者来说至关重要。 #### 行内元素（inline ...