溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS高級用法有哪些

發(fā)布時間：2021-12-07 09:56:49 來源：億速云 閱讀：115 作者：小新 欄目：互聯(lián)網(wǎng)科技

這篇文章主要介紹CSS高級用法有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

對齊塊元素

  • 塊元素指的是占據(jù)全部可用寬度的元素，并且在其前后都會換行。

  • 塊元素的例子：<h2>、<p>、<div>

使用margin屬性來水平對齊

  • 可通過將左和右邊距設(shè)置為"auto"，來對齊塊元素。

  • 把左和右外邊距設(shè)置為auto，指的是均等地分配可用的外邊距。結(jié)果就是居中的元素：

    。center{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}


    案例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .center {
            margin: auto;
            width: 70%;
            background-color: #b0e0e6;
        }
    </style>
    <title>CSS 水平對齊</title>
</head>

<body>
    <div class="center">
        <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>
        <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>
    </div>

    <p>提示：如果寬度是 100%，則對齊沒有效果</p>
    <p><b>注釋：</b>除非已經(jīng)聲明了 !DOCTYPE，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。</p>
</body>


</html>


CSS高級用法有哪些

使用position屬性進行左和右對齊

  • 對齊元素的方法之一是使用絕對定位

    .right{
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
}


    案例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .right {
            position: absolute;
            right: 0px;
            width: 100px;
            background-color: #b0e0e6;
        }

    </style>
    <title>使用 position 屬性進行左和右對齊</title>
</head>

<body>
    <div class="right">
        <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>
        <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>
        <p>.right
            {
            position:absolute;
            right:0px;
            width:300px;
            background-color:#b0e0e6;
            }</p>
    </div><hr>
</body>

</html>


CSS高級用法有哪些

跨瀏覽器兼容性問題

  • 當(dāng)像這樣對齊元素時，對<body>元素的外邊距和內(nèi)邊距進行預(yù)定義是一個好主意。這樣可以避免在不同瀏覽器中出現(xiàn)可見的差異。

    body{
    margin:0;
    padding:0;
}
.container{
    position:relative;
    width:100%;
}
.right{
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
}


使用float屬性來進行左和右對齊

  • 對齊元素的另一種方式是使用float屬性：

    .right{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}


CSS尺寸(Dimension)

  • CSS尺寸(Dimension)屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。

    屬性描述
    height設(shè)置元素高度
    line-height設(shè)置行高
    max-height設(shè)置元素的最大行高
    max-width設(shè)置元素的最大寬度
    min-height設(shè)置元素的最小高度
    min-width設(shè)置元素的最小寬度
    width設(shè)置元素的寬度

  • 可能的值：

    值描述
    auto默認，瀏覽器會自動計算出實際的高度。
    length使用px、cm等單位定義高度。
    %基于包含它的塊級對象的百分比高度。
    inherit從父元素繼承height屬性值。

CSS分類屬性

  • CSS分類屬性允許你控制如何顯示元素，設(shè)置圖像顯示于另一元素中的何處：

    • 相對于其正常位置來定位元素；

    • 使用絕對值來定位元素；

    • 以及元素的可見度。

      屬性描述
      clear設(shè)置一個元素的側(cè)面是否允許其他的浮動元素。
      cursor規(guī)定當(dāng)指向某元素之上時顯示的指針類型。
      display設(shè)置是否及如何顯示元素。
      float定義元素在哪個方向浮動。
      position把元素放置到一個靜態(tài)的、相對的、絕對的或固定的位置中。
      visibility設(shè)置元素是否可見

  • CSS display屬性

值描述
none此元素不會顯示。
block此元素將顯示為塊級元素，前后有換行符。
inline默認。此元素會被顯示為內(nèi)聯(lián)元素，前后無換行符。
inline-block行內(nèi)塊元素。
list-item此元素會作為列表顯示。
run-in此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。
compact該值由于很少用，在CSS2.1中已被刪除。
marker該值由于很少用，在CSS2.1中已被刪除。
table此元素會作為塊級表格來顯示(類似<table>)，表格前后有換行符。
inline-table此元素會作為內(nèi)聯(lián)表格來顯示(類似<table>)，表格前后無換行符。
table-row-group此元素會作為一個或多個行的分組來顯示(類似<tbody>)。
table-header-group此元素會作為一個或多個行的分組來顯示(類似<thead>)。
table-footer-group此元素會作為一個或多個行的分組來顯示(類似<tfoot>)。
table-row此元素會作為一個表格行顯示(類似<tr>)。
table-column-group此元素會作為一個或多個列的分組來顯示(類似<colgroup>)。
table-column此元素會作為一個單元格列顯示(類似<col>)。
table-cell此元素會作為一個表格單元格顯示(類似<td>和<th>)。
table-caption此元素會作為一個表格標題顯示(類似<caption>)。
inherit規(guī)定從父元素繼承display屬性的值。

注：

  • inline：默認。此元素會被顯示為內(nèi)聯(lián)元素，前后無換行符。

  • block：此元素將顯示為塊級元素，前后有換行符。

    • 比如在一個項目列表中，每項都是超鏈接，正常是鼠標移動到文字上才激活超鏈接，如果你把li設(shè)置為塊級元素，那么鼠標移動到這個塊上也就是這個li的范圍就會激活超鏈接！

  • none：此元素不會被顯示。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS display 屬性</title>
    <style type="text/css">
        p {
            display: inline
        }

        div {
            display: none
        }

        span {
            display: block
        }
    </style>
