任務九~盒模型

一、盒模型包括哪些屬性？

  • CSS盒模型~即定義了Web頁面中的元素是如何看做盒子來解析CSS盒模型屬性有：
  • content~內容
    • 盒模型的內容區(qū)，由width和height組成
  • padding~內邊距
    • 內邊距是內容區(qū)和邊框之間的空間，這個空間是透明的，沒有顏色，沒有裝飾
    • 單邊內邊距分別是：padding-top、padding-right、padding-bottom、padding-left
    • 當padding的數值為百分數值時，其百分數值要相對于其父元素的width計算，而這里的padding包括了上下padding，即上下pading的百分數也會相對于元素寬度計算
  • border~邊框
    • border:[<border-width>] || [border-style] || [border-color] || inherit
    • 單邊邊框簡寫分別是：border-top、border-right、border-bottom、border-left
  • margin~外邊距

    • 外邊距是兩個元素之間的距離，外邊距也是透明的，沒有顏色，沒有裝飾

    • 單邊外邊距分別是：margin-top、margin-right、margin-bottom、margin-left

    • 外邊距可以使負值，如果垂直外邊距都設置為負值，瀏覽器會取兩個外邊距絕對值的最大值；如果一個正外邊距與一個負外邊距合并，會從正外邊距減去這個負外邊距的絕對值

    • 當margin的值設置為百分數時，其值相對于父元素的width；同時，這里的margin包括了上下margin

    • 垂直外邊距的合并（整理自CSS權威指南）：

      • 兩個外邊距中較小的一個會被較大的一個合并；
      • 如果相鄰有多個外邊距，也會出現合并，比如
      ul{margin-bottom:20px;}
li{margin-bottom:25px;}
p{margin-top:30px;}
      外邊距合并

      此時，列表的下外邊距是20px;列表項的上外邊距是25px；段落的上外邊距是30px;那么當這些外邊距合并時，最終段落的外邊距能勝出，則li結尾到p開始之間的距離為30px

      • 如果在包含塊上設置邊框或內邊距時，會使其子元素的外邊距包含在包含塊內，比如
      ul{margin-bottom:20px;border:1px solid red;}
li{margin-bottom:25px;}
p{margin-top:30px;}
      外邊距合并

      此時，當在ul中設置了邊框之后，li的下外邊距放在了其父元素ul內部，這里外邊距的合并只有ul和p之間的外邊距發(fā)生合并

  • CSS盒模型圖


    CSS盒模型

二、text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中？

  • text-align:center的作用是讓元素中文本水平居中對齊；它作用在塊級元素上，會使塊級元素的行內元素水平居中對齊

三、如果遇到一個屬性想知道兼容性，在哪查看?

Can I use ··截圖

四、IE 盒模型和W3C盒模型有什么區(qū)別?

  • IE盒模型width=border+padding+content（IE678的怪異模式，現在可以通過box-sizing:border-box來實現）


    IE盒模型

  • W3C盒模型width=content（chrome， IE9+, IE678添加 doctype 使用標準盒模型）


    W3C盒模型

五、以下代碼的作用？兼容性？

*{ box-sizing: border-box;}
  • box-sizing是css3新增加的一個盒模型屬性，能夠事先定義盒模型的尺寸解析方式
  • 語法為~box-sizing:content-box | border-box | inherit
  • content-box：默認值，讓元素維持W3C的標準盒模型，即width=content
  • border-box：讓元素維持IE傳統(tǒng)的盒模型，即width=border+padding+content
  • 比如
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            *{
                box-sizing: border-box;
            }
            .box{
                width: 100px;
                height: 100px;
                background: red;
                border: 20px solid green;
                margin: 0 auto;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

  • 效果圖


    border-box效果圖

    此時這里的100px(width)=20px(border-left)+20px(padding-left)+20px(content的width)+0px(padding-right)+20px(border-right)

  • 兼容性如下圖


    box-sizing兼容性

版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源?。。?！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容