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

秋落雨微涼發表於2022-07-08

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進階內容—盒子和陰影我們就講到這裡,你是否全部瞭解了呢?

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

相關文章