当前位置： 移动技术网 > IT编程>网页制作>HTML > 小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）

小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）

2020年08月10日  | 移动技术网IT编程  | 我要评论

行内元素(inline-level)

	行内元素又称内联元素，不能独占一块区域，根据自身内容（文字/图片）大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性，通常用于
	控制页面文本内容。
	
	**特点**
	
	1.总是和相邻的行内元素从左到右排成一排。
	2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效。*（想要垂直方向居中：内容大小=所在区域大小即可）*
	3.默认宽度是其自身内容的宽度。
	4.行内元素仅能容纳其他行内元素或文本。*（特殊：<a>内可以放块级元素但<a>内不可再放链接）*  
	
	常见的行内元素如:<span> <a> <strong> <em> <b> <s> <i> <font>......

行内元素代码举例

行内元素样式举例

块级元素(block-level)

	块级元素会独占一行或多行，其宽高可以任意设置，通常用于搭建网页布局部分，使网页结构更加紧凑合理。
	
	**特点：**
	
	1.每个块级元素均独占一行。
	2.宽度高度可以自定义设置。
	3.默认宽度为所在容器宽度的100%。
	4.可容纳行内元素等其他元素。*(文字类的块级元素不能再放块级元素)*
	
	常见的块级元素如: <div> <p> <ul> <li> <h1-h6>......

块级元素代码举例
块级元素样式举例

行内块元素（inline-block）

	可以理解为特殊的行内元素，像<img>可以设置宽高、对齐等属性的同时又不会独占一行，把这样一类既具有行内元素特点又具有块级元素特点的标签
	称为行内块元素。
	
	**特点：**
	
	1.和相邻的行内元素在同一行，但之间会有空白缝隙。
	2.默认的宽高是其本身内容的宽高。
	3.宽度、高度、行高、内外边距都可自定义设置。
	
	常见的行内块元素如：<img> <input> <select> <textarea> <button> <label>......

行内块元素代码举例
行内块元素样式举例

标签显示模式转换（display）

	当给一个元素设置宽高时无效时，或想让元素显示在一行时，可用display方法来改变标签的显示模式。
	
	块级元素 ----> 行内元素：display:inline;
	行内元素 ----> 块级元素：display:inline;
	块级元素、行内元素 ----> 行内块元素：display:inline-block;

本文地址：https://blog.csdn.net/s2422617864/article/details/107894879

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网