- 浏览: 2621811 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
从一个问题说起吧------------div能不能放在p标签里面???
首先还是一个老概念:
- 块级元素---h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等常见
- 内联元素---a,b,br,em,i,img,input,strong,textarea,span,label等常见
他们两个的区别:
- 块级元素一般用来搭建网站架构、布局、承载内容
- 内联元素一般用来在网站内容中的某些细节或者部位,用以“强调、区分样式、上标、下标、锚点”等等。
- 它们可以互相转换。display:inline|block
- 块级元素的特点:每一个块级元素都识从一个新行开始显示,其后的元素需要另起一行。
CSS权威指南上-------------
任何不是块级元素的可见元素都是内联元素。
好了 简单地说了一下块级元素和内联元素,下面我们开始我们的重点-----嵌套规则:
- 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:<div><h2></h2><span></span></div>)
最后附上图----来源于网络(感谢原作者)
扩展阅读:
发表评论
-
css 面试题画三角
2017-02-27 16:12 1165如何画三角? .test{ wid ... -
X-Frame-Options
2014-08-16 18:15 1223最近客户端内嵌的页面发现了 X-Frame-Opt ... -
HTML实体字符列表
2014-08-08 17:55 934最近在研习he这个Node包,里面提到了一些不错 ... -
object各标签的参数和值
2013-11-09 15:06 1297相比而言,现在flash object用的相对不 ... -
Function与Object
2013-10-21 16:20 1313先看一段代码: Function in ... -
关于html的压缩
2013-07-19 20:49 1418本文简单记录关于html压缩相关的问题: ... -
再谈面试题系列
2013-06-18 11:18 1321收录一个不错的case: {}.t ... -
面试题系列之不一样的P
2013-05-08 16:13 1312以下代码: <html> ... -
又是null
2013-04-25 11:46 0null > 0 ... -
取最大最小值
2013-04-12 16:17 0http://www.cnblogs.com/ ... -
判断鼠标移入的方向
2013-04-12 14:36 0本文主要来自:http://www.cnbl ... -
mouseover与mouseenter的区别
2013-06-05 14:29 1636mouseover与mouseenter的区 ... -
坑爹的逗号运算符
2013-03-29 17:58 1739先来看一个小题: //返回多少? x ... -
seo相关的meta设置revisit-after
2013-02-27 13:46 1788revisit-after ----- ... -
一些不好的写法汇总
2013-02-19 14:29 1161下面是一种比较多余的“高级”写法: / ... -
前端面试题系列之length
2013-01-29 11:43 1231举出含有length属性的对象? window ... -
关于function的length
2013-01-21 12:12 1387问题:Function对象的length是干嘛的? ... -
IE下stack overflow的可能原因
2013-01-18 18:31 1377收集了一些网上出现这种问题的原因: ... -
介绍一下nofollow
2013-01-16 15:22 1031问题: <a rel="nofol ... -
删除数组的偶数项
2013-01-06 17:04 4055问题:要删除指定数组中偶数索引的item? ----- ...
相关推荐
通过本文的介绍,我们了解了文档流的基本概念以及块级元素和内联元素的区别。这些基础知识对于理解和掌握CSS布局至关重要。在实际开发中,灵活运用这些元素的不同特性可以帮助我们构建更加美观和实用的网页布局。
### CSS文档流与块级元素、内联...理解和掌握CSS文档流以及块级元素与内联元素的概念,对于构建灵活、响应式和语义化的网页布局至关重要。通过合理利用这些元素的特性和CSS属性,可以创建出既美观又实用的网页设计。
可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...
理解块级元素和内联元素的概念对于编写高效、结构化的HTML代码至关重要。在实际开发中,开发者经常通过CSS来调整元素的显示方式,比如将内联元素转换为块级元素,或者让块级元素在一行内显示,以此来实现复杂的布局...
内容偏门,适合打基础,补足基础的同志们
CSS文档流与块级元素(block)内联元素(inline)那点事
2. 内联元素内部可以包含块级元素,虽然不常见,但这样做可以改变内联元素的高度,比如在一个`<a>`标签中嵌套一个`<div>`。 了解这些基本概念后,开发者可以更有效地利用HTML和CSS来构建网页,实现所需的布局效果。...
块级元素和内联元素的主要区别在于它们在页面布局中的表现形式。块级元素如`<div>`, `<h1>`, `<p>`等,会自然地在垂直方向上产生新的行,而内联元素如`<span>`, `<a>`, `<em>`等则保持在当前行内,允许文本和其他...
在XHTML的嵌套规则中,块级元素可以包含内联元素和其它块级元素,而内联元素只能包含内联元素。例如,一个块级元素可以包含一个或多个块级元素,而一个块级元素内部可以包含、等内联元素,但不能直接包含另一个。...
html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念: 块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)...
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
html-内联元素和html-块级元素概述及区别.doc
在HTML中,元素被分为不同的类别,其中最重要的两类是块级标签(Block-level elements)和内联标签(Inline elements)。这两种标签决定了元素在网页布局中的表现和行为。 块级标签,顾名思义,它们像一个个独立的...
Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
### 什么是块元素(block)和内联元素(inline) 在HTML中,元素根据其默认...理解块元素和内联元素的概念及其应用是网页设计的基础,通过合理利用这两种元素的不同特性,可以有效地控制网页布局和内容呈现的方式。
总的来说,虽然`<li>`元素的行为介于块级和内联元素之间,但在大部分现代浏览器中,它被归类为一种特殊的块级元素,其默认`display`值为`list-item`。理解这一点对于编写响应式的、跨浏览器兼容的HTML和CSS代码至关...