12 CSS中的盒子模型

技術(shù)交流QQ群:1027579432，歡迎你的加入！

歡迎關(guān)注我的微信公眾號(hào)：CurryCoder的程序人生

  • 頁面布局要學(xué)習(xí)三大核心，盒子模型、浮動(dòng)和定位。學(xué)好盒子模型能非常好的幫助我們布局。
    網(wǎng)頁布局.png

1.看透網(wǎng)頁布局的本質(zhì)

  • 網(wǎng)頁布局過程：
    • 先準(zhǔn)備好相關(guān)的網(wǎng)頁元素，網(wǎng)頁元素基本都是盒子Box；
    • 利用CSS設(shè)置好盒子樣式，然后擺放到相應(yīng)的位置；
    • 往盒子里面裝內(nèi)容；
  • 網(wǎng)頁布局的核心本質(zhì)：就是利用CSS擺放盒子?。?！

2.盒子模型(Box Model)組成

  • 盒子模型：就是把HTML頁面中的布局元素看成是一個(gè)矩形的盒子，也就是一個(gè)裝著內(nèi)容的容器。
  • CSS盒子模型的本質(zhì)是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊框、外邊距、內(nèi)邊距、實(shí)際的內(nèi)容。
    盒子模型組成1.png

    盒子模型組成2.png

3.邊框border

邊框.png
  • border可以設(shè)置元素的邊框，邊框有三部分組成：邊框?qū)挾?粗細(xì))、邊框樣式、邊框顏色；
  • 語法格式： 
    border: border-width || border-style || border-color
邊框?qū)傩?png

4.邊框的復(fù)合寫法

  • CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色。
  • 邊框的復(fù)合寫法： 
    border: 1px solid red;  /* 三個(gè)參數(shù)是沒有順序的！ */
  • 邊框分開寫法： 
    border-top: 1px solid red;   /*  只設(shè)定上邊框，其余方向同理  */

5.表格的細(xì)線邊框

  • border-collapse屬性控制瀏覽器繪制表格邊框的方式它控制了相鄰兩個(gè)單元格之間的邊框。
  • 語法格式： 
    border-collapse: collapse;
  • collapse單詞是合并的意思，border-collapse: collapse;表示相鄰的邊框合并在一起。

6.邊框會(huì)影響盒子實(shí)際的大小

  • 邊框會(huì)額外增加盒子的實(shí)際大小，因此有兩種方法來解決：
    • 測(cè)量盒子大小的時(shí)候，不測(cè)量邊框；
    • 如果測(cè)量的時(shí)候包含了邊框，則需要width/height減去邊框?qū)挾?/li>

7.內(nèi)邊距padding

  • padding屬性用于設(shè)置內(nèi)邊距，即邊框與內(nèi)容之間的距離。
    內(nèi)邊距屬性.png

8.padding的復(fù)合寫法

  • padding屬性(簡(jiǎn)寫屬性)可以有1到4個(gè)值。
    padding簡(jiǎn)寫屬性.png

9.padding會(huì)影響盒子的實(shí)際大小

  • 當(dāng)我們給盒子設(shè)置padding值之后，發(fā)生了兩件事情：
    • 內(nèi)容和邊距有了距離，添加了內(nèi)邊距；
    • padding會(huì)影響盒子實(shí)際的大小；
  • 注意：如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊距，就會(huì)撐大盒子。解決方法：如果保證了盒子與效果圖大小保持一致，則讓width/height減去多出來的內(nèi)邊距大小即可。
  • 如果盒子本身沒有指定width/height屬性，則此時(shí)padding不會(huì)撐開盒子大小。

10.外邊距margin

  • margin屬性用于設(shè)置外邊距，即控制盒子與盒子之間的距離。


    外邊距的具體屬性值.png
  • margin簡(jiǎn)寫方式代表的意義與padding完全一致！

11.外邊距的典型應(yīng)用之塊級(jí)盒子水平居中對(duì)齊

  • 外邊距可以讓塊級(jí)盒子水平居中，但是必須滿足兩個(gè)條件：
    • 盒子必須指定了寬度width；
    • 盒子左右的外邊距都設(shè)置為auto；
  • 語法格式： 
    .header {
    width: 960px;
    margin: 0 auto;
}
  • 常見寫法用下面的三種：
    • margin-left: auto; margin-right: auto;
    • margin: auto;
    • margin: 0 auto;
  • 注意：上面的方法是讓塊元素水平居中對(duì)齊，如果想讓行內(nèi)元素或行內(nèi)塊元素水平居中，只需要給它的父元素添加text-align: center即可。

