html块级元素和行级成分的界别和认得,行内成分和块成分

时间: 2019-05-12阅读: 298标签: 元素行内、块状元素区别:

***行内元素和块元素区别:

HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行,如p,ul,form,div等标签元素。行内元素:元素在一行内水平排列,高度由元素的内容决定,height属性不起作用,如span,input等元素

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。


一、块级元素:block element

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

   1.   块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。
DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

         行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

二、行内元素:inline element

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

    2.  块级元素可以设置width,height属性.

也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。

行内、块状元素特点

    行内元素设置width,height属性无效.

三、block(块)元素的特点 ①、总是在新行上开始;②、高度,行高以及外边距和内边距都可控制;③、宽度缺省是它的容器的100%,除非设定一个宽度。④、它可以容纳内联元素和其他块元素

在标准文档流里面,块级元素具有以下特点:①总是在新行上开始,占据一整行;②高度,行高以及外边距和内边距都可控制;③宽带始终是与浏览器宽度一样,与内容无关;④它可以容纳内联元素和其他块元素。行内元素的特点:①和其他元素都在一行上;②高,行高及外边距和内边距部分可改变;③宽度只与内容有关;④行内元素只能容纳文本或者其他行内元素。

    块级元素即使设置了宽度,仍然是独占一行.

四、inline元素的特点 ①、和其他元素都在一行上;②、高,行高及外边距和内边距不可改变;③、宽度就是它的文字或图片的宽度,不可改变 ④、内联元素只能容纳文本或者其他内联元素

不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用

    3.   块级元素可以设置margin和padding属性.

对行内元素,需要注意如下

块级元素有哪些?address 定义地址caption 定义表格标题dd 定义列表中定义条目div 定义文档中的分区或节dl 定义列表dt定义列表中的项目fieldset 定义一个框架集form 创建 HTML 表单h1 定义最大的标题h2定义副标题h3定义标题h4定义标题h5定义标题h6定义最小的标题hr创建一条水平线legend元素为 fieldset 元素定义标题li标签定义列表项目noframes为那些不支持框架的浏览器显示文本,于 frameset 元素内部noscript定义在脚本未被执行时的替代内容ol定义有序列表ul定义无序列表p标签定义段落pre定义预格式化的文本table标签定义 HTML 表格tbody标签表格主体(正文)td表格中的标准单元格tfoot定义表格的页脚(脚注或表注)th定义表头单元格thead标签定义表格的表头tr定义表格中的行行内元素有哪些?a标签可定义锚abbr表示一个缩写形式acronym定义只取首字母缩写b字体加粗bdo可覆盖默认的文本方向big大号字体加粗br换行cite引用进行定义code定义计算机代码文本dfn定义一个定义项目em定义为强调的内容i斜体文本效果img向网页中嵌入一幅图像input输入框kbd定义键盘文本label标签为 input 元素定义标注(标记)q定义短的引用samp定义样本文本select创建单选或多选菜单small呈现小号字体效果span组合文档中的行内元素strong语气更强的强调的内容sub定义下标文本sup定义上标文本textarea多行的文本输入控件tt打字机或者等宽的文本效果var定义变量可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素button按钮del定义文档中已被删除的文本iframe创建包含另外一个文档的内联框架(即行内框架)ins标签定义已经被插入文档中的文本map 客户端图像映射(即热区)objectobject对象

     行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

注意:块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

    4.  块级元素对应于display:block.

五、常见的块状元素

         行内元素对应于display:inline.

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 – 无序列表

标准文档流里面,块级元素具有以下特点:

六、常见的内联元素

      1. 总是在新行上开始,占据一整行;

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 – 下划线

      2. 高度,行高以及外边距和内边距都可控制;

七、行内元素与块级元素有什么不同?

      3. 宽带始终是与浏览器宽度一样,与内容无关;

区别一:
块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

      4. 它可以容纳内联元素和其他块元素。

区别二:
块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高

行内元素(内联元素)的特点:

区别三:
块级:块级元素可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

      1. 和其他元素都在一行上;

区别四:
块级: display:block;
行内: display:inline;
可以通过修改display属性来切换块级元素和行内元素

      2. 高,行高及外边距和内边距部分可改变;

      3. 宽度只与内容有关;

      4. 行内元素只能容纳文本或者其他行内元素。

不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用

1.常见的块元素:

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 - 非排序列表

2.常见的内联元素:

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 - 定义变量

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:html块级元素和行级成分的界别和认得,行内成分和块成分

相关阅读