块元素与行内(内嵌)元素的区别

原文连接http://www.jb51.net/css/468282.html

block(块)元素的特点:

①总是在新行上开始,相当于每个块元素默认有个换行符;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素

inline元素的特点:

①和其他元素都在一行上  默认没有换行符所以在一行上可以显示多个行内元素;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素

注意:以上的块元素和行内元素都可以通过display改变显示方式

块元素与内联元素的区别?

1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。

2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。

3.块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变。

(这上面的区别,指的是默认情况下的,不包括CSS的刻意控制。也就是说当使用css控制时,块元素和内联元素的属性差异会越来越小。)

块元素(block element)

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)
  • noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  • ol - 排序列表
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

内联元素(inline element)

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

  • applet - java applet
  • button - 按钮
  • del - 删除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 图片区块(map)
  • object - object对象
  • script - 客户端脚本

文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。

内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><)。

浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准,其实它不是。

基于文档流, 我们可以很容易理解以下的定位模式:

相对定位, 即相对于元素在文档流中位置进行偏移。 但保留原占位。

绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。

固定定位, 即完全脱离文档流, 相对于视区进行偏移

原文地址:https://www.cnblogs.com/lichihua/p/8989910.html

时间: 2024-08-29 06:50:56

块元素与行内(内嵌)元素的区别的相关文章

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障

块元素和内嵌元素

块元素和内嵌元素的特征  块的特征: 1,默认独占一行 2,没有宽度限定时,默认撑满一行 3,支持所有css命令 内嵌(内联,行内)元素的特征: 1,同排可以继续跟同类的标签 2,内容撑开宽度 3,不支持宽高 4,不支持上下的margin 5,代码换行被解析 块元素和内嵌元素的转换 display display:inline-block 特征: 1 块在一行显示 2 行内属性标签支持宽高 3 没有宽高的时候内容撑开宽度

(转)html块级元素与行内元素-哪些是块级哪些是内联对象

块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如 果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想 要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和 css based layout从一般使用者(不包括视力障碍者.盲人等

html块级元素和行内元素

块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者.盲

web - 块元素和内嵌元素的特征

块: 1.独占一行 2.支持所有的样式 3.不设置宽度的时候,宽度撑满整行 常用的快标签有: div,section,header,nav,footer,article,aside,ul,ol,li,dl,dt,dd,h1~h6,p, 内嵌: 1.多个内嵌元素可以在一行显示 2.不支持宽高,对上下的margin 3.宽度由内容撑开 4.代码换行会被解析 常用内嵌标签有 : span,strong, a , em inline-block : 1.多个设置为inline-block的块元素可以在一

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

块级元素与行内元素(内联元素)的区别和联系

在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element).那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念.块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其 他的四方块,并可以呈现在页面上任何地方.默认情况下块元素,是独占一行的.常见的块元素:div.h1-h6标题.form(只能用来容纳其他块元

内嵌元素、块元素、内联块的区分以及内嵌元素的问题

那么什么是块元素,什么是内嵌元素他们都有什么特征呢请看下面的代码? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一.块的特征 1.默认独占一行 2.没有宽度时,默认撑满一排 3.支持所有css命令 1.无默认样式: <div ><nav><section><head