CSS的其他屬性

display屬性

• display：設(shè)置目標(biāo)元素的顯示，其常見的值有如下：
  • none：隱藏目標(biāo)元素，目標(biāo)元素不會再占用原來的位置；
  • block：顯示目標(biāo)元素，且將目標(biāo)元素轉(zhuǎn)成塊級元素，使得目標(biāo)元素具有塊級元素的性質(zhì)；
  • inline：將目標(biāo)元素轉(zhuǎn)成行內(nèi)元素，使得目標(biāo)元素具有行內(nèi)元素的性質(zhì)；
  • inline-block：將目標(biāo)元素轉(zhuǎn)成行內(nèi)塊元素，使得目標(biāo)元素具有行內(nèi)塊元素的性質(zhì)；
  • flex：設(shè)置為彈性布局；

visibility元素可見屬性

• visibility：設(shè)置目標(biāo)元素是否可見，其值如下：
  • visible：目標(biāo)元素可見；
  • hidden：目標(biāo)元素隱藏，依然會占用原來的位置；

overflow屬性

• overflow：規(guī)定當(dāng)內(nèi)容溢出元素框時，溢出的內(nèi)容會如何處理，其值有如下：
  • visible：默認(rèn)值，溢出的內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外；
  • hidden：溢出的內(nèi)容會被修剪，不可見；
  • scroll：溢出的內(nèi)容會被修剪，會顯示滾動條以便查看溢出的內(nèi)容，會出現(xiàn)水平和垂直方向上的兩個非滾動條；
  • auto：溢出的內(nèi)容會被修剪，會顯示滾動條以便查看溢出的內(nèi)容，在需要的方向上添加滾動條，這是與scroll的主要區(qū)別；
• overflow屬性在嵌套元素的外邊距合并也有應(yīng)用，給父元素設(shè)置overflow: hidden，可解決父元素外邊距塌陷問題；

cursor鼠標(biāo)屬性

• cursor：設(shè)置鼠標(biāo)指針放在一個元素邊界范圍內(nèi)時所用的光標(biāo)形狀，常見值如下：
  • auto：默認(rèn)值；
  • default：通常是一個箭頭；
  • pointer：一只小手；
  • crosshair：十字架；
  • move：可移動的十字架；

outline輪廓屬性

• outline：設(shè)置目標(biāo)元素的輪廓，其位于邊框的外圍緊貼著邊框，與邊框十分類似；
  • outline-width：設(shè)置輪廓寬度；
  • outline-color：設(shè)置輪廓顏色；
  • outline-style：設(shè)置輪廓樣式；
  • outline: 10px red solid：設(shè)置輪廓的復(fù)合寫法；
• outline: none或者outline: 0：可以去掉某些標(biāo)簽?zāi)J(rèn)的藍(lán)色邊框，例如input標(biāo)簽；

vertical-align垂直居中

• vertical-align屬性可控制行內(nèi)元素或者行內(nèi)塊元素在垂直方向上的布局，對于塊級元素?zé)o效；
• 目標(biāo)元素的vertical-align屬性與父元素的基線baseline有這莫大關(guān)聯(lián)，如下圖所示：

image.png

image.png

• 基線baseline：單行內(nèi)容框，緊貼小寫字母x的底部橫線就是此當(dāng)前行的基線；
• 中線middle：在基線的基礎(chǔ)上向上偏移x-height高度一半的位置屬于中線middleline；
• 行高line-height：上下兩行基線之間的間距就是行高；
• x-height：小寫字母x的字體高度；
• 行框：指單行內(nèi)容框；
• 行內(nèi)框：指單行內(nèi)不同的行內(nèi)元素的塊狀顯示；
  
  image.png
• vertical-align屬性的常見值有如下：

image.png

<style>
    .block {
      font-size: 50px;
      background-color: pink;
      border: 2px red solid;
    }

    .child {
      display: inline-block;
      width: 40px;
      height: 80px;
      margin-top: 20px;
      background-color: rebeccapurple;
      padding-top: 10px;
      border: 10px blue solid;
    }

    .top {
      vertical-align: top;
      background-color: brown;
    }

    .child1 {
      display: inline-block;
      margin-bottom: 20px;
    }
</style>
<div class="block">
    <span class="child"></span>
    <span class="top">子元素1yzx</span>
    <span class="child1">gamexxx</span>
</div>

image.png

Flex布局

• Flex稱為彈性布局，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為Flex布局；
• 當(dāng)我們?yōu)楦负凶釉O(shè)置為Flex布局之后，子元素的float，clear和vertical-align屬性將會失效；
• 采用Flex布局的元素，稱為Flex容器，它的所有子元素自動成為容器的成員，稱為Flex項(xiàng)目；
• Flex布局的原理：通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式；

Flex布局的父元素的常見屬性

