創新互聯是專業的廣水網站建設公司，廣水接單;提供網站制作、成都做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行廣水網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

配套視頻下載地址

Div和Span標簽

• 什么是div?

  • 作用: 一般用于配合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>

• 什么是span?

  • 作用: 一般用于配合css修改網頁中的一些局部信息

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

• div和span有什么區別?

  • 1.div會單獨的占領一行,而span不會單獨占領一行

  • 2.div是一個容器級的標簽, 而span是一個文本級的標簽

• 容器級的標簽和文本級的標簽的區別?

  • 容器級的標簽中可以嵌套其它所有的標簽

  • 常見容器級的標簽: div h ul ol dl li dt dd ...

  • 文本級的標簽中只能嵌套文字/圖片/超鏈接

  • 常見文本級的標簽:span p buis strong em ins del ...

• 注意點:

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

    CSS元素顯示模式

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

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

• 什么是塊級元素, 什么是行內元素?

  • 塊級元素會獨占一行

  • 行內元素不會獨占一行

• 常見容器級的標簽: div h ul ol dl li dt dd ...

• 常見文本級的標簽:span p buis stong em ins del ...

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

• 常見行內元素: span buis strong em ins del

• 塊級元素和行內元素的區別?

  • 塊級元素

  • 獨占一行

  • 如果沒有設置寬度, 那么默認和父元素一樣寬

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

  • 行內元素

  • 不會獨占一行

  • 如果沒有設置寬度, 那么默認和內容一樣寬

  • 行內元素是不可以設置寬度和高度的

  • 行內塊級元素

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

  • 不獨占一行, 并且可以設置寬高

CSS元素顯示模式轉換

• 如何轉換CSS元素的顯示模式?

  • 設置元素的display屬性

• display取值

  • block 塊級

  • inline 行內

  • inline-block 行內塊級

• 快捷鍵

  • di display: inline;

  • db display: block;

  • dib display: inline-block;

創新互聯www.cdcxhl.cn，專業提供香港、美國云服務器，動態BGP最優骨干路由自動選擇，持續穩定高效的網絡助力業務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統配攻擊溯源，準確進行流量調度，確保服務器高可用性。佳節活動現已開啟，新人活動云服務器買多久送多久。

本文標題：HTML教程-CSS顯示模式-李南江-創新互聯
標題來源：http://www.yijiale78.com/article42/hhohc.html

成都網站建設公司_創新互聯，為您提供網站設計、手機網站建設、動態網站、電子商務、標簽優化、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