Web開發學習筆記（39）-CSS3（12）彈性盒子

1）flex-direction 屬性：

flex-direction 屬性指定了彈性子元素在父容器中的排列方向和順序。

其語法格式為：

flex-direction: row | row-reverse | column | column-reverse;

其屬性值的意義如下所示：

屬性值	描述
row	橫向從左到右排列（左對齊），默認的排列方式。
row-reverse	反轉橫向排列（右對齊），從后往前排，最后一項排在最前面。
column	縱向排列
column-reverse	反轉縱向排列，從后往前排，最后一項排在最上面。

<!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>
        .content{
            width:200px;
            height:200px;
            border:1px solid #C3C3C3;
            display:flex;
        }
        .content2{
            flex-direction: row-reverse;/*行對齊，主軸起點與終點相反*/
        }
        .content3{
            flex-direction: column;/*列對齊，主軸起點與終點相同*/
        }
        .content4{
            flex-direction: column-reverse;/*列對齊，主軸起點與終點相反*/
        }
        .box{
            width:50px;
            height:50px;
            color:black;
        }
    </style>
</head>
<body>
    <div class="content content1">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content2">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content3">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content4">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
</body>
</html>

flex-direction指定了彈性子元素在父容器中的排列方向和順序

（2）flex-wrap 屬性：

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

其語法格式為：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其屬性值的意義如下所示：

屬性值	描述
nowrap	默認，彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap	彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行。
wrap-reverse	反轉 wrap 排列。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

flex-wrap指定彈性盒子子元素換行方式

（3）align-items 屬性：

align-items 屬性是用來設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

其語法格式為：

align-items: flex-start | flex-end | center | baseline | stretch;

其屬性值的意義如下所示：

屬性值	描述
flex-start	彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end	彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center	彈性盒子元素在該行的側軸（縱軸）上居中放置。
baseline	如彈性盒子元素的行內軸與側軸為同一條，則該值與 flex-start 等效。其它情況下，該值將參與基線對齊。
stretch	如果指定側軸大小的屬性值為 auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照 min/max-width/height 屬性的限制。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

flex-items設置或檢索彈性盒子元素在軸上對齊方式

（4）align-content 屬性：

align-content 控制多行對齊方式，若只有一行則不起作用。

其語法格式為：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

其屬性值的意義為：

屬性值	描述
stretch	默認。各行將會伸展以占用剩余的空間。
flex-start	各行向彈性盒容器的起始位置堆疊。
flex-end	各行向彈性盒容器的結束位置堆疊。
center	各行向彈性盒容器的中間位置堆疊。
space-between	各行在彈性盒容器中平均分布。
space-around	各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1塊</div>
      <div class="center">div2塊</div>
      <div class="right">div3塊</div>
      <div class="left">div4塊</div>
      <div class="center">div5塊</div>
      <div class="right">div6塊</div>
      <div class="left">div7塊</div>
      <div class="center">div8塊</div>
      <div class="right">div9塊</div>
      <div class="left">div10塊</div>
      <div class="center">div11塊</div>
      <div class="right">div12塊</div>
    </div>
  </body>
</html>

...
#content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;/*各行向彈性盒容器的起始位置堆疊*/
      }
    ...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;/*各行向彈性盒容器的結束位置堆疊*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: center;/*各行向彈性盒容器的中間位置堆疊*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;/*各行在彈性盒容器中平均分布*/
      }
...

      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;/*各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半*/
      }

align-content控制多行對齊方式

練習一下：

在 body 中有兩對帶有 id 選擇器的 div 標簽，分別為 container 和 content。

id 選擇器名為 container 的 div 標簽在頁面上顯示為一個長和寬為 200 個像素的帶邊框的正方形，并設置它的子元素居中排布。

id 選擇器名為 content 的 div 標簽是它的子元素，在頁面上呈正圓形顯示在正方形邊框的中部。

完成代碼，看到如下效果：

先開篇之前先提個問題：

為什么Flex box跟Grid box的是以start、end為排列規則，而不是常規的top 、right 、bottom 跟left？

先不要急著往下翻，大家先思考一下。

這個問題的答案，魚頭會在文章中給出，歡迎大家帶著這個問題往下翻閱，如果已經知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的邏輯屬性

2017年5月18日，W3C的 CSS工作組(CSS Working Group) 發布了 CSS邏輯屬性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的書寫模式(writing mode)中，可以抽取出共性的抽象概念(如開始位置，或行)，這些邏輯抽象概念需要在不同書寫模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依賴這些共性的邏輯概念。該 CSS 模塊給出了用于通過邏輯方式(而不是基于物理坐標、書寫方向和維映射等)控制布局的邏輯屬性和取值(logical properties and values)。這個模塊來源于CSS21中關于邏輯屬性和值的特性。

