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 行內塊級