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

TML 已經發展了多年，現在 W3C 已經發布了 HTML 5.1 的提案推薦標準，一些陳舊廢棄的標簽已經在后繼的標準中逐漸消失。這里為大家列出那些已經被廢棄 HTML 標簽，看看你是不是還在使用它們。

HTML 已經發展了多年，現在 W3C 已經發布了 HTML 5.1 的提案推薦標準，一些陳舊廢棄的標簽已經在后繼的標準中逐漸消失。這里為大家列出那些已經被廢棄 HTML 標簽，看看你是不是還在使用它們。

<acronym>

首字母縮寫，例如 WWW

類似的有<abbr>標簽，表示單詞縮寫，例如：<abbr>inc.</abbr>。語法如下：

<acronym title="World Wide Web">WWW</acronym>
<abbr title="incorporated">inc.</abbr>

推薦用<abbr>，不要用<acronym>（忽略上面提到的語義上的差異）。

<applet>

Java 小應用程序，主要提供繪圖功能（在頁面上通過代碼繪制一些東西），例如：

<applet code="ShowImage.class" width=600 height=400 archive="Imagetest.jar"></applet>

目前幾乎沒什么用了，因為運行需要 JRE，而目前主流瀏覽器并不默認安裝 JRE。

推薦使用<canvas>繪圖，或者用<object>+<embed>嵌入 flash代替<applet>。

注意：使用<object> +<embed> 是為了更好的兼容性，如果場景允許，推薦使用<object>。

<basefont>

<basefont>
標簽定義基準字體。該標簽可以為文檔中的所有文本定義默認字體顏色、字體大小和字體系列，例如：

<basefont color="red" size="5" face="Arial" />

<basefont>
標簽只有 IE 支持。

推薦直接給<body> 元素定義默認字體，所有子元素都會繼承這些屬性值。

<bgsound>

用來添加背景音樂，例如：

<bgsound src="your.mid" autostart="true" loop="infinite">

推薦使用<audio> 或者<object>+<embed>來代替，例如：

<embed src="your.mid" autostart="true" loop="true" hidden="true">

<big>

用來放大字體，放大一號（嵌套多層可以放大更多），不支持的瀏覽器顯示粗體，例如：

 <big>大1號</big><big><big>大2號</big></big>

至于“號”是怎么定義的就別管了，不推薦使用，建議根據語義采用<em>、<strong>或者自定義樣式類代替。

<blink>

可以實現閃爍效果，例如：

<blink>Why would somebody use this?</blink>

支持性很差，不推薦使用，同樣不推薦使用（各大瀏覽器支持<blink>，但沒有任何效果）：

<p>This should be avoided as well.</p>

建議采用<animation>代替

<center>

使內容居中，例如：

<center>文本及子元素會居中</center>

效果類似于如下 CSS：

text-align: center;

不建議使用，確實沒有任何理由去用。

<dir>

目錄列表，例如：

<dir>
    <li>html</li>
    <li>xhtml</li>
    <li>css</li>
</dir>

效果和<ul>基本相同，瀏覽器默認樣式下列表項的左邊距有細微差異。

不推薦使用，建議根據語義采用<ul>、<ol>或者<dl>。

<font>

用來定義字體、字號和顏色，例如：

<font face="verdana" color="green" size="3">This is some text!</font>

屬性值和<basefont>一樣。

不推薦使用，建議用 CSS 代替，沒理由用這個標簽。

<frame>

配合<frameset>分欄，例如：

<!DOCTYPE html>
<html>

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

</html>

注意：用<frameset>替換掉<body>。

復雜的后臺頁面會用到<frameset>+<frame><hgroup>
給一系列標題分組，例如：

<hgroup>
   <h1>The reality dysfunction</h1>
   <h2>Space is not the only void</h2>
</hgroup>

雖然提供了一點語義，但因為已經過時，所以不推薦使用。

建議采用><header>代替，例如：

<header>
   <h1>The reality dysfunction</h1>
   <p class="subheading">Space is not the only void</p>
</header>

<isindex>

單行文本控件，初始顯示prompt屬性值，例如：

<isindex prompt="string" />

目前支持性很差，不推薦使用，建議用<input>元素代替。

W3C 建議千萬不要用：

No, really, don’t use it. This element is deprecated. It is not implemented anymore.

具體用法可以參考 http://reference.sitepoint.com/html/isindex。

<listing>

不用管它是什么，微軟都不建議使用了：

This element is obsolete and should no longer be used. Use HTMLPreElement, code or CSS instead. Renders text in a fixed-width font.

<marquee>

滾動字幕，效果很強大，例如：

<marquee bgcolor="#ccffff" vspace="10" direction="up" height="104" width="22.35%" loop="3" scrollamount="1" scrolldelay="10" hspace="20">
<p align="center"><font color="#000000">此處輸入滾動內容</font></p></marquee>

<marquee>這里是輸入文字的地方，還可以放圖片代碼、Flash動畫代碼和gif動態小圖代碼。</marquee>

多用來實現公告，雖然已經過時了，但效果確實很強大，而且支持性良好。

<multicol>

用來實現多列布局，不建議使用，任何主流瀏覽器都不曾支持過。

