一、 HTML5新增元素
- 以前用div +class的方式来规划页面格式
<div class="header"></div>
<div class="nav"></div>
<div class="article">
<div class="section">新闻中心</div>
<div class="section">郑重生命</div>
</div>
<div class="aside">
<div class="address"></div>
</div>
<div class="footer"></div>
- 现在可以利用 HTML5 的新元素
<!-- HTML5新增元素 -->
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside>
<address>地址</address>
</aside>
<footer></footer>
二、基本单位
- 长度
- px：像素
- em：相对长度单位。相对于当前对象内文本的字体尺寸。比如
nem 就是当前对象内文本的font-size的 px 的n倍 - rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如：
nrem 相对于根类px的n倍。
三、块级元素和行内元素转换
- 块级元素---->行内元素：
style="display:inline;"
<div style="display:inline;" >我是div</div>
- 行内元素---->块级元素
style="display:block;"
<span style="display:block;" >我是span</span>
- 行内元素，但是还需要可以设置宽高，也就是说行内的块如何设置？
display: inline-block;
- display其他应用：隐藏元素
<span style="display:none;" >我是span</span>
注意：只有块级元素才能设置对应的 宽和高 height、width，行内元素设置之后是没有效果的。
四、 文本和字体基本样式
- 字体大小
font-size: 20px;
- 字体
font-family: "Comic Sans MS";
- 缩进
text-indent: 2em;
- 文本对齐方式
text-align: center;
- 文字样式（斜体）
font-style: italic;
- 加粗
font-weight: bold;
- 单词折断换行
word-wrap:break-word;
- 显示省略号的效果设置
overflow:hidden;/*超出的隐藏*/
white-space:nowrap;/*不让换行 直到br*/
text-overflow:ellipsis;/*...的效果（CSS3） */
五、边框背景基本样式
- 设置边框
<table border="1">
//或者
<div class="outer"></div>
.outer{
border:10px solid burlywood;
border-radius: 10px;
}
- 设置边框合并
table{
/*将相邻的边框合并*/
border-collapse:collapse;
}
六、表格和列表
- 表格
<table border="1">
<tr >
<td>小明</td>
<td>第一</td>
</tr>
<tr>
<td>小王</td>
<td>第二</td>
</tr>
</table>
- 列表
- 有序
<ol>
<li>第一</li>
<li>第二</li>
</ol>
- 无序
<ul>
<li>测试1</li>
<li>测试2</li>
</ul>
七、IE独有&CSS HACK （每家浏览器都有自己的特点）
CSS HACK可以理解为对应不同的浏览器去进行适配
CSS HACK.png
