CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。比如:div 与span的显示方式不一样,因为 div是块级元素,会占据一行,而span为行内元素,可多个span放置一行。接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。
块级元素 block
块级元素,顾名思义,该元素呈现“块”状,所以它有自己的宽度和高度,也就是可以自定义width和height,除此之外,块级元素比较霸道,它独自占据一行高度(float浮动除外),一般可以作为其他容器使用,可容纳块级元素和行内元素。块级元素有以下特点:
- 每个块级元素都是独自占一行。
- 元素的高度、宽度、行高和边距都是可以设置的。
- 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%)。
常见块级元素有那些呢?
<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> //定义表格中的行
行内元素 inline
行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。行内元素有以下特点:
- 每一个行内元素可以和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行。
- 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
常见行内元素有以下:
<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> // 定义变量
行内块级元素 inline-block
行内块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元素宽度和高度,也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素,它可以设置高宽以及一行多个。具体特点如下:
- 和其他行内或行内块级元素元素放置在同一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换display
display:block ,定义元素为块级元素
display : inline ,定义元素为行内元素
display:inline-block,定义元素为行内块级元素。
总结
不管块级元素还是行内元素,区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。
- 块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
- 块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
- 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
而行内块级元素又同时拥有块级元素和行内元素的特点。
CSS中的块级元素、行内元素和行内块元素相关推荐
- css实例 css中id/class 详解样式表(外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解)[第一天]
文章目录 css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
- CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局 最外层是是一个div,div里面是 ...
- CSS中块级元素,行内块元素,行内元素的特点
CSS自学笔记 目录 一.什么是元素显示模式 二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素 前言 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
- 5、HTML块级元素及行内元素
在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...
- 网页编程技术二(块级元素和行内标签)
1.块级元素 顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...
- html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符 由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
- Web行内和块级元素 及表格应用
一.转义字符 由<> 包裹的文本 会当做标签去解析 空格 &emsp: ? < .gt < > "我认为这些电影对我来说非常特别.这是令人难以置信的 ...
- 详解块级元素、行内元素、行内块级元素类型、区别及相互转化
1)块级元素 特点: 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大 ...
- HTML基础知识(一):行内元素,块级元素,行内块元素
文章目录 一.html元素分类 二.块元素 三.行内元素 四.行内块元素 五.替换元素和非替换元素 六.元素转换 七.总结 一.html元素分类 html元素:行内元素.块元素.行内块元素 二.块元素 ...
最新文章
- push、pop指令
- 链表问题2——在双链表中删除倒数第K个节点
- 端口保护:如果你不把我当回事,我就会让你好看
- x86汇编语言-从实模式到保护模式----第五章
- 哪些手机支持双wifi?
- np.argmin和argmax
- 描述个人品质常用英语单词一览 常用赞誉之辞语
- navicate备份与还原数据库
- idea配置java环境视频教程_【IDEA】JavaWeb教程--环境搭建
- Xftp6的安装与使用
- 【生物信息学】——Metagenomics宏基因组学分析流程浅谈
- 启动root用户 银河麒麟_麒麟系统使用root权限运行程序
- java tapestry_Java Web 框架 Tapestry
- 对接阿里云号码认证服务H5方案
- Zero-Shot Learing与Attention Machinism
- Unity游戏开发客户端面经——lua(初级)
- VR全景制作的展示方式你了解多少?具体有哪些?
- ENVI软件对Landsat-8数据进行辐射定标、大气校正、提取NDVI、估算植被覆盖度等操作【图说GIS】
- 微信小程序-预览图片识别二维码
- MATLAB:变量类型与赋值