對于前端來說，我們一直習慣于使用top 、 right 、 bottom、 left來定義我們的HTML元素，這跟我們物理上的概念是一致的。但是對于CSS這個原本是為了服務于圖文展示才誕生的語言來說，其實是不匹配的，為什么這么說？

writing-mode

writing-mode：定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。

writing-mode一共有以下5個改變HTML文本書寫規則的值(還有幾個是用在SVG上的，本文不予討論)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定義了內容從左到右水平流動，從上到下垂直流動。下一條水平線位于上一條線下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定義了內容從上到下垂直流動，從右到左水平流動。下一條垂直線位于上一行的左側。

writing-mode: vertical-lr;

writing-mode: vertical-lr定義了內容從上到下垂直流動，從左到右水平流動。下一條垂直線位于上一行的右側。

writing-mode: sideways-rl; (僅Firefox41+實現)

writing-mode: sideways-rl定義了內容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設置在右側。

writing-mode: sideways-lr;(僅Firefox41+實現)

writing-mode: sideways-lr內容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設置在左側。

源碼如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>

圖示如下：

從上圖可以發現，當我們設置了padding-right: 100px;的時候，不同的書寫規則，展示效果是不一樣的。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

在最開始的時候，HTML與CSS只服務于英語國家，但是隨著互聯網的發展，逐漸各個不同書寫規則的國家也開始流行了起來。

我們原來的CSS邏輯屬性是按照物理邏輯，從上(top)、右(right)、下(bottom)、左(left)劃分的。

那么按著這個規則去修改文本屬性時，就會出現上述這種不符合語法規則的狀態。

大概也是基于這個原因，所以W3C發布了新的邏輯屬性與值。

新舊邏輯屬性對比

CSS新舊邏輯屬性是完全不同的兩種模型。

我們首先來看看新舊有的邏輯屬性的對比圖示：

左舊右新

通過上圖可以得知新舊邏輯屬性對應關系如下：

舊的邏輯屬性新的邏輯屬性 margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start width inline-size height block-size

由上表可以得知，把Y軸方向的屬性都改為了block，X軸方向的屬性都改為了inline。

對于不同語系的國家，書寫順序會可能有很大的差異，意思就是block跟inline的方向不同。例如：

在英語國家 padding-inline-start=padding-left
在阿拉伯padding-inline-start=padding-right
在日本 padding-inline-start=padding-top

這就意味著舊的邏輯屬性，在某些國家里會變得不合常理。

CSS定位

CSS的定位屬性變化如下：

舊的邏輯屬性新的邏輯屬性 top inset-block-start bottom inset-block-end left inset-inline-start right inset-inline-end

例子如下：

