本节学习元素的可见性、盒子的各种类型、浮动问题。
元素可见性
visibility的三种属性：①visible即默认可见。②hidden隐藏。③collapse隐藏表格的行与列(有的浏览器不支持)。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS盒模型 下</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是HTML5</div>
111111111111<br>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>@charset "utf-8";
div{
background: silver;
width: 200px;
height: 200px;
/*visibility: hidden;*/
}
table tr:first-child{
/*visibility: hidden;*/
visibility: collapse;
}运行结果： 
元素盒类型
①块级元素(区块)
能够设置元素尺寸，且能隔离其它元素(换行)的元素，如div，p等文档元素。
②行内元素(内联)
不能设置元素尺寸，只能自适应内容，不能隔离其它元素(即不换行)，如span，b等文本元素。
③行内-块级元素(内联块)
能设置尺寸，但不能隔离其它元素(即不换行)，如img。
④隐藏元素
display: none;即可。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS盒模型 下</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是块级元素</div>
前面是块级元素，可以设置背景长度高度，换行
<br>
<span>我是行内元素</span>
前面是行内元素，可以设置背景，尺寸只能自适应内容，不换行
<br>
<img src="img.png">
前面是行内-块元素，可以设置尺寸，但不换行
</body>
</html>@charset "utf-8";
div{
background: silver;
width: 200px;
height: 200px;
}
span{
background: red;
}
img{
width: 200px;
height: 100px;
}运行结果： 
用display转换
①inline行内元素。②block块级元素。③inline-block行内块元素。④none盒子不可见，不占位。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS盒模型 下</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是块级元素，将要转成行内元素</div>
结尾测试
<br>
<span>我是行内元素，将要转成块级元素</span>
结尾测试
<br>
<p>我是块级元素，将要转成行内块元素</p>
结尾测试
<br>
</body>
</html>@charset "utf-8";
div{
background: silver;
width: 200px;
height: 200px;
display: inline;
}
span{
background: red;
width: 200px;
height: 200px;
display: block;
}
p{
background: green;
width: 200px;
height: 200px;
display: inline-block;
}运行结果： 
用float浮动
①left浮动元素靠左。②right浮动元素靠右。③none禁用浮动。
当一个盒子被浮动后，下面的元素就会做堆叠处理，导致元素部分不可见，可以使用clear属性来处理。
用clear清理
①left不受左边浮动干扰。②right不受右边浮动干扰。③both不受两边浮动干扰。④none恢复默认。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS盒模型 下</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="a">我是a</div>
<div id="b">我是b</div>
<div id="c">我是c</div>
</body>
</html>@charset "utf-8";
div{
width: 200px;
height: 200px;
}
#a{
background: maroon;
float: left;
}
#b{
background: green;
clear: left;
}
#c{
background: blue;
float: right;
}运行结果： 