• flex-direction：設(shè)置主軸的方向，方向有主軸與交叉軸，其值有以下四種：
  • row：默認(rèn)值，主軸為水平方向，子元素在水平方向上，從左到右依次排列；
  • row-reverse：主軸為水平方向，子元素在水平方向上，從右到左依次排列；
  • column：主軸為垂直方向，子元素在垂直方向上，從上到下依次排列；
  • column-reverse：主軸為垂直方向，子元素在垂直方向上，從下到上依次排列；

image.png

• justify-content：設(shè)置子元素在主軸方向上的對齊方式，具體的對齊方式與主軸的方向有關(guān)，其值有以下五種，假設(shè)主軸的方向?yàn)橹鬏S為從左到右；
  • flex-start：默認(rèn)值，子元素左對齊；
  • flex-end：子元素右對齊；
  • center：子元素居中；
  • space-between：子元素兩端對齊，子元素之間的間隔都相等；
  • space-around：子元素之間的間隔是，兩端子元素到邊框的間隔的兩倍；
• align-items：設(shè)置子元素在交叉軸方向上的對齊方式，具體的對齊方式與交叉軸的方向有關(guān)，其值有以下五種，假設(shè)主軸的方向?yàn)橹鬏S為從上到下；
  • flex-start：子元素與交叉軸的起點(diǎn)對齊；
  • flex-end：子元素與交叉軸的終點(diǎn)對齊；
  • center：子元素與交叉軸的中點(diǎn)對齊；
  • baseline：子元素的第一行文本與基線對齊；
  • stretch：默認(rèn)值，如果子元素未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度；
• flex-wrap：默認(rèn)情況下，子元素都排在一條線（又稱"軸線"）上，其值有如下三種：
  • nowrap：默認(rèn)值：不換行；
  • wrap：換行，第一行在上方；
  • wrap-reverse：換行，第一行在下方；

Flex布局的子元素的常見屬性

• flex-grow：子元素占據(jù)父元素剩余空間的比例系數(shù)；

CSS的三大特性

• CSS的三大特性分別為：層疊性，繼承性與優(yōu)先級；

層疊性

• 層疊性：相同選擇器給設(shè)置相同的樣式，此時一個樣式就會覆蓋(層疊)另一個沖突的樣式；
  • 樣式?jīng)_突，遵循的原則是就近原則，哪個樣式離結(jié)構(gòu)越近，就執(zhí)行哪個樣式；
  • 樣式不沖突，不會發(fā)生層疊；

繼承性

• 繼承性：子標(biāo)簽會繼承獲取父標(biāo)簽的樣式屬性，具體情形如下：
• 所有子元素都能繼承的屬性有：visibility，cursor；
• 大部分子元素都可以繼承的屬性有：
  • font，font-size，font-weight，font-style，font-family等字體屬性；
  • color，text-align，text-decoration，text-indent，line-height，text-shadow，letter-spacing，word-spacing，white-space等文本屬性；
  • a標(biāo)簽不能繼承父標(biāo)簽的color屬性，必須自定義才能改變文本顏色；
  • 塊級元素可以繼承父標(biāo)簽的width寬度；
• 子元素不能繼承的屬性有：
  • height，min-width，max-width，min-height，max-height；
  • background背景屬性；
  • margin，padding，border等盒子模型屬性；
  • float，position；
  • display，overflow，vertical-align，transition等其他屬性；

優(yōu)先級

• 優(yōu)先級：當(dāng)同一個元素標(biāo)簽指定多個選擇器，就會有優(yōu)先級的產(chǎn)生；
  • 選擇器相同，則執(zhí)行層疊性；
  • 選擇器不同，則根據(jù)選擇器的權(quán)重執(zhí)行，
  • 選擇器的權(quán)重如下所示：

image.png

<!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>
    /* 標(biāo)簽選擇器 */
    div {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    /* 類選擇器 */
    .div-box {
      background-color: aqua;
    }

    /* id選擇器 */
    #box {
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <!-- 行內(nèi)樣式表 -->
  <div class="div-box" id="box" style="background-color: blue;"></div>
</body>

</html>

• 由于針對同一個元素的選擇器優(yōu)先級為：行內(nèi)樣式表 > id > class > 標(biāo)簽，所以div最終顯示藍(lán)色；
• 權(quán)重疊加：復(fù)合選擇器會有權(quán)重疊加的問題，需要計(jì)算權(quán)重；
• div ul li：0003；
• .nav ul li：0012；
• a:hover：0011，a是元素選擇器，hover是偽類選擇器；
• .nav a：0011；

<!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>
        /** li的權(quán)重為0001 */
        
        li {
            color: red;
        }
        /** ul中的li的權(quán)重為 0001+0001=0002 */
        
        ul li {
            color: green;
        }
        /** ul中的li的權(quán)重為 0010+0001=0011 */
        
        .nav li {
            color: hotpink;
        }
    </style>
</head>

<body>
</body>
<ul class="nav">
    <li>似懂非懂上課</li>
    <li>風(fēng)打底衫</li>
    <li>行高水淀粉</li>
    <li>返回都看過的</li>
    <li>黃金分割了科菲迪斯</li>
</ul>
</html>

CSS屬性的書寫順序：

image.png