块级元素和行内元素的区别以及行内块元素

块级元素和行内元素的区别以及行内块元素

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其 设置宽度高度对齐等属性,常用于网页布局和网页结构的搭建。 霸道

常见的块元素有<h1>~<h6><p><div><ul><ol><li>等,其中<div>标签是最典型的块元素。

  <dl>,<dt>,<dd>,<table>,<tbody>,<td>,<th>,<tr>,
  <fieldset>定义一个框架集,<form>,<hr>,
  <legend>元素为 fieldset 元素定义标题,
  <pre>,<thead>,<address>,<caption>,
  • 块级元素的特点:

(1)总是从新行开始

(2)高度,行高、外边距以及内边距都可以控制。

(3)宽度默认是容器的100%

(4)可以容纳行内元素和其他块元素。

行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

常见的行内元素有<a><span><strong><b><em><i><del><s><ins><u>、等,其中<span>标签最典型的行内元素。

<img>,<input>,<br>,<label>,<select>,<textarea>
  • 行内元素的特点
    (1)和相邻行内元素在一行上。

    (2)高height、宽width无效,可以设置line-height,但水平方向的padding和margin可以设置,垂直方向的无效

    (3)默认宽度就是它本身内容的宽度。

    (4)行内元素只能容纳文本或则其他行内元素,行内元素不能包含块级元素。(a特殊 a里面可以放块级元素 )

注意:

  1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素,
    同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
  2. 链接里面不能再放链接。
  3. a里面可以放块级元素

块级元素和行内元素区别

  • 块级元素的特点:
    (1)总是从新行开始
    (2)高度,行高、外边距以及内边距都可以控制。可以设置margin和padding任意方向
    (3)宽度默认是容器的100%
    (4)可以容纳内联元素和其他块元素。

  • 行内元素的特点:
    (1)和相邻行内元素在一行上。
    (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
    (3)默认宽度就是它本身内容的宽度。
    (4)行内元素只能容纳文本或则其他行内元素。

行内块元素(inline-block)
(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙

在行内元素中有几个特殊的标签——<img/><input /><td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
  • 行内块元素的特点:
    (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
    (2)默认宽度就是它本身内容的宽度。
    (3)高度(height),行高(line-height)、外边距(margin)以及内边距(padding)都可以控制。

标签显示模式转换 display

  • 行内:display:inline;
  • 行内:display:block;
  • 行内元素转换为行内块: display: inline-block;

例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;  
	}
	span {
		width: 100px;
		height: 100px;
		background-color: purple;
	}
	input {
		width: 300px;
		height: 25px;
	}
	</style>
</head>
<body>
	<div>123</div>
	<div>12345</div>
	<span>abc123123123</span>
	<span>abc</span>
	<span></span>
	<input type="text">
	<input type="text">
</body>
</html>

块级元素和行内元素的区别以及行内块元素_第1张图片
转换模式:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		display: inline;   /*把块级元素转换为行内元素*/
	}
	span {
		width: 100px;
		height: 100px;
		background-color: purple;
		display: block;   /*把行内元素转换为块级元素*/
	}
	a{
		width: 100px;
		height: 100px;
		background-color: skyblue;
		display: inline-block;   /*把行内元素转换为行内块元素*/
	}
	</style>
</head>
<body>
	<div>123</div>
	<div>12345</div>
	<div>12367</div>
	<span>abc1</span>
	<span>abc2</span>
	<span>abc3</span>
	<a href="#">百度1</a>
	<a href="#">百度2</a>
	<a href="#">百度3</a>
	<a href="#">百度4</a>
</body>
</html>

块级元素和行内元素的区别以及行内块元素_第2张图片
如果涉及侵权情联系删除,谢谢!

你可能感兴趣的:(块级元素和行内元素的区别以及行内块元素)