标签类型：
<html>
<head>
<meta charset="UTF-8">
<title>标签类型</title>
<style>
span{
color: red;
/*display: none; 可以隐藏标签*/
/*visibility: hidden; 也可以隐藏标签 但标签的位置仍然被占据着*/
}
strong,i,b,a{
/*display 属性规定元素应该生成的框的类型*/
/*display: block;把行元素变为块元素*/
width: 100px;
height: 200px;
color: red;
/*这类元素会占据尽可能少的空间，并且会一个紧贴一个
从左往右 从上往下排列，它们不受width、height样式的影响
即这些样式对它们无效的 在窗口变化时，它们的大小不变
但会自动换行 它们叫行元素（标签）*/
}
img,div,section,p,h1,header,aside{
display: inline;
/*width: 400px;
height: 200px;*/
border: 1px solid blue;
color: palegreen;
max-width: 800px;
/*这类标签会独占一行，哪怕它们根本用不了右侧的空间
它们受width、height控制 在窗口变化时，不设定宽和高时
它们会跟着变窄或变宽 除非设置了width max-width min-width
它们纵向上也会尽可能少的占用空间 它们叫做块元素（标签）*/
}
/*display:inline 即行元素
display:block 即块元素
display:inline-block 即行内块元素*/
/*除了行标签、块标签之外，还有一个标签很特殊
它兼有两者的特点 即在行内，也会受到width和height的控制
这类标签叫做行内块元素（标签） img */
/*还有一些元素不在这些类别中，或是很难分类 如script link title td等*/
</style>
<body>
<img src="lry.jpg" alt="">
<span>HTML5</span>
<strong>从广义上说</strong>
<i>前端开发技术的总称</i>
<b>包含</b>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>的最新内容。
HTML5是移动互联网时代的产物。
<div>HTML</div>
<p>从广义上说是</p>
<section>前端开发技术的总称</section>
<h1>包含</h1>
<header>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>的最新内容。
</header>
<aside>
HTML5是移动互联网时代的产物。
</aside>
</body>
</html>浮动:
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
body{
margin: 0;
}
ul{
margin: 10px;
padding-left: 0;
}
li{
/*浮动之后标签占据的空间最小化 块元素会让出右侧的空间（float:left） 还可以向右浮动
右浮动时 顺序保持不变的话 可以在外面加一个nav标签 将右浮动应用到nav上
浮动与inline-block不同 inline-block会带来小块空白
除非将标签全部紧贴在一起 或者说是在父标签设置font-size为0
子元素在设置font-size的一个大小
浮动标签会影响后续标签 所以有时要清除浮动*/
/*display: inline-block;*/
float: left;
list-style: none;
background-color: #eee;
padding: 6px 15px;
margin-right: 5px;
border-radius: 5px;
}
/*nav{
float: right;
}*/
/*清除浮动的常用技巧*/
.clearfix{
clear: both;
}
/*ul:after{
content: '';
display: block;
clear: both;
}*/
</style>
<body>
<!--<nav>-->
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Java</li>
<li>.NET</li>
<li>NodeJs</li>
</ul>
<div class="clearfix"></div>
<!--</nav>-->
<h1>标题</h1>
<h2>小标题</h2>
</body>
</html>浮动练习：
<html>
<head>
<meta charset="UTF-8">
<title>浮动练习</title>
<style>
body{
margin: 0;
}
footer{
width: 100%;
height: 60px;
box-shadow: 0 0 2px #333;
position: fixed;
bottom: 0;
}
section{
height: 60px;
width: 25%;
float: left;
text-align: center;
border-right: 1px solid #999;
font-size: 40px;
box-sizing: border-box;
}
section:hover{
/*设置文字阴影*/
text-shadow: 0 0 2px #333;
}
</style>
<body>
页面内容。。。
<footer>
<section>♠</section>
<section>♣</section>
<section>♥</section>
<section>♦</section>
</footer>
</body>
</html>