一、 HTML5新增元素

• 以前用div +class的方式來規(guī)劃頁面格式

    <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>

• 現(xiàn)在可以利用 HTML5 的新元素

<!-- HTML5新增元素 -->
<header></header>
<nav></nav>
<article>
    <section></section>
</article>
<aside>
    <address>地址</address>
</aside>
<footer></footer>

二、基本單位

• 長度
  • px：像素
  • em：相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。比如n em 就是當(dāng)前對(duì)象內(nèi)文本的font-size的 px 的 n倍
  • rem：相對(duì)長度單位。相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)，比如：n rem 相對(duì)于根類px的 n 倍。

三、塊級(jí)元素和行內(nèi)元素轉(zhuǎn)換

• 塊級(jí)元素---->行內(nèi)元素：style="display:inline;"

<div style="display:inline;"  >我是div</div>

• 行內(nèi)元素---->塊級(jí)元素 style="display:block;"

<span style="display:block;" >我是span</span>

• 行內(nèi)元素，但是還需要可以設(shè)置寬高，也就是說行內(nèi)的塊如何設(shè)置？

display: inline-block;

• display其他應(yīng)用：隱藏元素

<span style="display:none;" >我是span</span>

• 注意：只有塊級(jí)元素才能設(shè)置對(duì)應(yīng)的 寬和高 height、width，行內(nèi)元素設(shè)置之后是沒有效果的。

四、 文本和字體基本樣式

• 字體大小

        font-size: 20px;

• 字體

        font-family: "Comic Sans MS";

• 縮進(jìn)

        text-indent: 2em;

• 文本對(duì)齊方式

        text-align: center;

• 文字樣式（斜體）

        font-style: italic;

• 加粗

        font-weight: bold;

• 單詞折斷換行

        word-wrap:break-word;

• 顯示省略號(hào)的效果設(shè)置

        overflow:hidden;/*超出的隱藏*/
        white-space:nowrap;/*不讓換行 直到br*/
        text-overflow:ellipsis;/*...的效果（CSS3） */

五、邊框背景基本樣式

• 設(shè)置邊框

<table border="1">
//或者
<div class="outer"></div>
.outer{
        border:10px solid burlywood;
        border-radius: 10px;
}

• 設(shè)置邊框合并

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>測(cè)試1</li>
    <li>測(cè)試2</li>
</ul>

七、IE獨(dú)有&CSS HACK （每家瀏覽器都有自己的特點(diǎn)）

CSS HACK可以理解為對(duì)應(yīng)不同的瀏覽器去進(jìn)行適配

CSS HACK.png