元素显示模式

一、块级元素和行内元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级元素和行内元素</title>
	<style type="text/css">
		div {
			color: red;
			width: 300px;
			height: 300px;
			background-color: pink;
		}

		span {
			color: red;
			width: 100px;
			height: 300px;
			background-color: green;
		}

		input {
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
<!-- 
	块级元素:
	1、总是从新行开始;
	2、高度、行高、外边距及内边距都可以控制;
	3、默认宽度是容器的100%;
	4、可以容纳内联元素和其它块元素;
-->
	<div>123</div>
	<div>456</div>
<!-- 
	行内元素:
	1、和相邻行内元素在一行上;
	2、高宽无效,但水平方向的padding和margin可以设置,垂直方向的无效;
	3、默认宽度就是它本身的内容的宽度;
	4、行内元素只能容纳文本或其它行内元素;
-->
	<span>giserDev</span>
	<span>黄晶谛</span>
<!-- 
	行内块元素:<img /> <input /> <td></td>
	1、和相邻行内元素在一行上,但之间会有间隙;
	2、默认宽度就是它本身的内容的宽度;
	4、高度、行高、内边距及外边距都是可以控制的;
-->
	<input type="text" />
</body>
</html>

二、显示模式转换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示模式转换</title>
	<style type="text/css">
		div {
			width: 300px;
			height: 100px;
			background-color: blue;
			display: inline; /* 把块级元素转为行内元素 */
		}

		span {
			width: 300px;
			height: 100px;
			background-color: green;
			display: block; /* 把行内元素转为块级元素 */
		}

		a {
			width: 300px;
			height: 100px;
			background-color: pink;
			display: inline-block; /* 把行内元素转为行内块元素 */
		}
		
	</style>
</head>
<body>
	<div>123</div>
	<div>123</div>
	<div>123</div>

	<span>456</span>
	<span>456</span>
	<span>456</span>

	<a href="#">baidu</a>
	<a href="#">baidu</a>
	<a href="#">baidu</a>
	<a href="#">baidu</a>
	<a href="#">baidu</a>

</body>
</html>
上一篇:CSS padding


下一篇:将footer固定在页面底部的实现方法