CSS進階內容——佈局技巧和細節修飾我們在之前的文章中已經掌握了CSS的大部分內容，但仍有一些內容我們沒有涉略，這篇文章就是為了補充前面沒有涉及的內容，為我們的知識做出補充並且介紹一些佈局技巧當然，如果沒有學習之前的知識，可以到我的主頁中查看之前的文章：秋落雨微涼 - 博客園。元素的顯示與隱藏 ...

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" alt=""></div>
        <div class="chinese">紗霧老師,你好鴨</div>
    </div>
</body>
</html>

行內塊巧妙運用

我們常常需要用到頁面控制框架,我們將給出一個案例用來講解行內塊應用於頁面控制框架

案例圖片:

案例代碼:

<!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的補充內容就到這裡,希望上面的講解能給你帶來幫助!