技術文章 » CSS進階內容——盒子和陰影詳解

CSS進階內容——盒子和陰影詳解

2022-07-08 12:05:53

CSS進階內容

在學習了CSS基本知識之後，我們需要進一步瞭解CSS，因此寫下了這篇文章

當然如果沒有學習之前的知識，可以到我的主頁中檢視之前的文章：秋落雨微涼 - 部落格園

CSS三大特性

首先我們先來了解CSS的三大特點，以便於我們下面知識點的講解
CSS三大特性包括：

  • 層疊性
  • 繼承性
  • 優先順序

層疊性

當相同的選擇器設定相同的樣式，卻含有不同的樣式值時，此時一個樣式就會覆蓋掉另一個衝突的樣式，層疊性就是為了解決這個問題

層疊性原理：

  • 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
  • 當樣式不衝突時，不發生層疊性

下面給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>層疊性</title>

    <!-- 對於下方div我們給出兩個div的css設定 -->


    <style>
        /* 下面這種情況，顏色就出現了層疊性，因就近原則，這裡div呈blue色 */
        /* 同時，font-size因未發生衝突，不產生層疊性 */
        div{
            color: black;
        }
        
        div{
            color: blue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>

繼承性

CSS中的繼承：

  • 當子類未設定對應屬性時，子類繼承成父類別的某些樣式（例如：字型顏色，字型大小等）
  • 恰當使用可以簡化程式碼，降低css複雜性
  • 子元素只能夠繼承父類別的某些樣式（text-，font-，line-這些元素開頭的，以及color屬性）

下面給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>繼承性</title>

    <!-- 當我們不設定p屬性僅設定div屬性時，p會繼承div的屬性 -->
    <style>
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
    </div>
</body>
</html>

繼承中的特殊屬性-行高：

  • 當繼承行高時，可以採用font：字型大小/字型行高
  • 這裡的行高可以不帶畫素px，而直接寫2或1.5表示是字型大小的2倍或1.5倍
  • 這樣我們就可以根據自己的字型大小來調整行高

下面給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>繼承性</title>

    <!-- 我們可以直接設定行高為字型大小的倍數，以便於後來的開發 -->
    <style>
        div{
            color: pink;
            font: 12px/1.5;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
        <p>123321</p>
    </div>
</body>
</html>

優先順序

當一個元素指向多種選擇器時，會產生優先順序

每種選擇器都具有一定的權重：

選擇器 選擇器權重
繼承或* 0.0.0.0
元素選擇器 0.0.0.1
類選擇器，偽類選擇器 0.0.1.0
ID選擇器 0.1.0.0
行內樣式 1.0.0.0
！important 重要的 無窮大

注意：

  • 權重由四組數決定，無法進位
  • 從前往後比較
  • a連結預設制定樣式，若修改需要對a改變

權重疊加：

  • 當採用複合選擇器時，把所有選擇器權重相加
  • ！！！注意：不可進位

盒子模型

盒子模型是我們網路佈局的最基礎元素

網路佈局過程：

  • 先準備相關網頁元素，網頁元素基本都是盒子Box
  • 利用css設計好盒子樣式，並擺放到相應位置
  • 往盒子裡裝內容

盒子模型組成部分

盒子模型由四部分組成：

  • 邊框 border
  • 內容 content
  • 內邊距 padding
  • 外邊距 margin

邊框（border）

邊框border可以設定元素的邊框，邊框由三部分組成：邊框寬度，邊框樣式，邊框顏色

語法：

border-color：邊框顏色
border-width：邊框寬度
border-style：邊框款式（solid實線，dashed虛線）
border：顏色 寬度 款式（可以簡化一起設定）

邊框是可以分別設定的：

border-top：上邊框
border-bottom：下邊框
border-left：左邊框
border-right：右邊框

當我們只希望改變一條邊框時，可以先定義全邊框，再定義特別邊框，這樣css就會利用層疊性實現效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子邊框</title>
    <style>
        div {
            height: 30px;
            width: 50px;
            /* 我們先定義全邊框 */
            border: 1px black dashed; 
            /* 隨後定義特殊邊框，採用層疊性覆蓋所需邊框的原本邊框設計 */
            border-top: 2px red solid;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意：當兩側都具有邊框時，邊框會匯聚在一起導致邊框效果大打折扣

所以css提供了border-collapse：collapse來合併邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小說排名案例</title>
    <!-- 接下來我們對錶格進行邊框設計 -->

    <style>
        table{
            /* 對table設定一個範圍大小 */
            height: 240px;
            width: 500px;
        }

        table,th,td {
            /* 對全部設定一個邊框以及字型設定 */
            border: 1px solid black;
            /* 
            合併相鄰的邊框 
            當兩側都具有邊框時，中間邊框會變成兩側邊框之和（邊框相聚）
            我們需要採用border-collapse: collapse來合併邊框
            */
            border-collapse: collapse;
            /* 我們稍微設定一下字型以及對齊 */
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>排名</th>
            <th>關鍵詞</th>
            <th>趨勢</th>
            <th>進入搜尋</th>
            <th>最近七日</th>
            <th>相關連結</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

注意：邊框會影響盒子實際大小

所以我們在設計盒子時需要保留邊框粗細大小

例如：

  • 當我們需要一個總體積為20*20的盒子，且需要邊框2px
  • 那麼我們div的height和width只需設計到18px，然後我們再加上border-width：2px即可

內邊距（padding）

padding屬性用來設計內邊距，即邊框與內容之間的距離

主要分為四個內邊距：

  • padding-top 上內邊距
  • padding-bottom 下內邊距
  • padding-left 左內邊距
  • padding-right 右內邊距

內邊距也存在簡寫方法：

/* 全部內邊距 */
padding： 5px 
/* 上下和左右 */
padding： 5px 10px
/* 上和左右和下 */
padding： 5px 10px 15px
/* 上和右和下和左 */
padding： 5px 10px 15px 20px

注意：padding也會影響盒子的大小

當存在padding時，盒子大小也會相應增加相對大小

所以我們在設計盒子時，同樣也需要留下padding距離的大小

案例：巧妙利用padding設計導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding應用於導航欄</title>

    <style>
        .nav {
            /* 首先給大導航欄設計好高度和邊框和底板顏色，設定line-height使文字始終居中 */
            height: 41px;
            border-top: 3px orange solid;
            border-bottom: 1px #edeefe solid;
            background-color: #edeefea2;
            line-height: 41px;
        }

        a{
            /* 需要先變成行內塊元素才可以具有高度，我們需要高度來形成一個框架，使整個框架都是超連結 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            text-decoration: none;
            color:#4c4c4c;
            /* 我們採用padding方法控制超連結之間的距離，使其相隔一段距離且不受字型長短影響 */
            padding: 0 20px;
        }

        a:hover{
            /* 我們希望在滑鼠滑動在連結上時有明顯顯示 */
            background-color: bisque;
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">設為首頁</a>
        <a href="#">新浪使用者端</a>
        <a href="#">微博</a>
        <a href="#">關注我</a>
    </div>
</body>
</html>

特定情況：當盒子沒有設定height或者width時，padding不會撐開盒子

外邊距（margin）

margin用來設定外邊距，即控制盒子與盒子之間的距離

主要分為四個外邊距：

  • margin-top 上外邊距
  • margin-bottom 下外邊距
  • margin-left 左外邊距
  • margin-right 右外邊距

外邊距和內邊距的簡寫方法也與padding完全相同:

/* 全部內邊距 */
margin： 5px 
/* 上下和左右 */
margin： 5px 10px
/* 上和左右和下 */
margin： 5px 10px 15px
/* 上和右和下和左 */
margin： 5px 10px 15px 20px

外邊距典型應用：使塊級盒子水平居中

要求：

  • 盒子具有寬度width,高度height
  • 盒子內設定margin： 0 auto；（只要保證左右margin是auto就確保居中）

下面給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塊級元素居中</title>

    <!-- 給盒子設定寬度且盒子的左右margin為auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

接下來我們也稍微介紹一下對於行內塊/行內元素居中的方法：

  • 使其對應的父類別元素加上text-align：center即可
  • 因為對於父類別來說，行內塊/行內元素屬於父類別的內部元素，所以將父類別的內部元素居中即可實現行內塊/行內元素居中

下面給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塊級元素居中</title>

    <!-- 給盒子設定寬度且盒子的左右margin為auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
            /* 在這裡設定text-align即可使內部元素居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <span>123</span>
    </div>
</body>
</html>

巢狀塊元素垂直外邊距塌陷問題：

  • 當出現巢狀關係（父子關係）時，父元素和子元素同時有外邊距時，此時父元素會塌陷較大的外邊距值

解決方案：

  • 為父元素定義一個上邊框:border：1px solid transparent
  • 為父元素定義一個內邊距：padding：1px
  • 為父親新增overflow：hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外邊距塌陷問題</title>

    <!-- 當父類別和子類都具有外邊距時，父類別會以較大的外邊距為主進行移動 -->
    <!-- 如下所示，父親的外邊距為100px，兒子仍舊緊貼父親 -->
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

注意：因為網頁很多元素都帶有內外邊距，且在各瀏覽器中標準不同，所以我們通常清除內外邊距

我們常常把這行程式碼作為css內容的第一行

* {
	padding： 0；
    margin： 0；
}

稍微提一句：行內元素儘量只設定左右內外邊距

案例：BOX模組案例

讓我們通過HTML和CSS還原下面這個網頁排版

圖片：

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>

    <!-- 正常情況來說，我們分HTML和CSS兩部分書寫，但為了講解簡單，我們放在同一HTML中書寫 -->

    <style>
        /* 第一步，去除內外邊距 */
        * {
            padding: 0;
            margin: 0;
        }
        /* 第二步，設定框架大盒子 */
        .box {
            /* 資料都是採用PS測量，以後你們做專案時也會給出相應值或自己測量 */
            height: 415px;
            width: 298px;
            background-color: rgba(255, 255, 255, 0);
            /* 我們希望把盒子居中顯示 */
            margin: 100px auto;
        }
        /* 第三步：我們設定圖片和盒子一樣寬 */
        .box img {
            width: 100%;
        }
        /* 第四步：設定第一行小字 */
        .review {
            font-family: 微軟雅黑;
            font-size: 14px;
            /* 注意：設定整體高度，使無論多少文字，底部都是對齊的 */
            height: 70px;
            padding: 0 28px;
            margin-top: 30px;
        }
        /* 第五步：設定第二行小字 */
        .appraise {
            font-family: 微軟雅黑;
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 28px;
        }
        /* 第六步：設定最後一行小字，我們分幾部分設定 */

        

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

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

        .info .price {
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 首先我們放入照片 -->
        <img src="案例照片/1.png" alt="圖片">
        <!-- 放入第一行文字 -->
        <p class="review">快遞牛，整體不錯，藍芽都可以秒連</p>
        <!-- 放入第二行文字 -->
        <p class="appraise">來自1923134的評價</p>
        <!-- 最後一行文字 -->
        <p class="info"><span class="name">Redmi AirDots真無線藍...</span><em>|</em><span class="price">99.9元</span></p>
    </div>
</body>
</html>

在這裡插上一句：（因為我自己第一次做時出現了問題所以想向你們提醒一下）

  • 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：h1、h2、h3、h4、h5、h6、p、dt
  • 這裡例如最後一行p，我們不能插入h標題元素

平面佈局改善

除了正常的佈局改善，我們也可以通過其他方法獲得好看的圖形樣式

例如圓角邊框和陰影，就會為我們的Web頁面起到美化的作用

圓角邊框

border-radius就是用來控制圖形四角的曲度

div {
    /*
    border-radius：length;裡面設定的邊角圓的半徑，也可也設定百分比
    如果你想獲得一個圓形，需要把高度寬度設定一致且length設定成圖形直徑的一半即可（）；
    如果你想獲得一個圓角矩形，只需把length設定為高度的一半即可
    注意：這裡的角仍舊可以單獨設定
    當兩個值時順序分別是左上和右下，右上和左下
    當四個值時順序分別是左上，右上，右下，左下
    */
    border-radius：length;
}

盒子陰影

box-shadow用來設定盒子陰影

box-shadow通常有六個內部設定，一般直接簡寫：

  • box-shadow: 水平陰影（px） 垂直陰影（px） 模糊距離（px） 陰影尺寸（px） 顏色（color） 內部/外部（insert/outset）
  • 我們一般常用設定為box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3)
  • 注意：不可以寫outset，outset是預設的，如果寫了會導致陰影失效
  • 注意：陰影不佔用盒子大小

下面我們給出程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子陰影</title>

    <style>
        /* 可以直接設定框架 */
        div {
            height: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }
        /* 
        也可以設定在當移動上才可顯示 
        div:hover {
            height: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }        
        */
        

    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字陰影

text-shadow用來設定盒子陰影

box-shadow通常有四個內部設定，一般直接簡寫：

  • box-shadow: 水平陰影（px） 垂直陰影（px） 模糊距離（px） 顏色（color）
  • 使用不多，瞭解即可

結束語

好的，CSS進階內容—盒子和陰影我們就講到這裡，你是否全部瞭解了呢？

下面我會介紹浮動定位，敬請期待哦~