块级元素与行内元素区别

与行级元素相比,块级元素具有如下特点:
(1)、前后换行显示,块级元素比较“霸道”,默认状态下独占一整行。
(2)、块级元素常用作容器,即可以再“容纳”其它块级元素和行级元素,而行级元素一般用于组织内容,即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度,可以通过设置块级元素的width、height属性来控制。

从页面布局的角度,块级元素又可细分基本块级元素和常用于页面布局的块级元素。
基本的块级元素有:
1).标题标签<h1>~<h6>:表示一段文字的主题,并支持多层次的内容结构。
2).段落标签<p> :表示一段文字的内容。
3).水平线标签<hr />:表示一条水平线。

常用于布局的块级元素
1).有序列表<ol>-<li>:表示多个并列的列表项,它们之间有明显的先后顺序。
2).无序列表<ul>-<li>:表示多个并列的列表项,但它们之间没有先后顺序。
3).定义列表<dl>-<dt>-<dd>:表示描述某个术语或产品的定义或解释。
4).表格<table>:表示用于描述一个表格,它使用规整的数据显示。
5).表单<form>:表示用于描述需要用户输入的页面内容。
6).分区<div>:表示用于组织小区块的内容。为了方便管理,数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分,它相当于一个大的容器,可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
在实际开发中,<div>常用来进行分区,ul-li或ol-li实现无序或有序的项目列表,dl-dt-dd实现图文混编,table-tr-td实现规整数据的显示,由此,在页面局部布局中,形成了如下四种常用的局部块状布局结构:
(1)、div-ul(ol)-li:常用于分类导航或菜单等场合
(2)、div-dl-dt-dd:常用于图文混编场合
(3)、table-tr-td:常用于规整数据的显示场合
(4)、form-table-tr-td:常用于表单布局的场合

行级元素
行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后,往每个小区块添加内容时,就需要使用到行级标签.

行级标签:类似文本的显示方式,按“行”逐一显示,常用的行级标签有:

(1)、图像标签<img>:表示用于在网页中显示图片.
(2)、超链接标签<a>:
(3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
(4)、换行标签<br />:表示强制换行显示.
(5)、输入框标签<input>
(6)、多行文本域标签<textarea>

时间: 2024-08-09 10:35:38

块级元素与行内元素区别的相关文章

【CSS3】块级元素与行内元素的区别

一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 块级元素 总是在新行上开始,占据一整行: 高度,行高以及外边距和内边距都可控制: 宽带始终是与浏览器宽度一样,与内容无关: 它可以容纳行内元素和其他块元素. 二.行内元素转换为块级元素 display

关于块级元素与行内元素

块级元素 块级元素拥有以下的几个特征: 如果宽度未设置,则元素会自动适应父元素的宽度 可以拥有外边距与内边距 如果高度未设置,则元素会自动适应子元素的高度(假设它们没有设置浮动与定位) 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位) 忽略vertical-align属性 所以,对于块级元素来说,我们没有必要设置width:100%来让它的宽度撑满父元素,而且那样做的话还有可能会对日后的维护带来麻烦. 而且,对于上述第四点来说,我们没有必要对块级元素设置"clear"

块元素和行内元素

块元素: 1.占用整行宽度 2.前后都有换行符 3.拥有完整的盒模型结构 行内元素: 1.根据内容决定占用宽度 2.前后不换行 3.不拥有完整的盒模型结构 补充: warning: 1.一个内联元素设置为display:block是不允许有它内部的嵌套块元素. 2.块级元素可以包含行内和块级,但行内元素不能包含块级元素. 3.行内元素设置width无效,height无效,可以设置line-height, margin上下.padding上下无效.(水平方向排列)

深度理解CSS中块级元素与行内元素的区别(个人易错点)

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

盒子模型,块级元素和行内元素特性与区别

盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出,两种盒子模型都包括padding,margin,border,content,但是ie盒子模型的content包括border和padding. 一个例子 一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px.高为 50px. 标准盒子模型 盒子需要占据的位置为:宽 20

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

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

块级元素和行内元素的区别,常见的块级元素和行内元素有哪些

一般来说,html的元素分为两种,即块级元素和行内元素. 块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素. 行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素.行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制. 常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol

块级元素和行内元素区别

一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二.行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列. 块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列.块级元素从新行开始,结束接着一个断行. 2.块级元素可以包含行内元素和块级元素.行内元素不能包含块级元素,只能包含文本或者其它行内元素. 3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width

块级元素和行内元素

块级元素和行内元素的区别 1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度.   行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.块级元素是可以设置宽高,而行内元素不可以. 3.块级元素可以设置外边距(margin),内边距(padding).   行内元素水平方向的margin-left; margin-right; padding-left; padding-right;