block 和 inline 的区别是?
作者:棕熊 来源:棕熊@Think Fast 发布时间:2009-12-08 13:00:00
在讲样式表开发管理之前,我想插播一个小知识。前几天看web标准设计组里,看到龍佑康同学问到关于 block 和 inline 的区别。记得以前也经常会有人问这样的问题,国内的论坛也好,国外的论坛也好,似乎大家都会比较疑惑这两者究竟是用来干什么的。想想其实好多人都会在这里犯一些比较常见错误,所以干脆就开一篇文章专门讲讲 block 和 inline 吧。
- 讲表现之前先要讲概念
这里我要强调一下,概念在前端开发中是很重要的啦~
可能很多人都觉得,随便搞个样式,左摆摆右弄弄,能用就行了,但是实际上,很多情况都会有一些非常棘手的状况。对于这些状况,你需要有应对。应对的方法取决于很多因素,其中一个是灵感,还有一个就是对概念深入的理解了。
这里,我们要明确的概念是——什么是 block, 而什么又是 inline 呢?
其实,金光闪闪bling bling的规范里,在三个完全不同的地方提到了block和inline的概念。或许这个就是为什么这么多人都会感到confused 的原因吧=v=
- Block-level Elements VS Inline Elements
第一处讲到block和inline概念的地方是在 HTML 的规范中。确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素):
所有允许被 BODY 元素包含的元素,要么是块级的;要么是内联的;要么既可以算作块级的,也可以算作内联的。但是绝对不存在一个能被BODY包含,但即非块级,又非内联的元素。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素,既可以作为块级元素,也可以作为内联元素。
那么块级元素和内联元素具体有什么区别呢?具体表现在以下几个方面:
一般来说块级元素可以包含块级元素和内联元素;但内联元素只能包含内联元素。要注意的是,每个特定的元素,能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。
比如 P 元素,只能包含内联元素,而不能包含块级元素。
1: <!-- 这样做是错误的 -->
2: <p><div>一段文字</div></p>
3:
4: <!-- 这样才是王道 b=v= -->
5: <p><span>一段文字</span></p>
另一个区别是在显示上。块级元素通常被现实为独立的一块,前后都会和换一行;内联元素则前后不会产生换行,一系列内联元素都在一行内显示。但是,最终决定页面显示的是样式表,而非元素本身。这条规则的制定,估计多半是为了让那些先于规范出现的浏览器能自圆其说而已
比如我们知道,TABLE 元素的默认显示布局其实是用一套独特的 display: table 规则;而 BR 元素,根本本身就是个换行;哪怕一个DIV,都能用样式表直接指定它 display: inline,所以这条规则也根本等于没用。
那么本质的区别呢?其实最本质的区别在于——在 Strict 的DTD下,BODY 元素只能包含块级元素,而不能包含内联元素。或许你要问,不是说BODY包含的元素不是块级就是内联么?怎么没有内联了?很简单——因为在Transitional 的DTD里,BODY也是可以包含内联元素的
大家来看具体例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Block-Level vs Inline Demo</title>
</head>
<body>
<!-- 这样做是错的 -->
<img src="/SomeImage.png" title="an image" alt="an image" />
<!-- 一定要这样做才可以哟 -->
<p><img src="/SomeImage.png" title="an image" alt="an image" /></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Block-Level vs Inline Demo</title>
</head>
<body>
<!-- 换了个DTD就都OK了 -->
<img src="/SomeImage.png" title="an image" alt="an image" />
<p><img src="/SomeImage.png" title="an image" alt="an image" /></p>
</body>
</html>
猜你喜欢
- 示例代码如下:#!/usr/bin/python#-*- coding: utf-8 -*-import matplotlib.pyplot
- 功能1: 爬取西拉ip代理官网上的代理ip环境:python3.8+pycharm库:requests,lxml浏览器:谷歌IP地址:htt
- 引入:if-else的作用,满足一个条件做什么,否则做什么。if-else语句语法结构if 判断条件:要执行的代码else:要执行的代码判断
- Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前
- python中docx库的简介python-docx包,这是一个很强大的包,可以用来创建docx文档,包含段落、分页符、表格、图片、标题、样
- 使用tkFileDialog实现文件选择、保存和路径选择概述看了下Tkinter的文档,对于Pop-up dialog有三类,现在用到的是t
- 一. 问题:在写调用谷歌翻译接口的脚本时,老是报错,我使用的的是googletrans这个模块中Translator的translate方法
- Django教程Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Djan
- Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制。它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避
- 1、前言在Python中元组是一个和列表非常类似的数据类型,不同之处就是列表中的元素可以修改,而元组之中的元素不可以修改。2、定义和使用元组
- 正在看的ORACLE教程是:Oracle数据安全面面观。
- 本文实例讲述了python使用urllib2提交http post请求的方法。分享给大家供大家参考。具体实现方法如下:#!/usr/bin/
- 一.链接打开方式1、新窗口打开优点:用户点链接的时候,当前浏览的内容不会被替换,不需要通过前进、后退去看自己看过的内容;缺点:访问一会,就会
- 本文实例讲述了Python Web框架之Django框架文件上传功能。分享给大家供大家参考,具体如下:上传方式:- Form表单上传文件-
- 一、IE透明度问题在IE的高度超过某一阀值时,会产生透明度不时失效的问题,这现象比较奇怪,(会有的时候全黑,有的时候全白)你有可能无法复现。
- 序 言哈喽兄弟们,好久不见!最近实在太忙了,所以又双叒叕断更了~表弟大学快毕业了,学了一个学期Python居然还不会写学生管理系统,真的给我
- W3C终于发布了第一个HTML5草案,大家还沉溺在HTML2XHTML转换的快乐和痛苦中时,却又突然发现,HTML5和XHTML2,到底谁是
- 1.首先在Xshell上通过conda创建新的虚拟环境2.此时在 /home/y210101004/.conda/envs下多了刚
- 开发堡垒机之前,先来学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作安装paramiko模块pip3
- mysql在5.1之后增加了存储过程的功能, 存储过程运行在mysql内部,语句都已经编译好了,速度比sql更快. 存储过程与mysql相当