CSS進階內容——佈局技巧和細節修飾

我們在之前的文章中已經掌握了CSS的大部分內容，但仍有一些內容我們沒有涉略，這篇文章就是為了補充前面沒有涉及的內容，為我們的知識做出補充並且介紹一些佈局技巧

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

元素的顯示與隱藏

在我們的網頁設計中，也許會有廣告的設計部分

廣告旁常常存在×號來進行廣告的關閉，而這部分內容在CSS中就被稱為元素的顯示與隱藏

本質：

讓一個元素在頁面中隱藏或顯示出來

我們常常提供三種方法：

display
visibility
overflow

讓我們分開一一介紹：

display方法(重點：JS搭配使用)

display屬性用來設定一個元素應如何顯示

我們常用的屬性有：

display：none 隱藏元素
display：block 使元素轉化為塊級元素並且顯示元素

注意：當display設定為none時，原有位置不再佔用！！！

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

<!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>Document</title>

    <!-- 當我們將display變化為none時，不僅元素隱藏，而且其原有位置也不再佔有 -->

    <style>
        .peiqi {
            height: 200px;
            width: 200px;
            background-color: aqua;
            /* 當我們把display設定為none，元素隱藏，且原有位置不再佔有，下方的div會佔用當前div的位置 */
            display: none;
        }

        .qiaozhi {
            height: 200px;
            width: 200px;
            background-color: red;
            /* 想讓元素重新出現，可以設定為block，block通常為預設選項，不用設定 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="peiqi"></div>
    <div class="qiaozhi"></div>
</body>
</html>

display常與JS搭配使用，我們在後面章節講到JS會詳細講述

visibility方法

visibility屬性用來表示元素隱藏或者顯示

我們常用的屬性有：

visibility:hidden 隱藏
visibility：visible 顯示

注意：當visibility元素為hidden時，元素雖然隱藏，但仍保留原來位置，下方元素無法佔用！！！

overflow方法

overflow只對盒子中的溢位部分做出反饋

我們常用的屬性有：

overflow：visible 顯示
overflow：hidden 隱藏
overflow：scroll 滑動條
overflow：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>Document</title>

    <!-- 我們分別展示四種情況 -->

    <style>
        div {
            height: 200px;
            width: 100px;
            font-size: 14px;
            background-color: pink;
        }

        .w1 {
            /* 使元素隱藏 */
            overflow: hidden;
        }

        .w2 {
            /* 使元素滑動 */
            overflow: scroll;
        }

        .w3 {
            /* 使元素自動化滑動 */
            overflow: auto;
        }

        .w4 {
            /* 使元素顯示 */
            overflow: visible;
        }
    </style>
</head>
<body>
    <div class="w1">《原神》是由上海米哈遊網路科技股份有限公司製作發行的一款開放世界冒險遊戲，於2017年1月底立項 [28]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在資料方面，同在官方伺服器的情況下，iOS、PC、Android平臺之間的賬號資料互通，玩家可以在同一賬號下切換裝置。</div>
    <div class="w2">《原神》是由上海米哈遊網路科技股份有限公司製作發行的一款開放世界冒險遊戲，於2017年1月底立項 [28]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在資料方面，同在官方伺服器的情況下，iOS、PC、Android平臺之間的賬號資料互通，玩家可以在同一賬號下切換裝置。</div>
    <div class="w3">《原神》是由上海米哈遊網路科技股份有限公司製作發行的一款開放世界冒險遊戲，於2017年1月底立項 [28]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在資料方面，同在官方伺服器的情況下，iOS、PC、Android平臺之間的賬號資料互通，玩家可以在同一賬號下切換裝置。</div>
    <div class="w4">《原神》是由上海米哈遊網路科技股份有限公司製作發行的一款開放世界冒險遊戲，於2017年1月底立項 [28]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在資料方面，同在官方伺服器的情況下，iOS、PC、Android平臺之間的賬號資料互通，玩家可以在同一賬號下切換裝置。</div>
</body>
</html>

細節修飾

接下來我們介紹一些CSS中可以幫助美化介面的一些方法

我們會依次介紹到：

CSS三角設計
滑鼠樣式
表單輪廓線
文字域禁止拖動指令
vertical-align表單文字對齊
圖片底部空白問題
溢位文字採用省略號代替

CSS三角設計

我們在網頁設計中常常看到三角形標誌，而這些標誌需要一些小技巧才能夠完成

設計三角的要求：

div盒子的高度和寬度均設計為0
我們通過div盒子的邊框來形成三角，邊框設定為：任意px solid transport
然後我們通過單獨的邊框設計，來建立不同方向的三角：border-top-color：red；

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