12.外邊距合并

  • 使用margin定義塊元素的垂直外邊距（即margin-top和margin-bottom）時(shí)，可能會(huì)出現(xiàn)外邊距的合并。主要有下面的兩種情況：
    • 相鄰元素垂直外邊距的合并；
    • 嵌套元素垂直外邊距的塌陷；
1.相鄰塊元素垂直外邊距的合并
  • 當(dāng)上下相鄰的兩個(gè)塊元素(兄弟關(guān)系的塊元素)相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top時(shí)，它們之間的垂直間距不是margin-bottom與margin-top之和。取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。
    相鄰塊元素垂直外邊距的合并.png
  • 解決方法：盡量只給一個(gè)盒子添加margin值！
2.嵌套元素垂直外邊距的塌陷
  • 對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值。
    嵌套元素垂直外邊距的塌陷.png
  • 解決方法：
    • 可以為父元素定義上邊框；
    • 可以為父元素定義上內(nèi)邊距；
    • 可以為父元素添加overflow: hidden;

13.清除內(nèi)外邊距

  • 網(wǎng)頁元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同的瀏覽器默認(rèn)的值也不一致。因此，我們?cè)诓季智?，首先要清除網(wǎng)頁元素的內(nèi)外邊距。
  • 語法格式： 
    * {
    padding: 0;  /* 清除內(nèi)邊距 */
    margin: 0;   /* 清除外邊距 */
}
  • 注意：行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距。但是，將它轉(zhuǎn)換為塊級(jí)元素和行內(nèi)塊元素就可以設(shè)置上下內(nèi)外邊距了。

14.PS的基本操作

  • 因?yàn)榫W(wǎng)頁美工大部分效果圖都是利用PS軟件來做的，所以以后我們大部分切圖工作都是在PS中完成。
  • 具體操作如下：
    • 1.文件→打開：打開我們要測(cè)量的圖片；
    • 2.Ctrl+R：可以打開標(biāo)尺，或者視圖→標(biāo)尺；
    • 3.右擊標(biāo)尺，把里面的單位改成像素；
    • 4.Ctrl+加號(hào)(+)可以放大視圖，Ctrl+減號(hào)(-)可以縮小視圖；
    • 5.按住空格鍵，鼠標(biāo)箭頭變成小手，拖到PS視圖；
    • 6.用選區(qū)拖動(dòng)，可以測(cè)量大??；

    • 7.Ctrl+D可以取消選區(qū)，或者在旁邊空白處點(diǎn)擊一下也可以取消選區(qū)；


      PS界面介紹.png

15.綜合案例之產(chǎn)品模塊

  • 網(wǎng)頁布局分析如下：


    網(wǎng)頁布局分析.png
  • 具體代碼流程：
    • box布局
    * {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f5f5;
}

.box {
    width: 298px;
    height: 415px;
    background-color: #ffffff;
    /* 讓塊級(jí)盒子水平居中對(duì)齊 */
    margin: 100px auto;
}
<div class="box"></div>
    • 圖片和段落制作
    .box img {
/* 圖片的寬度和父親一樣寬 */
    width: 100%;
}

.review {
    height: 70px;
    font-size: 14px;
    /* 因?yàn)檫@個(gè)段落標(biāo)簽p沒有width屬性， 所以padding不會(huì)撐開盒子的寬度*/
    padding: 0 28px;
    margin-top: 30px;
}
    
<div class="box">
    <img src="images/img.jpg">
    <p class="review">快遞牛，整體不錯(cuò)藍(lán)牙可以說秒連，紅米給力</p>
</div>
    • 評(píng)價(jià)和詳情制作
    .appraise {
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 20px;
    padding: 0 28px;
}

.info {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 28px;
}

.info h4 {
    display: inline-block;
    font-weight: 400;
}

.info span {
    color: #ff6700;
}

<div class="appraise">來自89757的評(píng)價(jià)</div>
<div class="info">
    <h4>Redmi AirDots真無線藍(lán)...</h4> |
    <span>99.9元</span>
</div>
    • 豎線細(xì)節(jié)制作
    a {
    color: #333;
    text-decoration: none;
}

.info em {
    font-style: normal;
    color: #ebe4e0;
    margin: 0 6px 0 15px;
}

