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項目；
• Flex布局的原理：通過給父盒子添加flex屬性粘勒，來控制子盒子的位置和排列方式竞端；

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

• flex-direction：設(shè)置主軸的方向，方向有主軸與交叉軸庙睡，其值有以下四種：
  • row：默認(rèn)值事富，主軸為水平方向技俐，子元素在水平方向上，從左到右依次排列赵颅；
  • row-reverse：主軸為水平方向虽另，子元素在水平方向上，從右到左依次排列饺谬；
  • column：主軸為垂直方向捂刺，子元素在垂直方向上，從上到下依次排列募寨；
  • column-reverse：主軸為垂直方向族展，子元素在垂直方向上，從下到上依次排列拔鹰；

image.png

• justify-content：設(shè)置子元素在主軸方向上的對齊方式仪缸，具體的對齊方式與主軸的方向有關(guān)，其值有以下五種列肢，假設(shè)主軸的方向為主軸為從左到右恰画；
  • flex-start：默認(rèn)值，子元素左對齊瓷马；
  • flex-end：子元素右對齊拴还；
  • center：子元素居中；
  • space-between：子元素兩端對齊欧聘，子元素之間的間隔都相等片林；
  • space-around：子元素之間的間隔是，兩端子元素到邊框的間隔的兩倍怀骤；
• align-items：設(shè)置子元素在交叉軸方向上的對齊方式费封，具體的對齊方式與交叉軸的方向有關(guān)，其值有以下五種蒋伦，假設(shè)主軸的方向為主軸為從上到下弓摘；
  • flex-start：子元素與交叉軸的起點對齊；
  • flex-end：子元素與交叉軸的終點對齊凉敲；
  • center：子元素與交叉軸的中點對齊衣盾；
  • 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)重疊加的問題女嘲，需要計算權(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