CSS顯示模式

div和Span標籤

• 做用：通常用於配合css完成網頁的基本佈局

<style>
    .header{
        width: 980px;
        height: 100px;
        background: red;
        margin: auto;
        margin-bottom: 10px;
    }
    .content{
        width: 980px;
        height: 500px;
        background: green;
        margin: auto;
        margin-bottom: 10px;
    }
    .footer{
        width: 980px;
        height: 100px;
        background: blue;
        margin: auto;
    }
    .logo{
        width: 200px;
        height: 50px;
        background: pink;
        float: left;
        margin: 20px;
    }
    .nav{
        width: 600px;
        height: 50px;
        background: yellow;
        float: right;
        margin: 20px;
    }
    .aside{
        width: 250px;
        height: 460px;
        background: purple;
        float: left;
        margin: 20px;
    }
    .article{
        width: 650px;
        height: 460px;
        background: deepskyblue;
        float: right;
        margin: 20px;
    }
</style>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>

• 做用: 通常用於配合css修改網頁中的一些局部信息

<style>
    span {
        color: red;
    }
</style>
<p>努力到<span>無能爲力</span>, 拼搏到<span>感動本身</span></p>

• div和span有什麼區別？
  • div會單獨的佔領一行，而span不會單獨佔領一行
  • div是一個容器級的標籤，而span是一個文本級的標籤
• 容器級的標籤和文本級的標籤的區別？
  • 容器級的標籤中能夠嵌套其它全部的標籤
• 常見容器級的標籤：div、h、ul、ol、dl、li、dt、dd ...
• 文本級的標籤中只能嵌套文字、圖片、超連接
• 常見文本級的標籤：span、p、strong、em、ins、del ...
• 注意點:
  • 不用刻意去記憶哪些標籤是文本級的哪些標籤是容器級，在企業開發中通常狀況下要嵌套都是嵌套在div中，或者按照組標籤來嵌套(ul>li，ol>li，dl>dt+dd)

---

CSS元素顯示模式

• 在HTML中HTML將全部的標籤分爲兩類，分別是容器級和文本級
• 在CSS中CSS也將全部的標籤分爲兩類，分別是塊級元素和行內元素（其實還有一類，行內塊級）
• 什麼是塊級元素，什麼是行內元素？
  • 塊級元素會獨佔一行
  • 行內元素不會獨佔一行
• 常見塊級元素：p、div、h、ul、ol、dl、li、dt、dd
• 常見行內元素：span、buis、strong、em、ins、del
• 塊級元素和行內元素的區別？
  • 塊級元素：獨佔一行，若是沒有設置寬度，那麼默認和父元素同樣寬，若是設置了寬高，那麼就按照設置的來顯示
  • 行內元素：不會獨佔一行，若是沒有設置寬度，那麼默認和內容同樣寬，行內元素是不能夠設置寬度和高度的
  • 行內塊級元素：爲了可以讓元素既可以不獨佔一行，又能夠設置寬度和高度，那麼就出現了行內塊級元素，不獨佔一行，而且能夠設置寬高

CSS元素顯示模式轉換

• 經過設置元素的display屬性
• display取值
  • block 塊級
  • inline 行內
  • inline-block 行內塊級