</head>

<body>
    <p>本例中的樣式表把段落元素設(shè)置為內(nèi)聯(lián)元素。</p>

    <p>而 div 元素不會顯示出來！</p>

    <div>div 元素的內(nèi)容不會顯示出來！</div>

    <span>本例中的樣式表把 span 元素設(shè)置為塊級元素。</span>
    <span>兩個 span 元素之間產(chǎn)生了一個換行行為。</span>
</body>

</html>

CSS高級用法有哪些

導(dǎo)航欄

  • 擁有易用的導(dǎo)航條對任何網(wǎng)站都很重要。

  • 通過CSS，可以把乏味的HTML菜單轉(zhuǎn)換成漂亮的導(dǎo)航欄。

  • 導(dǎo)航欄 = 連接列表。

  • 導(dǎo)航欄需要標準的HTML作為基礎(chǔ)。

  • 導(dǎo)航欄基本上是一個鏈接列表，因此使用<ul>和<li>元素是非常合適的。

    • 案例1：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>導(dǎo)航欄基本上是一個鏈接列表</title>
    <style>
        ul.test {
            list-style-type: none;
            margin: 0;
            padding: 0;
        
        }

    </style>

</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <ul class="test">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p><b>注釋：</b>我們使用在測試鏈接中使用了 href="#"。在真實的網(wǎng)站中，應(yīng)該是真實的 URL。</p>
</body>

</html>


CSS高級用法有哪些

  • 案例2：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>完整樣式的導(dǎo)航欄實例</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        a:link,
        a:visited {
            display: block;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #bebebe;
            width: 100px;
            text-align: center;
            padding: 4px;
            text-decoration: none;
            text-transform: uppercase;
        }

        a:hover,
        a:active {
            background-color: #cc0000;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>

</html>


CSS高級用法有哪些

  • 案例3：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>完整樣式的導(dǎo)航欄實例</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        a:link,
        a:visited {
            display: block;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #bebebe;
            width: 100px;
            text-align: center;
            padding: 4px;
            text-decoration: none;
            text-transform: uppercase;
        }

        a:hover,
        a:active {
            background-color: #cc0000;
        }

        .向左浮動 {
            float: left;
        }
    </style>
</head>

<body>
    <ul>
        <li class="向左浮動"><a href="#home">Home</a></li>
        <li class="向左浮動"><a href="#news">News</a></li>
        <li class="向左浮動"><a href="#contact">Contact</a></li>
        <li class="向左浮動"><a href="#about">About</a></li>
    </ul>
</body>

</html>


CSS高級用法有哪些

  • 從列表中去掉圓點和外邊距

    ul{
    list-style-type:none;  /* 取消圓點 */
    margin:0;  /* 取消外邊距 */
    padding:0;  /* 取消內(nèi)邊距 */
}


  • 垂直導(dǎo)航欄：如果要構(gòu)建垂直導(dǎo)航欄，只需要定義<a>元素的樣式

    • display:block 把鏈接顯示為塊元素，可使整個鏈接區(qū)域可點擊(不僅僅是文本)。

      a{
    display:block;
    width:60px;
}


  • 完整樣式的導(dǎo)航欄：見上面的案例2

  • 水平導(dǎo)航欄：

    • 有2種創(chuàng)建水平導(dǎo)航欄的方法：使用行內(nèi)顯示和浮動列表項。

      li{
    display:inline;  /* 行內(nèi)顯示 */
}


      li{
    float:left;  /* 向左浮動顯示列表項 */
}
a{
    display:block;  /* 塊方式顯示導(dǎo)航欄 */
    width:60px;  /* 寬度固定為60px */
}


    • 兩種方法都可以，但若需要鏈接擁有相同尺寸就只能使用浮動方法。

  • 圖片庫：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 圖片庫</title>
    <style>
        div.img {
            margin: 3px;
            border: 1px solid #bebebe;
            height: auto;
            width: auto;
            float: left;
            text-align: center;
        }

        div.img img {
            display: inline;
            margin: 3px;
            border: 1px solid #bebebe;
        }

        div.img a:hover img {
            border: 1px solid #333333;
        }

        div.desc {
            text-align: center;
            font-weight: normal;
            width: 150px;
            font-size: 12px;
            margin: 10px 5px 10px 5px;
        }
    </style>
</head>

<body>
    <div class="img">
        <a target="_blank" href="img/tulip_ballade.jpg" height="">
            <img src="img/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
        </a>
        <div class="desc">春意盎然</div>
    </div>

    <div class="img">
        <a target="_blank" href="img/tulip_flaming_club.jpg">
            <img src="img/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
        </a>
        <div class="desc">繁花似錦</div>
    </div>

    <div class="img">
        <a target="_blank" href="img/tulip_fringed_family.jpg">
            <img src="img/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
        </a>
        <div class="desc">在此處添加對圖像的描述</div>
    </div>

    <div class="img">
        <a target="_blank" href="img/tulip_peach_blossom.jpg">
            <img src="img/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
        </a>
        <div class="desc">在此處添加對圖像的描述</div>
    </div>
</body>

</html>


CSS高級用法有哪些

以上是“CSS高級用法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手