Html5+CSS3基礎知識匯總-CSS3篇

天總結的是CSS3的學習內容

一、CSS簡介

CSS3是CSS技術的升級版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模塊化發展的，把它分解成小的模塊，并且加入更多新的模塊進來：

二、CSS3的應用

2.1.超級選擇器

CSS選擇器：使用CSS對html頁面中的元素實現一對一，一對多或者多對一的控制：

選擇器
{
    樣式
}

1.屬性選擇器

在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。

[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個樣式。

[att$=val]:如果元素用att表示的屬性的屬性值的結尾字符用val指定的字符，那么該元素使用這個樣式。

[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符，那么該元素使用這個樣式。

注意： /如果純用數字的時候該樣式不會顯示成功，需要用\連接與數字最近的符號注意！只有’-‘的字符需要加’\’/

<head>
    <meta charset="UTF-8">
    <title>css3中的屬性選擇器</title>
    <style>
        /*1.[att*=val] 此時只有id=section1A的div會擁有該樣式*/
        [id*=section1]{
            background-color: blueviolet;
        }
        /*2.[att^=val] 此時只有id=footer的div會擁有該樣式*/
        [id^=f]{
            background-color: blue;
        }
        /*3.[att$=val] 此時只有id=sectionB的div會擁有該樣式*/
         [id$=B]{
            background-color: chartreuse;
        }
        /*注意！*/
        [id$=\-1]{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <h1>CSS3中的屬性選擇器</h1>
    <div id="section1A">section1A</div>
    <div id="sectionB">sectionB</div>
    <div id="section2-1">section2-1</div>
    <div id="footer">footer</div>
</body>

2.結構性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經定義好的不可以隨便起名。

p.right{
    color:red;
}
p.left{
    colot:blue;
}

(2)偽類選擇器—-最常見的偽類選擇器：a（使用順序為：未，已，懸，停）

        a:link{
            color: #ff6600;
        }
        a:visited{
            color: blueviolet;
        }
        a:hover{
            color: aqua;
        }
        /*鼠標點擊時*/
        a:active{
            color: darkblue;
        }

(3)偽元素選擇器
針對于CSS中已經定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

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

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

    g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

       g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

4.兄弟元素選擇器
用來指定位于同一父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！

<子元素>~<子元素之后的同級兄弟元素>
    {
        樣式
    }

2.2.文字陰影與自動換行

1.text-shadow

p{
    text-shadow：length(陰影離開文字的橫方向距離) length(陰影離開文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}

位移距離：前兩個參數代表的陰影離開文字的橫(縱)方向距離，不可省略。

第三個參數代表模糊半徑，代表陰影向外模糊時候的范圍，數值越大越模糊。

當沒有指定顏色值時，會使用默認文字的顏色。

指定多個陰影，并且可以針對每個陰影用逗號分隔。

2.word-break：瀏覽器文本自動換行。

3.word-wrap：長單詞與URL地址自動換行。

4.服務器端字體和@font-face屬性

定義斜體或粗體：在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務器服務器端字體的時候，需要根據斜體還是粗體使用不同的漢字。

顯示客戶端字體：首先將font-family設置為本地的字體名，然后將src屬性設置為local(‘字體’)。

font-variant：設置文本是否大小寫。

font-weight：設置文本的粗細。

font-stretch：設置文本是否橫向的拉伸變形。

2.3.盒模型

1.各種盒模型

inline-block類型

使用inline-block類型來執行分列顯示

<head>
    <style>
    div.div1{
            background-color: #ff6600;
            width: 300px;
            height: 150px;
            float: left;
        }
        div.div2{
            background-color: #21fffc;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.div3{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
            clear: both;
        }
        /*inline-block*/
        div.div4{
            background-color: #ff6600;
            display: inline-block;
            width: 300px;
        }
        div.div5{
            background-color: #21fffc;
            vertical-align: top;
            display: inline-block;
            width: 200px;
        }
        div.div6{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
        }
      </style>
</head>
<body>
    <h1>使用inline-block類型來執行分列顯示-1.傳統方式</h1>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <hr color="darkred">
    <h1>使用inline-block類型來執行分列顯示-1.inline-block方式</h1>
    <div class="div4">
        div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
    </div><div class="div5">
        div2div2div2div2div2div2div2
        div2div2div2div2div2div2div2div2
    </div>
    <div class="div6">
        div3
    </div>  
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

inline-table類型

<head>
    <style>
        table{
           display: inline-table;
           vertical-align: bottom;
           border: 2px solid blueviolet;
           width: 400px;
           height: 200px;
           color: darkviolet;
       }
        td{
            border: 2px solid violet;
        }
    </style>
</head>
<body>
    <h1>使用inline-table類型-一個表格前后都有文字將其環繞</h1>
    巴拉巴拉
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    巴拉巴拉
</body>

list-item類型

可以將多個元素作為列表顯示，同時在元素的開頭加上列表的標記。

run-in類型和compact類型

none類型

當元素被指定none后，該元素不會顯示

2.顯示不下的內容

overflow屬性：指定對盒子中容納不下的內容的顯示辦法

overflow-x屬性與overflow-y屬性

textoverflow：在盒子的末尾顯示代表省略符號的‘…’，但是該屬性只在內容在水平位置上超出時顯示。

3.盒子陰影

box-shadow:讓盒在顯示的時候產生陰影的效果

對盒內子元素設置陰影

對一個文字或第一行設置陰影：通過first-line或者first-letter

對表格和對單元格使用陰影

4.box-sizing寬高計算

指定針對元素的寬度和高度的計算方法

    (content)border-box:屬性值表示元素的寬高度(不)包括內補白區域及邊框的寬度高度

<head>
    <style>
        div.a,div.b{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid darkviolet;
            background-color: violet;
        }
        div.a{
            box-sizing: border-box;
        }
        div.b{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing：content&border-box</h2>
    <div class="ab">
        <div class="a">
            box-sizing：border-box代表寬度和高度包含內補白寬度高度，即雖然有padding和border，最終仍然為300px
        </div>
        <div class="b">
            box-sizing：content-box:代表不包含寬高度內補白區域，即最后為300px+30px+30px
        </div>
    </div>
</body>

2.4.邊框和背景樣式

1.新增的背景屬性

background-clip:指定背景的顯示范圍

border-box：從邊框開始

padding-box：從內邊框開始

content-box：從內容開始

background-orgin:指定繪制背景圖像的起點

可以指定繪制時的起始位置，默認為padding，可以為border或者content左上角開始繪制。

background-size:指定背景中圖像的尺寸

auto

length

percentage：以父元素的百分比設置背景圖像的寬高度。

cover：全覆蓋。

contain ：與cover相反，主要將背景圖片縮小，來適合布滿整個容器。

2.顯示多個背景屬性：第一個圖像在最上面

3.圓角邊框：border-radius

指定兩個半徑：左上右下+左下右上

當不顯示邊框的時候，瀏覽器會把四個角繪制成圓角

修改邊框種類。

繪制四個不同半徑的邊框

4.圖像邊框：border-image

可以讓元素的長度或寬度處于隨時變化時，變化狀態的邊框統一使用一個圖像文件來進行繪制。

2.5.CSS3變形功能

1.利用transform實現文字或圖像的旋轉，縮放，傾斜移動這四種類型的變形處理。

旋轉：totate(角度)

縮放：scale(值):0.5即為縮放到50%

傾斜:skew(值),值為角度

移動：translate(值)

對一個元素使用多個方法

transform：方法1 方法2 方法 3 方法4

改變元素基點

transform-origin:

2.6.CSS3的動功能

1.transition功能：支持從一個屬性值平滑到另外一個屬性值

允許CSS屬性值在一定的時間內平滑的過度，這種效果可以在單擊，獲得焦點，被點擊或對元素任何改變中觸發，并圓滑的以動畫效果改變CSS屬性值。

(1)執行變換的屬性：transition-property：過渡即將開始

none：沒有屬性會獲得過渡效果

all:所以屬性會獲得過渡效果

property：定義應用過渡效果的CSS屬性名稱列表，以逗號分隔

(2)變換延續時間：transition-duration：規定完成過渡需要花費的時間，默認值零沒有效果。

(3)在延續時間段，變換速率的變化：transition-timing-function。

(4)變換延遲時間：transition-delay：指定一個動畫開始執行的時間，也就是當改變元素屬性值后多長時間開始執行過渡效果。

<head>
    <meta charset="UTF-8">
    <title>CSS3中的動畫效果</title>
    <style>
        div.transition1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            -webkit-transition:all 1s linear 1s;
        }
    </style>
</head>
<body>
    <h2>transition</h2>
    <div class="transition1"></div>
</body>

2.Animations功能：支持通過關鍵幀的指定來在頁面上產生更復雜的動畫現象。

name：指定合集名稱
duration：整個動畫執行完成所需時間
timing-function：實現動畫方法
iteration-count：重復播放次數

<head>
    <style>
        div.animation{
            width: 20px;
            height: 20px;
            background-color: #ef23ff;
        }
        /*關鍵幀的封裝*/
        @-webkit-keyframes myan{
            0%{
                background-color: violet;
                width: 50px;
            }
            10%{
                background-color: palevioletred;
                width: 100px;
            }
            30%{
                background-color: mediumvioletred;
                width: 200px;
            }
            50%{
                background-color: blueviolet;
                width: 40px;
            }
            70%{
                background-color: darkviolet;
                width: 400px;
            }
            90%{
                background-color: #7300a4;
                width: 600px;
            }
            100%{
                background-color: #4a0068;
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <h2>animation</h2>
    <div class="animation"></div>
</body>

2.7.CSS3的分頁

1.點擊及鼠標懸停分頁樣式

2.鼠標懸停過渡效果：transition: background-color .9s;

3.圓角樣式：border-radius

4.邊框：border:2px solid darkviolet;

2.8.布局相關樣式

1.多欄布局

column-count屬性：將一個元素中的內容分成多欄進行顯示，要將元素的寬度設置成多個欄目的總寬度

column-width屬性：指定欄目的寬度來生成分欄

column-gap屬性：指定欄目之間的距離

column-rule:欄目之間添加分隔線

2.盒布局：多欄布局的欄目寬度必須相等，指定欄目的寬度的時候也只能統一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內容頁面顯示，比如新聞。并不適合整個網頁編排時使用。而盒布局就相對比較隨意一些，可以定義成不同的頁面。

3.彈性盒子布局

(1)box-flex：使得盒子布局變成彈性布局：可以自適應窗口

(2)box-ordinal-group：改變元素的顯示順序

(3)box-orient：改變元素排列方向

horizontal:在水平行中從左向右排列子元素

vertical：從上向下垂直排列子元素

<style>
    div.all{
        display: -webkit-box;
        /*-webkit-box-orient: vertical;窗口垂直現實與水平顯示*/
        }
        .left{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group:3;
        }
        .right{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group: 2;
        }
        .center{
            -webkit-box-flex:1;
            background-color: #962fff;
            -webkit-box-ordinal-group: 1;
        }
    </style>

(4)元素的高度寬度自適應：就是元素的高度和寬度可以根據排列的方向改變而改變。
(5)使用彈性布局來消除空白：方法就是給子div中加入一個box-flex屬性。

<style>
    .center1{
            display: -webkit-box;/*盒模型顯示*/
            border: 5px solid darkviolet;
            -webkit-box-orient: horizontal;/*水平顯示*/
            width: 600px;
            height: 400px;
        }
        .d1{
            background-color: #ff99e1;
            -webkit-box-flex: 2;
        }
        .d2{
            background-color: #962fff;
            -webkit-box-flex: 3;
        }
        .d3{
            background-color: #ef23ff;
            -webkit-box-flex: 4;
        }
        .d1,.d2,.d3{
            -webkit-box-sizing: border-box;
        }
    </style>

(6)對多個元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。

(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對齊方式)

2.9.不同瀏覽器加載不同的CSS樣式

Media Queries模塊是CSS3中的一個和各種媒體相關的重要模塊

原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364

隨著互聯網+的深入發展，我們已經越來越感受到它的強大，HTML5也隨著互聯網火了半邊天，微信小程序、虛擬現實已經走進了我們生活，這又引發了一次互聯網發展高潮。現在互聯網企業對高端HTML5開發工程師的缺口依然很大，因此很多人抓住這個機會選擇學習HTML5開發。今天千鋒南京HTML5培訓小編將帶大家一起看一看HTML5有哪些知識需要你了解？準備入門HTML5的新手需要了解的知識有哪些？

HTML5到底是什么？

一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個部分，而不只是第一印象僅僅HTML部分而已，在CSS 3和JavaScript層面也有許多的創新，讓整個網頁從布局到處理都更加給力，新囊括的技術讓之前實現相當困難且安全性危機重重的功能變為了現實，

HTML5好處-為什么要用HTML5

HML5在布局上更得體，記得以前的主流table過渡到主流div;今的布局對搜索引擎更加友好，比如<article>內總是會包含文章內容，而nav是導航信息;HTML5的移動手機支持也日趨完善，兼容移動端可是一個簡單概念。雖然多網合一，兼容問題永遠存在，布局適配也是一門技術活;另外在Pad等其他客戶端也發揮著越來越重要的優勢。

HTML5的技術組成：

離線功能

HTML5透過JavaScript提供了數種不同的離線儲存功能，相對于傳統的Cookie而言有更好的彈性以及架構，并且可以儲存更多的內容。

WebStorage – 比Cookies更大、更有彈性的的儲存

Web SQL Database – 本地端的SQL資料庫

Indexed DB – Key-value的本地資料庫

Application Cache – 將部分常用的網頁內容cache起來

即時通訊

以往網站由于HTTP協定以及瀏覽器的設計，即時的互動性相當的受限，只能使用一些技巧來「模擬」即時的通訊效果，但HTML5提供了完善的即時通訊支援。

什么輪詢、第三方的統統不要，自已來實現。

WebSocket – 即時的socket連線

Web Workers – 以往JavaScript都是single thread，透過Worker可以有多個運算

Notifications – 塬生的提示訊息，類似像OS X的Growl提示

文件以及硬件支持

不知道大家有沒有發現，在Gmail等新的網頁程式當中，已經可以透過拖拉的方式將檔案作為郵件附件?這就是這部份HTML5檔案的功能中的Drag’n Drop和File API。

Drag’n Drop – HTML元素的拖拉

File API – 讀取使用者本機電腦的內容

Geolocation – 地理定位

Device orientation – 手持裝置的方向

Speech input – 語音輸入

語意化

語意化的網路是可以讓電腦能夠更加理解網頁的內容，對于像是搜尋引擎的優化(SEO)或是推薦系統可以有很大的幫助。

New tags – 新的標籤，像是<header>、<section>等

Application tags – 也是新的標籤，像是<meter>、<progress>等

Microdata – 加入語意的資料讓搜尋引擎等網站可以正確顯示

Form type – <form>可以加入的type便多了，包含email和tel等屬性，瀏覽器會協助進行資料格式的驗證

多媒體

Audio、Video的標簽支援以及Canvas的功能應該是大家對于HTML5最熟悉的部份了，也是許多人認為Flash會被取代的主要原因。

Audio video – 影片和音樂的塬生播放支援

Canvas – 2D的繪圖功能支援

Canvas 3D – 3D的繪圖功能支援

SVG – 向量圖支援

CSS 3

CSS3支援了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。

Selector – 更有彈性的選擇器

Webfonts – 嵌入式字體

Layout – 多樣化的排版選擇

Stlying radius gradient shadow – 圓角、漸層、陰影

Border background – 邊框的背景支援

Transition – 元件的移動效果

Transform – 元件的變形效果

Animation – 將移動和變形加入動畫支援

JavaScript

在比較JavaScript的基本面也新增了DOM的API、和瀏覽器上下頁的紀錄修改。

DOM API – 更方便的查詢DOM元件

History API – 瀏覽器的上下頁內容修改，方便AJAX可以保留瀏覽記錄

現在就用HTML5

截至目前而言，主流的網頁瀏覽器Firefox 5、Chrome 12和Safari 5都已經支援了許多的HTML5標準，而且目前最新版的IE 9也支援了許多HTML5標準。隨著使用者陸續升級到新版的瀏覽器，開發者應該在現在就可以著手開發!兼容性問題會隨著時間的推移而越來越少。但對于不得不照顧底版本用戶的網站，網上也有大量的回退解決方案。

以上就是千鋒南京HTML5培訓小編今天給大家帶來的新手入門HTML5需要了解的知識，希望本篇文章能夠對你有所幫助。想了解更多HTML5相關資訊歡迎關注千鋒南京官網，這里不僅有更多HTML5相關信息，還有專業的HTML5技術文章、教程視頻。

TML5小壩：學習HTML5，除了我們要拋下足夠的汗水之外，還需要有合適的方法。合理的方法能夠事半功倍，而不合理的方法則事倍功半。在此，我們幾個講師結合我們的課程，總結了八種方法，與大家分享，希望各位學會學習。

前言：本來這些方法是在昨日上課時分享給HTML5-5班孩子的，在這里發出來，主要是為了和大家分享，也希望每個學習HTML5的人，包括以后班級的孩子，能夠找到合理的方法。

方法1 整體到局部，骨架到血肉

在學習HTML和CSS時，會涉及到網頁的搭建。學習這個知識時，我們采用的方法是“由外及內”，“由整體到部分”，“由全局到細節”。學習東西，特別是在初識某個事物時，一定要從主干到枝葉，而不要陷入細節，糾結于其中。主干如同知識的一個主線，這種先找主干后添枝葉的學習方法能夠讓知識遺漏變成最少，也會比較容易建立起知識知識間的關系。

方法2 類比

在學習CSS引入方式這種知識點時，我們采用了另一種學習方法。辨析，或者也可以叫做類比。

這種方法主要針對于區分相似的兩種或多種事物。如strong與em，塊元素與行元素，同步與異步。

對于此類知識，應多多思考，抓取幾種事物的不同點，結合去記憶。

方法3 記憶很重要

學習時會遇到一些知識點，如有哪些數據類型，有哪些標簽元素。需要記憶的還是要記憶的。很多人在學習過程中覺得理解最重要，不需要記憶。這種想法是有問題的，如果連記都記不住，還談什么理解？

方法4 聚沙成塔

在網站中，我們能夠看到各種各樣的效果，有些效果看上去很高大上，很炫美。然而，再炫美的效果也是由眾多的知識點組合而成的。當我們對效果抽絲剝繭，就會發現，其實最初的它很簡單。

一朵櫻花并不起眼，但是當你從一條道路走過，道路兩旁栽種著數百棵櫻花樹，紛紛揚揚的花瓣飄灑下來，讓你仿佛置身于粉色的花雨之中。這就是所謂的聚沙成塔。有時，我們希望制作很漂亮的效果，這個時候，一定要懂得這個道理（JQ特效制作就是典型的例子）

PS：櫻花圖片來自于互聯網

歡迎溝通交流~HTML5小壩

方法5 循序漸進

一口吃不成胖子，也不是有一頓飯沒吃就可以減肥成功的。在學習過程中，會遇到一些“大型”的知識，這種知識比較難啃。遇到此類知識，不要想著如何一口吃掉它，而要一步一步來。動畫框架的學習就是一個典型。

在循序漸進中，思路很重要，換句話說，我們知道一個知識點很“大”，也知道要一口一口的吃，一步步的消化，但是，如果我們弄不清楚先吃什么再吃什么，也很難把這個知識啃下來。

這時候需要“思路”，也就是“流程”，在學習知識中，重點是關注流程和思路，而具體的小知識點充當的是血肉（和我們提到的第一個方法就掛鉤了，就是分清主干和枝葉）

方法6 知識的遷移

用已有知識輔助未知知識的學習，是很好的一種方法。通常這種方法應用于擁有相似特點的事物。例如：圓角邊框與外邊距、背景切割與背景原點、JS對象與JSON等

方法7 生活輔助學習

這種方法是講師用的最多的。

利用生活中實際的事物去輔助抽象知識的學習，能夠讓我們更好更快的理解和吸收知識。

例如在講解盒模型時我們利用了快遞中的方魚缸。在講解AJAX時我們利用了信件郵寄。在講解構造函數時，我們利用了毛坯房和裝修房。在講解引用類型變量的時候我們借助了鑰匙和倉庫的關系。前端學習裙前面是六11中間是四二八后面是一四2，把數字串在一起就可以了，每天都有免費學習網頁制作的課程，只要你有一顆學習的心就行了。

找一種合適的例子，輔助自己理解，是很好的方法，但是一定要注意，例子要合理～

方法8 實踐出真知

在學習一些知識過程中，有些孩紙不喜歡動手，而更多的是喜歡聽或者喜歡背。這種思路明顯是不好的。代碼，是個需要動手的活兒，掌握代碼靠的不僅僅是記憶，還需要嘗試。嘗試書寫代碼，發現現象，然后歸納總結，形成理論并記憶。

換句話說，理論來源于實踐，高于實踐（高于實踐的原因在于有總結與歸納）。在學習過程中，不能僅僅采用背理論再實踐這種學習方法，也要去經歷實踐到理論轉化的這種方法。

在線咨詢

上一篇：云翼建站手機網站教程：移動互聯網中的頁面設計
下一篇：問題式知識庫系列：5萬長文Java知識Java3+4

您的項目需求

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