<div class="info">
    <h4>
        <a href="#">Redmi AirDots真無線藍(lán)...</a>
    </h4>
    <em>|</em>
    <span>99.9元</span>
</div>
  • 相關(guān)問題：
    • 1.布局為什么用不同的盒子，能否只用div？
      • 答：標(biāo)簽都是有語義的，合理的地方用合理的標(biāo)簽。例如：產(chǎn)品的標(biāo)題就用h標(biāo)簽，大量的文字就用p標(biāo)簽。
    • 2.為什么用那么多類名？
      • 答：類名就是給盒子起了一個(gè)名字，可以更好的找到這個(gè)盒子，選取盒子更容易，后期維護(hù)也更方便。
    • 3.到底用padding還是margin？
      • 答：大部分情況下兩個(gè)可以混用，兩者各有優(yōu)缺點(diǎn)，但是根據(jù)實(shí)際情況，總是有更簡(jiǎn)單的方法實(shí)現(xiàn)。

16.綜合案例之快報(bào)模板

  • 網(wǎng)頁布局分析如下：


    網(wǎng)頁布局分析.png

  • 具體代碼流程：

    • 快報(bào)模塊頭部制作
    * {
    padding: 0;
    margin: 0;
}

.box {
    width: 248px;
    height: 163px;
    border: 1px solid #ccc;
    margin: 100px auto;
}

.box h3 {
    height: 32px;
    border: 1px dotted #ccc;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    /* 由于h3標(biāo)簽沒有設(shè)定width屬性，因此padding-left不會(huì)撐開盒子 */
    padding-left: 15px;
}

<div class="box">
    <h3>品優(yōu)購快報(bào)</h3>
</div>

  • 去掉li標(biāo)簽前的項(xiàng)目符號(hào)(小圓點(diǎn))！

    list-style: none;
    • 快報(bào)模塊列表制作
    li {
/* 去掉li前面的小圓點(diǎn) */
    list-style: none;
}

.box ul li a {
    font-size: 12px;
    color: #666;
    text-decoration: none;
}

.box ul li a:hover {
    text-decoration: underline;
}

.box ul li {
    height: 23px;
    line-height: 23px;
    padding-left: 20px;
}

.box ul {
    margin-top: 7px;
}

<ul>
    <li>
        <a href="#">【特惠】爆款耳機(jī)5折秒！</a>
    </li>
    <li>
        <a href="#">【特惠】母親節(jié)，健康好禮低至5折！</a>
    </li>
    <li>
        <a href="#">【特惠】爆款耳機(jī)5折秒！</a>
    </li>
    <li>
        <a href="#">【特惠】9.9元洗100張照片！</a>
    </li>
    <li>
        <a href="#">【特惠】長虹智能空調(diào)立省1000元</a>
    </li>
</ul>

16.圓角邊框[重點(diǎn)]

  • 在CSS3中，新增加了圓角邊框樣式，這樣盒子模型就可以變成圓角了。
  • radius半徑(圓的半徑)原理：橢圓與邊框的交集形成的圓角效果。
    圓角邊框原理1.png

    圓角邊框原理2.png
  • 語法格式： 
    border-radius: 參數(shù)值;
  • 參數(shù)值可以是具體數(shù)值或百分比的形式；
  • 如果是正方形，想要設(shè)置為一個(gè)圓，把數(shù)值修改為高度或?qū)挾鹊囊话?/strong>即可，或者直接寫為50%；
  • 如果是矩形，設(shè)置為高度為一半就可以了；
  • 該屬性是一個(gè)簡(jiǎn)寫屬性，可以跟四個(gè)值，分別代表左上角、右上角、右下角、左下角；
  • 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius；

17.盒子陰影[重點(diǎn)]

  • 在CSS3中，新增加了盒子陰影，可以使用box-shadow屬性為盒子增加陰影。
  • 語法格式： 
    box-shadow: h-shadow v-shadow blur spread color inset;
盒子陰影屬性值.png
  • 默認(rèn)的是外陰影outset，但是不可以寫這個(gè)單詞，否則會(huì)導(dǎo)致陰影無效；
  • 盒子陰影不占用空間，不會(huì)影響其他盒子排列；

18.文字陰影

  • 在CSS3中，我們可以使用text-shadow屬性將陰影應(yīng)用于文本。
  • 語法格式： 
    text-shadow: h-shadow v-shadow blur color;
文字陰影.png

19.資料下載

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

友情鏈接更多精彩內(nèi)容