MDN 稱其從未被任何主流瀏覽器支持過：

The HTML element was an experimental element designed to allow multi-column layouts. It never got any significant traction and is not implemented in any major browsers.

<nextid>

作用未知，支持性未知，不建議使用。

<nobr>

禁止換行，例如：

<p>Our telephone number is <nobr>0800 123 123 123</nobr>.</p>

不推薦使用，建議用 CSS 代替：

white-space: nowrap;

<noembed>

在瀏覽器不支持<embed>時，顯示內容，類似于<noscript>，例如：

<noembed>
<img src="/images/inflate.jpg" alt="Inflate the tyre by holding the
pump at 90 degree angle to the valve">
<p>You can inflate the tyre by holding the pump at 90 degree angle
to the valve, as shown in the image above.</p>
</noembed>

不推薦使用，如果需要考慮兼容性的話，建議采用<object>+<embed>+<noembed>（embed / noembed 作為 object 的回退）。

<noframes>

在瀏覽器不支持<frameset>+<frame>時，顯示內容，類似于<noscript>，例如：

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
  <noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>

</html>

<noframe>標簽中可以包含任何能夠出現在<body>中的標簽。

如果需要考慮兼容性的話，可以作為<frame>的回退，建議采用 float/flex + Ajax 實現，根據具體場景來定。

<plaintext>

忽略內容中的html標簽，作用類似于><pre>，例如：

<p>The markup for this is:</p>
<plaintext>
    <h1>Main heading goes here</h1>
    <p>First paragraph goes here</p>
    <h2>Sub-heading goes here</h2>
</plaintext>.

</body>
</html>

不推薦使用，建議根據語義用<pre>或者<code>代替。

<spacer>

插入空白white spaces，例如：

<span>Just a text node</span>
<spacer type="horizontal" size="10"></spacer>
<span>Just another text node</span>
<spacer type="block" width="10" height="10"></spacer>

主流瀏覽器都不支持，不推薦使用。

<strike>

刪除線，效果類似于<del>和<s>，例如：

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

不推薦使用，建議用><del>代替。

<tt>

鍵盤輸入（teletype），例如：

<p><tt>Teletype text</tt></p>

不推薦使用，建議根據語義用<kbd>（鍵盤按鍵）、<var>（變量）、<code>（代碼）、<samp>（樣例輸出）或者CSS代替。

<xmp>

80 列的樣例輸出，樣式效果類似于<pre>，語義類似于<samp>，例如：

<xmp>
Stock ID    Description             Price         Quantity in Stock
--------    -----------             -----         -----------------
116         Inflatable Armchair     21.50                13
119         Walkie Talkie           40.20                44
</xmp>

目前瀏覽器支持該標簽，但不限制 80 列。

不推薦使用，建議采用<samp>代替。

https://www.linuxprobe.com/html-w3c-mdn.html

覺導向的斟酌

容易閱讀=容易看+容易理解

①內容和字體的關系

Ⅰ.字號

這里主要講偏書籍、雜志、手冊類的排版規則。

標題：大標題>小標題>副標題>引言>正文
正文：一般至少為9pt，如果面向的是兒童、老人這類人群，則需酌情放大字體。
補充說明：如批注，圖片說明、原作者等，一般在6.5pt左右。

Ⅱ.邊界＆對比

邊界即畫面上下左右的邊距留白，這里我覺得用HTML排版里，比較典型的盒子模型為例：

邊界的比例，尤其是在書籍印刷上，給人心理的愉悅度影響程度很大。

比如窄邊距，往往有一種壓迫感，兩眼一黑…（快…快拿莎普愛思救我…）

對比分幾種：

字號大小對比

重量粗細對比

字體形狀對比

文字色彩對比

當然啦~對比主要是將文字動靜分化開~比較有主次、沖擊力。

②易于閱讀的排版

Ⅰ.行長/行距/分欄

當文章較長時，行長、行距、分欄的設定往往會決定讀者的閱讀節奏。

如果閱讀節奏和主題內容較為吻合，往往能得到較好的閱讀體驗，甚至能增強代入感。

行長：即每行長度，太長會給人疲累感（太長不看-v-），太短會給人頻繁換行的閱讀上的不快。
行距：每行間的留白，通常8pt的正文字號，適合行距在1.3mm~2.72mm之間。
分欄：欄數越多往往意味著行長縮減，故應結合行長調整。

Ⅱ.文字間距

文字間距是個神奇的東西，往往它決定著文字在閱讀時的“韻律感”。

西方字體，如W和I，其字體寬度本來就不同（來感受一下：WIWIWIWI IIIIIIWWW）

但是東方字體,，每個字占據空間相同，幾乎都是一個個正方形方塊。

字距狹窄：突出密度感、緊湊感。
字句寬松：給人舒適怡然感、結合細體文字往往有一種設計感。

最后，關于視覺的引導性。

舉幾個極端的例子大家就懂，了比如：

——或者：

更多精彩內容請關注微信公眾號：prouduct

投稿郵箱：prouduct@sina.com

在線咨詢

上一篇：現代CSS：純 CSS 實現倒計時效果
下一篇：微博網頁版公告：原版微博將在近期下線

您的項目需求

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