块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 块级元素：独占一行的元素，不能和相邻元素共享一行，例如：h1-h6,p，div,ol,ui,li,pre,table等-->
<h4>我是h4标题字</h4>
<table border="1" cellspacing="0" cellpadding="8">
<tr>
<td>11111</td>
</tr>
<tr><td>2222</td></tr>
</table>
xxxxxxx
</body>
</html>
行内元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 行内元素：能和相邻元素共享一行的元素，例如：span,a,img等
特点：不要对行内元素设置宽和高，设了也没用,宽和高自动适应内容,img除外(它可以设置宽高)
-->
<img src="../img/tly.jpg">
<span style="width: 100px; height:200px; background-color: green;">aaaaaaaaaaa</span>
</body>
</html>
行内元素和块级元素的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 块级元素转换为行内元素:给块级元素设置display:inline
行内元素转换为块级元素:给行内元素设置display:block
-->
<div style="width:200px;height: 100px; background-color: yellow;display: inline;">我是div</div>xxxxx
<span style="width:200px;height: 100px; background-color: yellow; display: block;">我是span</span>
</body>
</html>
行内块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
/* 让多个div排列在同一行，并且宽和高都可以设置 */
display: inline-block;
}
</style>
</head>
<body>
<!-- 行内块级元素：既有行内元素的特点(可以和相邻的行内元素共享一行)，
又有块级元素的特点(可以设置宽和高，以及padding和maring)
将元素设置为行内块级元素：display:inline-block
-->
<span style="width: 100px; height:200px; background-color: green;display: inline-block; ">aaaaaaaaaaa</span>
<span>xxxxxxxxxx</span>
<div style="background-color: #0000FF;">1</div>
<div style="background-color: yellow ;">2</div>
<div style="background-color: green;">3</div>
</body>
</html>
隐藏元素的两种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
把元素隐藏起来，有两种方式：
方式1：给元素设置display属性，值为none,隐藏元素且不会保留元素的物理空间
方式2：给元素设置visibility属性，值为hidden，隐藏元素，但是会保留元素的物理空间
-->
<div style="background-color: #0000FF;width: 100px;
height: 100px;visibility:hidden;">div内的内容</div>
<span>cddfdvvff</span>
</body>
</html>