/* 舊的邏輯屬性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的邏輯屬性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的邏輯屬性支持簡寫 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮動

浮動float的屬性也改了。

舊的邏輯屬性新的邏輯屬性 float: left float: inline-start float: right float: inline-end

text-align

文本text-align的屬性也改了。

舊的邏輯屬性新的邏輯屬性 text-align: left text-align: start text-align: right text-align: end

direction

除了writing-mode，還有一個排版屬性就是direction，跟writing-mode類似，不一樣的是writing-mode是控住網頁布局方向的，而direction是控制文本對齊方向的。屬性如下：

direction: ltr;

默認值，讓文本和其他元素從左到右顯示。

direction: rtl;

讓文本和其他元素從右到左顯示。

吐槽一下，看到這里的切圖仔們，抓緊跑路重構吧，等哪天此屬性正式被啟用，就真的GG了。不過我想應該會立個屬性來選擇性開啟物理屬性還是邏輯屬性，不然這對前端來說將會是一場災難！

CSS的盒子模型

基礎盒模型(CSS basic box model)

當瀏覽器對一個render tree進行渲染時，瀏覽器的渲染引擎就會根據基礎盒模型(CSS basic box model)，將所有元素劃分為一個個矩形的盒子，這些盒子的外觀，屬性由CSS來決定。

我們在瀏覽器控制臺輸入如下代碼就可以看到頁面的每一個元素都是由一個矩形來包裹的，這些就是盒子

$$('*').forEach(e=> {
  e.style.border='1px solid';
})

圖示如下：

每個盒子都由四個部分組成：

內容(content)

盒子(box) 的內容，顯示標簽內一切的文本，圖案或者別的內容。

內邊距(padding)

盒子(box) 內的填充物，樣式為透明，主要負責擴展盒子內區域大小。

外邊距(margin)

盒子(box) 外部的區域，樣式為透明，負責隔離相鄰的元素。

邊框(border)

盒子(box) 的邊界，負責隔離外邊距以及內邊距。

盒子模型的值

盒子模型一共有三個值：

content-box

content-box為標準的盒子模型。盒子的width跟height只包括盒子本身的width與height屬性。

計算法則：

width=width

height=height

border-box

border-box為盒子模型可選的屬性之一。盒子的width跟height包括content、padding跟border。這也是當文檔處于 Quirks模式時Internet Explorer使用的盒模型。

計算法則：

width=width + border + padding

height=height + border + padding

padding-box

padding-box為非標準屬性，曾經在Firefox中實現過，但是在Firefox 50中被刪除。padding-box的width和height 屬性包括內容和內邊距，但是不包括邊框和外邊距。

圖示：

這里吐槽一下，不知道為何沒有margin-box，雖然并沒有太大意義，當真實現了效果估計也很詭異，但是作為一個強迫癥患者晚期，少了一個屬性總感覺好不舒服。

視覺格式化模型(visual formatting model)

CSS的視覺格式化模型(visual formatting model) 是根據 基礎盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉換一個個盒子的實際算法。
官方說法就是：它規定了用戶端在媒介中如何處理文檔樹( document tree )。

每個盒子的布局由以下因素決定：

盒子的尺寸
盒子的類型：行內盒子 (inline)、行內級盒子 (inline-level)、原子行內級盒子 (atomic inline-level)、塊盒子 (block)
定位：普通流、浮動、絕對定位
文檔樹中當前盒子的子元素 或 兄弟元素
視口(viewport) 的尺寸和位置
盒子內部圖片的尺寸
其他某些外部因素

視覺格式化模型(visual formatting model) 的計算，都取決于一個矩形的邊界，這個矩形，被稱作是 包含塊( containing block ) 。一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之為：一個(元素的)框為它的子孫節點建造了包含塊。包含塊是一個相對的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代碼為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時 table 又是 td 的包含塊，不是絕對的。

盒子的生成

盒子的生成是 CSS視覺格式化模型 的一部分，用于從文檔元素生成盒子。盒子的類型取決于CSS display 屬性。

塊級元素當元素的display 為 block、list-item 或 table 時，它就是塊級元素。
塊級盒子塊級盒子用于描述它與父、兄弟元素之間的關系。每個塊級盒子都會參與塊格式化上下文（block formatting context）的創建。每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box） 主塊級盒子包含由后代元素生成的盒子以及內容，同時它也會參與定位方案。一個同時是塊容器盒子的塊級盒子稱為塊盒子（block box）。
匿名盒子某些情況下需要進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能被CSS 選擇器選中，也就是所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。因此稱為匿名盒子(anonymous boxes)。
行內元素當元素的display 為 inline、inline-block 或 inline-table 時，它就是行內級元素。顯示時可以與其他行內級內容一起顯示為多行。
行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文（inline formatting context）的創建。
匿名行內盒子類似于塊盒子，CSS引擎有時候也會自動創建一些行內盒子。這些行內盒子無法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認值 initial。
行盒子行盒子由行內格式化上下文創建，用來顯示一行文本。在塊盒子內部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據整個塊盒子的寬度）。當有浮動元素時，行盒子會從向左浮動的元素的右邊緣延伸到向右浮動的元素的左邊緣。
run-in 盒子（在CSS 2.1的標準中移除了） run-in盒子可以通過display: run-in來設置，它既可以是塊盒子，又可以是行內盒子，這取決于它后面的盒子的類型。

定位規則

一旦形成了盒子，CSS引擎就需要定位它們來完成布局。

定位所使用的規則如下：

普通流在普通流中，盒子會依次放置。在塊格式化上下文（block formatting context）中，盒子在垂直方向依次排列。在行內格式化上下文（inline formatting context） 中，盒子則水平擺列。
浮動：當一個盒子的float不為none，并且position為static或relative時，該盒子為浮動定位。 float: left：盒子會定位到當前行盒子的開始位置（左側）。 float: right：盒子會定位到當前行盒子的尾部位置（右側）。
絕對定位：如果元素的position 為 absolute 或 fixed，該元素為絕對定位。在絕對定位中，盒子會完全從當前流中移除，并且不會再與其有任何聯系。

作者：大前端世界
鏈接：https://www.jianshu.com/p/3446dd9b22a6

二部分 CSS

第八章 css基礎知識

css基礎知識：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內部樣式-head區域style標簽里面
外部樣式-link調用
內聯樣式-標簽元素里面
css內的注釋：/*注釋內容*/
css樣式表的語法
CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
盒子名或者標簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個預先確定的顏色，它們是
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow
用十六進制的顏色值表示(紅、綠、藍)
#FF0000或者#F00
用rgb(r,g,b)函數表示
如：rgb(255,255,0)
用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)
如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表
藍色
用rgba(r,g,b,a)函數表示
其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數表示
色調、飽和度、亮度、透明度
例子

 <div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#F00;">background-color:#F00</div>
	<div style="background-color:#ffff00;">background-color:#ffff00</div>
	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>