<!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>Document</title>

    <!-- 我們來設計一個三角形 -->

    <style>
        div {
            /* 首先不需要高和寬 */
            height: 0;
            width: 0;
            /* 整體邊框設計為透明，粗細看需求設計 */
            border: 10px solid transparent;
            /* 然後我們根據需求設計三角朝向和顏色 */
            border-top-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

滑鼠樣式

我們在網頁中常常會看到滑鼠的各種樣式

最常見的就是滑鼠，然後我們可以看到小手，包括移動，文字和禁止符號

在CSS中有專門的語法來控制滑鼠樣式

div {
	cursor：deafult; 預設
    cursor：pointer；小手
    cursor：move；   移動
    cursor：text；   文字
    cursor：not-allowed；禁止
}

我們直接採用行內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>Document</title>

    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是預設</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: move;">移動</li>
        <li style="cursor: text;">文字選擇</li>
        <li style="cursor: not-allowed;">禁止符號</li>
    </ul>
</body>
</html>

表單輪廓線

我們在使用input的框架時，通常會有預設的藍色框架，但這樣並不美觀

所以我們常常去除掉這個藍色框架：

input {
	outline : none;
}

文字域禁止拖動指定

我們在使用textare時，在右下角文字域是可以進行拖拽的

但我們在網頁設計時不能隨意讓使用者更改介面，所以我們同樣提供了方法禁止使用者拖拽文字域：

textare {
    resize ； none；
    /* 當然，如果想要去除掉文字域的藍色邊框，我們也可採用outline方法*/
    outline ： none；
}

vertical-align表單文字對齊

官方解釋：

針對於行內/行內塊元素做所有元素的垂直對齊方法

語法：

標準格式：vertical-align：positon；
頂部對齊： vertical-align：top；
垂直對齊： vertical-align：middle；
底部對齊： vertical-align：bottom；（預設）

以上vertical-align常用於使表單內的圖片與文字對齊

圖片底部空白問題

問題來源：

當我們插入圖片時，圖片並非緊貼框架，當你設定border時會發現圖片與div中有一定距離
原因主要是因為行內塊元素和文字的基線對齊

解決方法：

給圖片新增vertical-align屬性（推薦）
使圖片轉化為塊級元素display：block；

溢位文字採用省略號代替

當我們的框架承受不住過多文字時，可能出溢位或者突然終止，這樣的網頁設計都是不合標準的

所以我們希望採用省略號來使整個文字不顯得過於生硬

我們分別講述單行文字溢位和多行文字溢位的解決方法：

單行文字溢位：
1. 強制文字一行顯示：
  
  white-space：nowrap；
2. 超出部分省略：
  
  overflow：hidden；
3. 省略部分用省略號顯示：
  
  text-overflow：ellipsis；
多行文字溢位：(方法過於複雜且相容性不好，不推薦使用)
1. 設定省略超出部分且讓省略部分讓省略號代替：
  
  overflow：hidden；
  
  text-overflow：ellipsis；
2. 彈性伸縮盒子模型顯示：
  
  display： -webkit-box；
3. 限制在一個塊元素顯示的文字的行數：
  
  -webkit-line-clamp: 2;
4. 設定或檢索伸縮盒物件的子元素排列方法:
  
  -webkit-box-orient: vertical;

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

<!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>Document</title>

    <!-- 首先我們先講解單行文字溢位 -->

    <style>
        .lone {
            /* 我們先設計一下盒子大小和bcc */
            height: 20px;
            width: 100px;
            font-size: 10px;
            line-height: 20px;
            background-color: pink;

            /* 第一步,單行文字當然要先設定文字強制在一行內顯示 */
            white-space: nowrap;
            /* 第二步:將超出內容省略 */
            overflow: hidden;
            /* 第三步:我們要用省略號來代替省略內容 */
            text-overflow: ellipsis;
        }
    </style>

    <!-- 然後我們來介紹一下多行文字溢位 -->

    <style>
        .more {
            /* 我們先設計一下盒子大小和bcc */
            /* 注意,這裡需要手動設定高度,使多餘行數內容不顯示出來 */
            height: 40px;
            width: 100px;
            font-size: 10px;
            line-height: 20px;
            background-color: pink;
            margin-top: 20px;

            /* 1.設定省略超出部分且讓省略部分讓省略號代替： */
            overflow: hidden;
            text-overflow: ellipsis;

            /* 2.彈性伸縮盒子模型顯示： */
            display: -webkit-box;

            /* 3.限制在一個塊元素顯示的文字的行數： */
            -webkit-line-clamp: 2;

            /* 4.設定或檢索伸縮盒物件的子元素排列方法: */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="lone">遊戲發生在一個被稱作「提瓦特」的幻想世界，在這裡，被神選中的人將被授予「神之眼」，導引元素之力。</div>
    <div class="more">遊戲發生在一個被稱作「提瓦特」的幻想世界，在這裡，被神選中的人將被授予「神之眼」，導引元素之力。</div>
</body>
</html>

常見佈局技巧

我們可以採用一些技巧幫助我們更好地佈局：

margin負值運用

採用負值解決邊框組合問題

我們在橫向排版採用float時，在存在邊框時，左右兩個邊框會導致中間邊框變粗

這時我們就可以採用margin方法使整體向左移動，使邊框進行覆蓋，從而減小邊框粗細程度

我們給出案例解釋：

<!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>Document</title>

    <!-- 我們希望去除中間邊框粗大的部分 -->

    <style>
        ul>li {
            float: left;
            list-style: none;
            height: 200px;
            width: 100px;
            background-color: pink;
            border: 1px solid red;

            /* 我們使外邊距為-1,相當於向左移動 */
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

變色壓制性

在上方我們使用margin去除掉邊框變粗問題後

如果我們希望在hover該盒子後使邊框發生顏色變化，但後方邊框會壓住前方邊框導致效果失效

所以我們給出兩種方法來解決：

使用相對定位position：relative；
使用層級選擇器z-index：1；

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

<!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>Document</title>

    <!-- 我們希望去除中間邊框粗大的部分 -->

    <style>
        ul>li {
            float: left;
            list-style: none;
            height: 200px;
            width: 100px;
            background-color: pink;
            border: 1px solid red;

            /* 我們使外邊距為-1,相當於向左移動 */
            margin-left: -1px;
        }

        ul>li:hover {
            border-color: yellow;
            /* 使用positon或者z-index來解決 */
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

文字圍繞浮動元素

當我們文字和圖片同時使用時，為了防止圖片壓住文字導致文字顯示不全，我們常常採用文字圍繞圖片的形式

而實現這一目的的主要解決方法是採用float的浮動原理

我們通過一個案例來解釋：

<!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>Document</title>
    <style>
        .box {
            height: 100px;
            width: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        .img {
            /* 設定浮動,使文字和圖片在同一行且不覆蓋 */
            float: left;
            height: 90px;
            width: 50px;
            /* 我們可以稍微設計邊框使圖片和字型相差一些距離使其更加美觀 */
            margin-right: 5px;
        }

        .img img {           
            /* 設定圖片和圖片盒子一樣大 */
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 首先我們建立一個大盒子來同時裝圖片和文字 -->
    <div class="box">
        <!-- 建立一個裝圖片的盒子來控制大小 -->
        <div class="img"><img src="../../../Resources/picture/1.jpeg">
案例程式碼:
<!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>Document</title>

    <style>
        /* 對整體去除邊距 */
        * {
            padding: 0;
            margin: 0;
        }

        /* 對大盒子進行設計 */
        .box {
            /* 使全部元素水平居中 */
            text-align: center;
        }

        /* 對盒子的a做出設計 */
        .box a{
            /* 當a作為行內塊元素,就可以設計高寬,並受水平居中影響 */
            display: inline-block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            color: #333;
        }

        /* 對最前面和最後面的單獨設計寬度使其放下內容 */
        .box .prev,
        .box .next{
            width: 85px;
        }

        /* 對兩個需要單設的元素設計 */
        .box .current,
        .box .cls{
            border: 1px solid transparent;
            background-color: transparent;
        }

        /* 設定跳轉框的大小 */
        .box input{
            width: 45px;
            height: 36px;
            outline: none;
            border: 1px solid #ccc;
        }

        .box button{
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一頁</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="cls">...</a>
        <a href="#" class="next">下一頁&gt;&gt;</a>
        <!-- 我們還需要一個跳轉頁面設計 -->
        跳轉到
        <input type="text">
        頁
        <input type="button" value="確定">
    </div>
</body>
</html>

整體CSS初始化
我們在進行網頁設計時,CSS本身會有很多不美觀的設定
我們需要在開始前就對CSS進行初始化以便於我們後期的網頁設計
我們將給出CSS框架中所有需要初始化的部分並給出相關解釋,下面給出程式碼:
/* 所有標籤需要清除內外邊距 */
* {
    margin: 0;
    padding: 0;
}

/* em斜體操作 */
em {
    font-style: normal;
}

/* li需要去除前方小圓點 */
li {
    list-style: none;
}

/* 圖片需要設定無邊框(照顧低版本瀏覽器),並設定垂直對齊用來解決圖片底部有縫隙問題 */
img {
    border: 0;
    vertical-align: middle;
}

/* 我們希望經過button時,滑鼠變為小手 */
button {
    cursor: pointer;
}

/* 對於連結我們去除底部線,設定顏色 */
a {
    color: #666;
    text-decoration: none;
}

/* 對於連結我們經過時換色 */
a:hover {
    color:#333;
}

/* 對於button和input,我們希望進行設定好字型需求 */
button,input {
    font-family: 微軟雅黑;
}

/* 對於body整體我們可以先定好字型的相關設定 */
body {
    background-color: #fff;
    font: 12px/1.5 微軟雅黑;
    color: #333;
}

/* 最後我們需要設定clearfix,在設計時可以直接使用 */
.clearfix {
    *zoom: 1;
}

.clearfix::after{
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}

結束語
好的,那麼關於CSS的補充內容就到這裡,希望上面的講解能給你帶來幫助!