今天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 953前端开发过程中需要不断学习，不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 637不断学习，对前端开发来说很是重要，况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 660现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 697习惯性的早起，星期天睡不着啊，估计这个是前端开发的职业病，落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1047jquery博客之前代码插件好好的，最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 743有时候，我们的css样式表中字体乱码，很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH（swf文件）的html代码
2012-10-26 09:44 836记得jquery博客从学校出来，走上这条前端开发这不归路，就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 716jquery博客继续折腾shopex纠结了，老是出现无法安装， ... -
jquery简单attr用法
2012-10-24 11:39 780之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 908又是一个周末，jquery特效继续折腾我那discuz论坛，我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 658战斗月，7月即将结束，回首望去，jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 842今天晚上是jquery博客连续加班的最后一个晚上了，明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 589jquery特效对seo优化了解的不多，只是一些瞎折腾，今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 692前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 699自动为文件添加 utf-8 编码 为了避免编码问题，你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 587jquery特效之前只是用，有些东西没有深入追究。惭愧，好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 593jquery博客这两天在看原生的javascript，看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 570jquery博客最近在看原生javascript，是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 634今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 678隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ...
相关推荐
CSS文档流与块级元素(block)、内联元素(inline)
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
Inline element 内联元素通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）可以当做一个块级元素来...
内联块状元素（inline-block） 块状元素 标签独自占据一行，相邻块状元素不会并列显示，且它的顺序是自上而下的排列； 在网页中以块的形式显示为矩形区域； 所有块状元素都可以定义自己的宽度和高度； 作为其他元素...
文章目录一、float浮动二、position定位 今天来谈谈网页设计中的...前几篇文章中都提到了块级（block）标签和内联（inline）标签，其实这些标签就是所谓的块级元素和内联元素。常见的都有以下几种， 块级元素有 div、
在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，它可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。本文向大家描述一下CSS属性...
block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示...
为了弥补inline和block的不足，又扩充了inline-block属性； inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6...
1 内联元素（inline-element）和块元素（block element）分别有哪些 常见内联元素（行内元素）有a、b、span、i 、em、input、select 、img等 常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等 2 浮动相关...
Float 属性可以使得元素脱离普通的文档流，并且可以产生非凡的布局特性。需要注意的是，Float 属性只能应用于块级元素，所以在应用 Float 之前，需要将 Span 元素设置为块级元素。 通过设置 display 属性或 float ...
inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 浮动的目的： 就是要打破...
内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： ; margin-right:0.5in">这一行被增加了左右的外补丁<p> 样式表语法 (CSS Syntax) Selector { ...
但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？ <meta charset="utf-8"/> <style> div{ width: 100px; height: 100px; border:1px solid red; display: inline-block; } ...
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...