今天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 988前端开发过程中需要不断学习,不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 656不断学习,对前端开发来说很是重要,况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 698现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 736习惯性的早起,星期天睡不着啊,估计这个是前端开发的职业病,落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1094jquery博客之前代码插件好好的,最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 782有时候,我们的css样式表中字体乱码,很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH(swf文件)的html代码
2012-10-26 09:44 859记得jquery博客从学校出来,走上这条前端开发这不归路,就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 762jquery博客继续折腾shopex纠结了,老是出现无法安装, ... -
jquery简单attr用法
2012-10-24 11:39 817之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 943又是一个周末,jquery特效继续折腾我那discuz论坛,我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 700战斗月,7月即将结束,回首望去,jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 877今天晚上是jquery博客连续加班的最后一个晚上了,明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 643jquery特效对seo优化了解的不多,只是一些瞎折腾,今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 720前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 720自动为文件添加 utf-8 编码 为了避免编码问题,你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 611jquery特效之前只是用,有些东西没有深入追究。惭愧,好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 613jquery博客这两天在看原生的javascript,看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 594jquery博客最近在看原生javascript,是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 658今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 706隔行换色在显示数据的时候用的比较多。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盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block 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 ...