关于block元素和inline元素
呃。。。这个会不会太基础了。最近在复习,所以基础知识也不能够忽略。
根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.html#h-7.5.3):
1. 内容模型:block元素可以包含block元素和inline元素,inline元素可以包含数据和其他inline元素(就是说inline不能包含block)。核心思想就是相比inline元素,block元素构建的结构都“比较大”。
2. 格式:默认,block元素之间有换行,inline元素之间没有。
3. 文本方向:在实现文本方向上,block元素和inline元素有差别。block元素会继承dir属性,inline不会。
原文:
7.5.3 Block-level and inline elements
Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:
- Content model
- Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
- Formatting
- By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.
- Directionality
- For technical reasons involving the [UNICODE] bidirectional text algorithm, block-level and inline elements differ in how they inherit directionality information. For details, see the section on inheritance of text direction.
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. See the section on the effect of style sheets on bidirectionality for more information.
关于block元素和inline元素的更多相关文章
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
随机推荐
- php history.back返回后表单数据丢失的解决办法
js使用history.back返回表单数据丢失的主要原因就是使用了session_start();的原因,该函数会强制当前页面不被缓存.本文章向码农介绍php history.back返回后表单数据 ...
- 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #18 向ext4转换
HACK #18 向ext4转换 ext4可以与ext2/ext3在后台进行互换.这里将介绍从ext2/ext3转换的方法以及转换时的注意事项.转换有两种方法可以将ext2/ext3的磁盘映像作为ex ...
- myeclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法
任何软件快捷键失效99%的原因是跟其他软件的快捷键冲突了,经过检查,是跟搜狗输入法的简繁体切换快捷键Ctrl+Shift+F 冲突了,打开搜狗工具箱中的属性设置: 在属性设置中找到“按键”,将简繁体快 ...
- SignalR (二)
在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下: 1. 创建一个 mvc 4 web 应用程序,并选择 Basic 2. 创建一个 ...
- HTML|CSS之前端入门
知识内容: 1.计算机网络综述 2.web基础 3.HTML与CSS介绍 4.JavaScript与jQuery介绍 一.计算机网络综述 1.什么是计算机网络 计算机网络是指将地理位置不同.具有独立功 ...
- 类unix系统同步目录,却不同步目录中文件
rsync -av --del -f '+ */' -f '- *' src/ dst/;用此条命令即可同步同主机间不同目录到一个位置,或是同步道不同主机同位置. 或是用以下命令: ssh 10.18 ...
- sqoop1的安装以及数据导入导出测试
下载 wget http://mirror.bit.edu.cn/apache/sqoop/1.4.7/sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz 解压 tar -zxf ...
- 使用Apache POI处理excel公式不更新的解决办法
使用poi更新excel时,如果单元格A设置了公式,当其依赖的其他单元格填充了值之后,导出的excel中A仍为公式而不是自动计算的值,如图: Paste_Image.png 分值小计没有更新成计算结果 ...
- linux 下常用部分命令
关机 (系统的关机.重启以及登出 ) shutdown -h now 关闭系统() init 关闭系统() shutdown -h hours:minutes & 按预定时间关闭系统 shut ...
- UI5-文档-4.6-Modules
在SAPUI5中,资源通常被称为模块.在这一步中,我们将上次练习中的警报替换为sap.m库中的适当消息Toast.所需的模块可以异步加载. Preview A message toast displa ...