內部樣式表
當單個頁面需要設置樣式時，就應該使用內部樣式表。
使用 <style></style>標簽在文檔<head></head>里面定義內部樣式表

<head>
 <style type="text/css" >
 p{color:red;}
 </style>
</head>

從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應用于很多頁面時，就需要用到外部樣式表，首先需要創建一個css文件，然后引用到我們的頁面中。
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>
內聯樣式表（優先級高）
寫在標簽里面的樣式
如：<p style="color:red;"></p>
表示給p標簽里面的文字顏色設置為紅色
區別：外鏈樣式與導入樣式
link標簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
加載的順序的區別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
兼容性的區別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
在樣式控制上(比如動態改變網頁的布局時,使用javascript操作DOM)的區別，此時@import就無能為力了。

樣式的優先級補充
相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
內聯樣式表（標簽內部） > 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
層疊優先級是:
瀏覽器缺省< 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式…共12個優先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優先級順序為：
一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！

第九章 css選擇器(上)

css選擇器：
class類選擇器可以重復利用
id選擇器唯一
標簽選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器 p{color:red;}
ID選擇器
選擇id命名的元素以 # 開頭 #p1{color:#0f0;}
類選擇器
class選擇器，選擇clas命名的元素以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;} 選擇包含title的a標簽
a[title][href]{color:red;} 選擇包含title和href的a標簽
> + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當于包含元素）
p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標簽）
a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標簽）
a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
*/（可和其他標簽結合一起用）
a:active {color:#0000FF;} / 選定的鏈接 /
注意
偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
輸入偽類選擇器（針對表單）
input:focus{color:red;} / 鍵盤輸入焦點 /
其他偽類選擇器
p:first-child{color:red;} /* 第一個p */
:before 在元素之前添加內容。
:after 在元素之后添加內容。
css優先規則
內聯樣式表-> ID 選擇器—> Class 類選擇器->標簽選擇器

第十一章背景屬性

背景屬性：
背景的添加：
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
background-position的取值可為英文單詞或者數值和百分值。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。
background-size的數值取值
background-size:x y;
background-size的數值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動

第十二章文字文本屬性

css文字文本屬性：
文字屬性
color:red; 文字顏色
font-size:12px; 文字大小
font-weight:“bold” 文字粗細(bold/normal)
font-family:“宋體” 文字字體
font-variant:small-caps小寫字母以大寫字母顯示
文本屬性
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距

第十三章盒子模型

盒子模型
盒子模型就是一個有高度和寬度的矩形區域
所有html標簽都是盒子模型
div標簽自定義盒子模型
所有的標簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。
盒子模型的組成
盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積
border 邊框
常見寫法 border:1px solid #f00;
單獨屬性：
border-width:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color (顏色)
padding 內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（設置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并

補充盒子模型內容

標準盒子模型
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
IE盒子模型

從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width=padding+border+內容
標準盒子模型=內容的寬度（不包含border+padding）
例：
一個盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px
那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎么樣才算是選擇了“標準 w3c盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。
假如不加doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff會采用標準w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

用 jquery 做的例子來證實一下

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox=$.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標準w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox=$.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標準 w3c盒子模型”
所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型
擴展
學會使用box-sizing布局

第十四章塊元素、行元素與溢出

基本概念
塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；
行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
行塊轉換
display:none; 不顯示
display:block; 變成塊級元素
display:inline; 變成行級元素
display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
溢出
overflow:hidden; 溢出隱藏
overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條
overflow:auto; 如果內容被修剪，則產生滾動條
文本不換行：white-space:nowrap;
長單詞換行：word-wrap:break-word;
行內元素和快級元素小結
一、塊級元素：block element
每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；
塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如只能包含塊級元素。
DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
二、行內元素：inline element
也叫內聯元素、內嵌元素等；行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。
三、block（塊）元素的特點:
①、總是在新行上開始；
②、高度，行高以及外邊距和內邊距都可控制；
③、寬度缺省是它的容器的100%，除非設定一個寬度。
④、它可以容納內聯元素和其他塊元素
四、inline元素的特點
①、和其他元素都在一行上；
②、高，行高及外邊距和內邊距不可改變；
③、寬度就是它的文字或圖片的寬度，不可改變
④、內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下:
設置寬度width 無效。設置高度height無效，可以通過line-height來設置。設置margin
只有左右margin有效，上下無效。
設置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
五、常見的塊狀元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是CSS layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
noscript – 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無序列表
六、常見的內聯元素
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
bdo – bidi override
big – 大字體
br – 換行
cite – 引用
code – 計算機代碼(在引用源碼的時候需要)
dfn – 定義字段
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標簽
q – 短引用
s – 中劃線(不推薦)
samp – 定義范例計算機代碼
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
七，可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del- 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本
八、行內元素與塊級元素有什么不同
區別一：
塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高
區別三：
塊級：塊級元素可以設置margin，padding
行內：行內元素水平方向的margin-left; margin-right;
padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
替換元素有如下：（和img一樣的設置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實際的內容
可以通過修改display屬性來切換塊級元素和行內元素

第十五章定位

static靜態定位（不對它的位置進行改變，在哪里就在那里）
默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
fixed固定定位（參照物–瀏覽器窗口）—做彈窗廣告用到
生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。
relative（相對定位）（參照物以他本身）
生成相對定位的元素，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經有定位的父元素進行定位)
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
一切皆為框
塊級元素: div、h1或p元素即：顯示為一塊內容稱之為 “塊框“ ;
行內元素: span,strong,a等元素即：內容顯示在行中稱 “行內框”;
使用display屬性改變成框的類型即：display:block; 讓行內元素設置為塊級元素，display:none; 沒有框
相對定位：
如果對一個元素進行相對定位，它將出現在它所在的位置上。
通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
絕對定位：
元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
<frameset> —- 用來定義一個框架；雙標簽
不能和 <body> 一起使用
rows、cols屬性
rows 定義行表示框架有多少行（取值 px/%/ * ）
cols 定義列表示框架有多少列（取值px/ %/ * ）
frame子框架
<frame> —- 表示框架中的某一個部分；單標簽，要跟結束標志
src 顯示的網頁的路徑
name 框架名
frameborder 邊框線（取值 0 / 1）
<noframes>屬性
<noframes> 提供不支持框架的瀏覽器顯示body的內容；雙標簽

