行级块级元素
2016-11-22 本文已影响0人
鸥宝要有春天
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行级块级标签</title>
</head>
<body>
<!-- 1.宽高
宽度 width:100px;
高度 height:200px;
-->
<!-- 2.行块级元素的区别
一.块级标签独占一行
行级元素默认区域为文本区域，由文本撑开
二.块级标签可以设置宽和高
行级标签不可以设置宽和高
三.块级标签display：block;
行级标签display:inline;
四.行级块级标签是可以通过display属性来相互切换。
五.行级标签可以处于同一行
块级标签不能处于同一行
不展开显示，不显示这个标签
display:none;
-->
<span style="width: 100px;height: 100px;/*display: block;*/ background-color: red ">我是一个span</span>
<div style="height: 100px; background-color: green ">1</div>
<div style="width: 150px;height: 150px; background-color: yellow">2</div>
<div style="width: 200px;height: 200px; background-color: blue ">3</div>
</body>
</html>
