Div和Span標(biāo)簽

• 什么是div?
• 作用: 一般用于配合css完成網(wǎng)頁的基本布局

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

• 什么是span?
• 作用: 一般用于配合css修改網(wǎng)頁中的一些局部信息

<style>
        span{
            color: red;
        }
</style>
<p>努力到<span>無能為力</span>, 拼搏到<span>感動自己</span></p>

• div和span有什么區(qū)別?

• 1.div會單獨的占領(lǐng)一行,而span不會單獨占領(lǐng)一行

• 2.div是一個容器級的標(biāo)簽, 而span是一個文本級的標(biāo)簽

• 容器級的標(biāo)簽和文本級的標(biāo)簽的區(qū)別?

• 容器級的標(biāo)簽中可以嵌套其它所有的標(biāo)簽

• 常見容器級的標(biāo)簽: div h ul ol dl li dt dd ...

• 文本級的標(biāo)簽中只能嵌套文字/圖片/超鏈接

• 常見文本級的標(biāo)簽:span p buis strong em ins del ...

• 注意點:

• 不用刻意去記憶哪些標(biāo)簽是文本級的哪些標(biāo)簽是容器級, 在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中, 或者按照組標(biāo)簽來嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素顯示模式

• 在HTML中HTML將所有的標(biāo)簽分為兩類, 分別是容器級和文本級

• 在CSS中CSS也將所有的標(biāo)簽分為兩類, 分別是塊級元素和行內(nèi)元素(其實還有一類, 行內(nèi)塊級)

• 什么是塊級元素, 什么是行內(nèi)元素?

• 塊級元素會獨占一行

• 行內(nèi)元素不會獨占一行

• 常見容器級的標(biāo)簽: div h ul ol dl li dt dd ...

• 常見文本級的標(biāo)簽:span p buis stong em ins del ...

• 常見塊級元素: p div h ul ol dl li dt dd

• 常見行內(nèi)元素: span buis strong em ins del

• 塊級元素和行內(nèi)元素的區(qū)別?

• 塊級元素

• 獨占一行

• 如果沒有設(shè)置寬度, 那么默認(rèn)和父元素一樣寬

• 如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示

• 行內(nèi)元素

• 不會獨占一行

• 如果沒有設(shè)置寬度, 那么默認(rèn)和內(nèi)容一樣寬

• 行內(nèi)元素是不可以設(shè)置寬度和高度的

• 行內(nèi)塊級元素

• 為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素

• 不獨占一行, 并且可以設(shè)置寬高

CSS元素顯示模式轉(zhuǎn)換

• 如何轉(zhuǎn)換CSS元素的顯示模式?

• 設(shè)置元素的display屬性

• display取值

• block 塊級

• inline 行內(nèi)

• inline-block 行內(nèi)塊級

• 快捷鍵

• di display: inline;

• db display: block;

• dib display: inline-block;

學(xué)習(xí)交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038