<frameset>
 <frame src=“” />
 <frame src=“” />
 <frame src=“” />
 <noframes>
 <body>內容</body>
 </noframes>
</frameset>

<iframe>內聯框架
iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）
允許和 body 一起使用
width 寬（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 邊框線（取值 0 / 1）
src 顯示的網頁的路徑

第十七章 css高級屬性

opacity透明屬性
opacity
對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
對于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
對于早期火狐，使用-moz-opacity:值; 值為0-1
所以寫透明屬性時，一般寫法是

 {	
 opacity:0.5;
 filter:alpha(opacity：50);/*0-100*/
 -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

border-radius圓角邊框屬性
向 div 元素添加圓角邊框
border-radius:10px;
box-shadow陰影屬性
box-shadow屬性向框添加陰影效果,后面跟4個參數。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標簽,媒體嵌入插件標簽，可以通過<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等

CSS部分導圖總結

css常見簡寫

在線咨詢

上一篇：微信應用號開啟內測，Html5技術將徹底顛覆APP
下一篇：Python+selenium自動化之table操作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發學習筆記（39）-CSS3（12）彈性盒子

練習一下：

CSS的邏輯屬性

writing-mode

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: vertical-lr;

writing-mode: sideways-rl; (僅Firefox41+實現)

writing-mode: sideways-lr;(僅Firefox41+實現)

新舊邏輯屬性對比

CSS定位

CSS浮動

text-align

direction

direction: ltr;

direction: rtl;

CSS的盒子模型

基礎盒模型(CSS basic box model)

內容(content)

內邊距(padding)

外邊距(margin)

邊框(border)

盒子模型的值

content-box

border-box

padding-box

視覺格式化模型(visual formatting model)

盒子的生成

定位規則

您的項目需求