块级元素与行内元素

标准文档流是指在没有CSS干预时各种元素的排列规则。在这种前提下,HTML文档中的元素可以分为两大类:块级元素和行内元素。
1.块级元素(block)独占一行,可以设定元素的宽和高。常见的块级元素有:
* html 文档的类型
* body 文档的内容
* h1-h6 一级标题到六级标题
* p 文章段落
* ul 无序列表
* li 定义列表项目
* ol 有序列表
* dl 定义列表
* dt 定义列表中的项目
* dd 定义列表中定义条目
* pre 定义预格式文本
* blockquote 大段引用
* div 划分区域区块
* figure 标签规定独立的流内容(图像、图表、照片、代码等等)
* video 链接视频
* audio 链接音频
* iframe 内联框架
* table 表格
* caption 表格标题
* thead 表头
* tbody 对表格中的主体内容进行分组
* tfoot 定义表格的页脚(脚注或表注)
* tr 定义表格中的行
* td 定义表格中的标准单元格
* th 定义表格中的表头单元格
* hr 横线
* form 表单
* article 标签的内容独立于文档的其余部分
* section 定义文档中的节
* aside 文档的侧栏
* header 页眉
* footer 页脚
* nav 定义导航链接的部分
* address 定义文档作者或拥有者的联系信息
* fieldset 在周围显示一个细边框的盒子
* legend 放在fieldset的内部,在盒子上加上一个标题
块级元素一般是其他元素的容器,可容纳块级元素和行内元素。

2.行内元素(inline)并排显示,不可以设置宽和高,width*height为auto*auto,高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有:
* a 标签定义超链接,用于从一张页面链接到另一张页面
* b 字体加粗
* strong 字体加粗,语气更强的强调
* br 换行
* abbr 定义缩写
* cite 引用书名、参考文献
* i 强调,斜体显示
* em 语气更强的强调,斜体显示
* q 定义短的引用,如诗歌
* label 标签,起交作用
* select 下拉列表
* small定义小号
* span 跨越多个字符
* sub定义下标文本
* sup定义上标文本
* textarea多行的文本输入控件
行内元素内一般不可以包含块级元素。

在有css干预的情况下,我们通过display属性来改变元素的显示方式。
例如:i是一个行内元素,现在我要把它作为一个视口来显示我的图标,并且后面要跟上名称,就要把它变成一个行内块元素(inline-block),这样既可以设置宽度和高度,又能让它以行内形式显示。
代码如下:
i{
display: inline-block;
width: 20px;
height: 20px;
background: url("img/xxx.jpg");
}

时间: 2024-10-12 16:43:06

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

关于块级元素与行内元素

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

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

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

块元素和行内元素

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

HTML 块级元素与行内元素

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

替换元素和不可替换元素,块级元素和行内元素

替换元素和不可替换元素 1>  替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框.HTML中的<img>.<input>.<textarea>.<select>.<object>都是替换元素.这些元素往往没有实际的内容,即是一个空元素.Example:#1 <img src=”path/to/picture.jpg”/>浏览器根据<img>标签的src属性的值来读取图片信

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

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

块级元素和行内元素

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

(转)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从一般使用者(不包括视力障碍者.盲