第08章-CSS3新特性

2022-05-18 23:32 更新

第08章-前端核心技術(shù)-CSS3新特性

項(xiàng)目經(jīng)理(作者)：張明星

學(xué)習(xí)目標(biāo)

  1. 掌握CSS3彈性盒子的使用方法

  1. 掌握CSS3彈性盒子的水平分布方法 重點(diǎn)

  1. 掌握CSS3彈性盒子的垂直分布的方法 重點(diǎn)

  1. 掌握CSS3彈性盒子排序的用法

CSS3 彈性盒子屬性

屬性 描述
display 指定 HTML 元素盒子類(lèi)型。
flex-direction 指定了彈性容器中子元素的排列方式。
justify-content 設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
align-items 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
flex-wrap 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行。
align-content 修改 flex-wrap 屬性的行為，類(lèi)似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊
flex-flow flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)。
order 設(shè)置彈性盒子的子元素排列順序。
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex 設(shè)置彈性盒子的子元素如何分配空間。

flex（下級(jí)） 屬性

讓所有彈性盒模型對(duì)象的子元素都有相同的長(zhǎng)度，忽略它們內(nèi)部的內(nèi)容

  • flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。
  • flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性。

注意：如果元素不是彈性盒模型對(duì)象的子元素，則 flex 屬性不起作用。

語(yǔ)法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

屬性值

值 描述
flex-grow 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。0
flex-shrink 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。配合flex-basis一起用1
flex-basis 默認(rèn)子元素寬度長(zhǎng)度。合法值："auto"、"inherit"、"%"、"px"、"em"。
auto 與 1 1 auto 相同。
none 與 0 0 auto 相同。

案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #content {
                display: flex;
            }
            #content div{
                -webkit-flex-basis: 120px;
                flex-basis: 120px;
                border: 1px solid black;
            }
            .col-1 {
                /*
                flex-shrink: 1;
                -webkit-flex-shrink: 1;
                */
                background-color: red;
                flex-grow: 3;
                -webkit-flex-grow: 3;
            }
            .col-2 {
                background-color: blue;
                flex-grow: 2;
                -webkit-flex-grow: 2;
            }
            .col-3 {
                flex-grow: 1;
                -webkit-flex-grow: 1;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div class="col-1">
                第一列
            </div>
            <div class="col-1">
                第一列
            </div>
            <div class="col-2">
                第二列
            </div>
            <div class="col-2">
                第二列
            </div>
            <div class="col-3">
                第三列
            </div>
            <div class="col-3">
                第三列
            </div>
        </div>
    </body>
</html>

效果圖

justify-content（上級(jí)）水平排版

語(yǔ)法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

屬性值

值 描述
flex-start 默認(rèn)值。項(xiàng)目位于容器的開(kāi)頭。
flex-end 項(xiàng)目位于容器的結(jié)尾。
center 項(xiàng)目位于容器的中心。
space-between 項(xiàng)目位于各行之間留有空白的容器內(nèi)。
space-around 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
space-evenly 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。等分間距

flex-wrap（上級(jí)）空白處理方式

語(yǔ)法

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

屬性值

值 描述
nowrap 默認(rèn)值。規(guī)定靈活的項(xiàng)目不拆行或不拆列。
wrap 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列。
wrap-reverse 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列，但是以相反的順序。

nowrap（默認(rèn)）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

align-content（上級(jí)）多行垂直排版

語(yǔ)法

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

默認(rèn)值

值 描述
stretch 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。
center 項(xiàng)目位于容器的中心。
flex-start 項(xiàng)目位于容器的開(kāi)頭。
flex-end 項(xiàng)目位于容器的結(jié)尾。
space-between 項(xiàng)目位于各行之間留有空白的容器內(nèi)。
space-around 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
initial 設(shè)置該屬性為它的默認(rèn)值。
inherit 從父元素繼承該屬性。

align-items（上級(jí)）單（多）行垂直排版

語(yǔ)法

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

屬性值

值 描述
stretch 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。
center 項(xiàng)目位于容器的中心。
flex-start 項(xiàng)目位于容器的開(kāi)頭。
flex-end 項(xiàng)目位于容器的結(jié)尾。
baseline 項(xiàng)目位于容器的基線(xiàn)上。
initial 設(shè)置該屬性為它的默認(rèn)值。
inherit 從父元素繼承該屬性。

align-self單個(gè)子元素垂直排版

語(yǔ)法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

屬性值

值 描述
auto 默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒(méi)有父容器則為 "stretch"。
stretch 元素被拉伸以適應(yīng)容器。
center 元素位于容器的中心。
flex-start 元素位于容器的開(kāi)頭。
flex-end 元素位于容器的結(jié)尾。
baseline 元素位于容器的基線(xiàn)上。
initial 設(shè)置該屬性為它的默認(rèn)值。
inherit 從父元素繼承該屬性。

order子元素排序

order屬性可以調(diào)整元素默認(rèn)顯示順序

案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #main {
                width: 500px;
                height: 70px;
                border: 1px solid #c3c3c3;
                display: -webkit-flex;
                display: flex;
            }
            #main div {
                width: 70px;
                height: 70px;
                text-align: center;
                line-height: 70px;
            }
            div#myRedDIV {
                -webkit-order: 2;
            }
            div#myBlueDIV {
                -webkit-order: 4;
            }
            div#myGreenDIV {
                -webkit-order: 3;
            }
            div#myPinkDIV {
                -webkit-order: 1;
            }
            div#myRedDIV {
                order: 2;
            }
            div#myBlueDIV {
                order: 4;
            }
            div#myGreenDIV {
                order: 3;
            }
            div#myPinkDIV {
                order: 1;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div style="background-color:coral;" id="myRedDIV">1|order: 2;</div>
            <div style="background-color:lightblue;" id="myBlueDIV">2|order: 4;</div>
            <div style="background-color:lightgreen;" id="myGreenDIV">3|order: 5;</div>
            <div style="background-color:pink;" id="myPinkDIV">4|order: 1;</div>
        </div>
        <p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 order 屬性。</p>
        <p><b>注意:</b> Safari 6.1 及更新版本通過(guò) -webkit-order 屬性支持該屬性。</p>
    </body>
</html>

效果圖

flex-direction方向控制

語(yǔ)法

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

屬性值

值 描述
row 默認(rèn)值。靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣。
row-reverse 與 row 相同，但是以相反的順序。
column 靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。
column-reverse 與 column 相同，但是以相反的順序。
initial 設(shè)置該屬性為它的默認(rèn)值。
inherit 從父元素繼承該屬性。

CSS3 多列屬性

屬性 簡(jiǎn)介
columns CSS3 columns 屬性，是復(fù)合屬性，設(shè)置或檢索對(duì)象的列數(shù)和每列的寬度。
column-width CSS3 column-width 屬性，設(shè)置或檢索對(duì)象每列的寬度
column-count CSS3 column-count 屬性，設(shè)置或檢索對(duì)象的列數(shù)
column-gap CSS3 column-gap 屬性，設(shè)置或檢索對(duì)象的列與列之間的間隙
column-rule CSS3 column-rule 屬性，是復(fù)合屬性。設(shè)置或檢索對(duì)象的列與列之間的邊框。
column-rule-width CSS3 column-rule-width 屬性，設(shè)置或檢索對(duì)象的列與列之間的邊框厚度。
column-rule-style CSS3 column-rule-style 屬性，設(shè)置或檢索對(duì)象的列與列之間的邊框樣式。
column-rule-color CSS3 column-rule-color 屬性，設(shè)置或檢索對(duì)象的列與列之間的邊框顏色。
column-span CSS3 column-span 屬性，設(shè)置或檢索對(duì)象元素是否橫跨所有列。
column-fill CSS3 column-fill 屬性，設(shè)置或檢索對(duì)象所有列的高度是否統(tǒng)一。
column-break-before CSS3 column-break-before 屬性，設(shè)置或檢索對(duì)象之前是否斷行。
column-break-after CSS3 column-break-after 屬性，設(shè)置或檢索對(duì)象之后是否斷行。
column-break-inside CSS3 column-break-inside 屬性，設(shè)置或檢索對(duì)象內(nèi)部是否斷行。

簡(jiǎn)單分欄column-count

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ul {
                column-count: 5;
                -webkit-column-count: 5;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
            <li style="background-color: red;">第6列</li>
            <li style="background-color: gray;">第7列</li>
            <li style="background-color: yellow;">第8列</li>
            <li style="background-color: darkcyan;">第9列</li>
            <li style="background-color: brown;">第10列</li>
        </ul>
    </body>
</html>

效果展示

不同寬度分欄column-width

案例04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ul{
                column-width:300px;
                -webkit-column-width:300px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
        </ul>
    </body>
</html>

效果展示

有間距分欄 column-gap

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ul{
                column-count: 5;
                -webkit-column-count: 5;
            }
            ul:last-child{
                column-gap: 50px;
                -webkit-column-gap: 50px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
        </ul>
        <br>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
        </ul>
    </body>
</html>

效果展示

每欄間隙分割線(xiàn) column-rule

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ul{
                column-count: 5;
                -webkit-column-count: 5;
                column-rule: 3px solid #7FFF00;
                -webkit-column-rule: 3px solid #7FFF00;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
        </ul>
    </body>
</html>

效果展示

個(gè)別不分欄 column-span

案例07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ul{
                column-count: 5;
                -webkit-column-count: 5;
            }
            li:first-of-type{
                column-span: all;
                -webkit-column-span: all;
            }
            li:last-of-type{
                column-span: all;
                -webkit-column-span: all;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列</li>
            <li style="background-color: gray;">第2列</li>
            <li style="background-color: yellow;">第3列</li>
            <li style="background-color: darkcyan;">第4列</li>
            <li style="background-color: brown;">第5列</li>
            <li style="background-color: darkorchid;">第6列</li>
        </ul>
    </body>
</html>

效果展示

解決分欄子元素被分割

給子元素設(shè)置：

height: 100%;
overflow: auto;

案例08

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }


            ul {
                column-count: 5;
                -webkit-column-count: 5;
                column-fill: balance;
                -webkit-column-fill: balance;
            }


            li:first-of-type {
                column-span: all;
                -webkit-column-span: all;
            }


            ul:nth-of-type(2) li {
                height: 100%;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="background-color: red;">第1列<br></li>
            <li style="background-color: gray;height: 200px;">
                第2列第2列第2列第2列第2列第2列第2列
                第2列第2列第2列第2列第2列第2列第2列
                第2列第2列第2列第2列第2列第2列第2列
            </li>
            <li style="background-color: yellow;">第3列<br><br></li>
            <li style="background-color: darkcyan;">第4列<br></li>
            <li style="background-color: brown;">第5列<br><br></li>
            <li style="background-color: darkorchid;">第6列</li>
        </ul>
        <br>
        <ul>
            <li style="background-color: red;">第1列<br></li>
            <li style="background-color: gray;height: 200px;">
                第2列第2列第2列第2列第2列第2列第2列
                第2列第2列第2列第2列第2列第2列第2列
                第2列第2列第2列第2列第2列第2列第2列
            </li>
            <li style="background-color: yellow;">第3列<br><br></li>
            <li style="background-color: darkcyan;">第4列<br></li>
            <li style="background-color: brown;">第5列<br><br></li>
            <li style="background-color: darkorchid;">第6列</li>
        </ul>
    </body>
</html>

效果展示

屬性參考列表

1. 動(dòng)畫(huà)屬性

屬性 描述 CSS
@keyframes 定義一個(gè)動(dòng)畫(huà),@keyframes定義的動(dòng)畫(huà)名稱(chēng)用來(lái)被animation-name所使用。 3
animation 復(fù)合屬性。檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)特效。 3
animation-name 檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)名稱(chēng) ,必須與規(guī)則@keyframes配合使用，因?yàn)閯?dòng)畫(huà)名稱(chēng)由@keyframes定義 3
animation-duration 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間 3
animation-timing-function 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類(lèi)型 3
animation-delay 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的延遲時(shí)間 3
animation-iteration-count 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù) 3
animation-direction 檢索或設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng) 3
animation-play-state 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的狀態(tài) 3
animation-fill-mode 規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。

2. 背景屬性

屬性 描述 CSS
background 復(fù)合屬性。設(shè)置對(duì)象的背景特性。 1
background-attachment 設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。必須先指定background-image屬性。 1
background-color 設(shè)置或檢索對(duì)象的背景顏色。 1
background-image 設(shè)置或檢索對(duì)象的背景圖像。 1
background-position 設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。 1
background-repeat 設(shè)置或檢索對(duì)象的背景圖像如何鋪排填充。必須先指定background-image屬性。 1
background-clip 指定對(duì)象的背景圖像向外裁剪的區(qū)域。 3
background-origin S設(shè)置或檢索對(duì)象的背景圖像計(jì)算background-position時(shí)的參考原點(diǎn)(位置)。 3
background-size 檢索或設(shè)置對(duì)象的背景圖像的尺寸大小。 3

3. 邊框(Border) 和 輪廓(Outline) 屬性

屬性 描述 CSS
border 復(fù)合屬性。設(shè)置對(duì)象邊框的特性。 1
border-bottom 復(fù)合屬性。設(shè)置對(duì)象底部邊框的特性。 1
border-bottom-color 設(shè)置或檢索對(duì)象的底部邊框顏色。 1
border-bottom-style 設(shè)置或檢索對(duì)象的底部邊框樣式。 1
border-bottom-width 設(shè)置或檢索對(duì)象的底部邊框?qū)挾取?/td> 1
border-color 置或檢索對(duì)象的邊框顏色。 1
border-left 復(fù)合屬性。設(shè)置對(duì)象左邊邊框的特性。 1
border-left-color 設(shè)置或檢索對(duì)象的左邊邊框顏色。 1
border-left-style 設(shè)置或檢索對(duì)象的左邊邊框樣式。 1
border-left-width 設(shè)置或檢索對(duì)象的左邊邊框?qū)挾取?/td> 1
border-right 復(fù)合屬性。設(shè)置對(duì)象右邊邊框的特性。 1
border-right-color 設(shè)置或檢索對(duì)象的右邊邊框顏色。 1
border-right-style 設(shè)置或檢索對(duì)象的右邊邊框樣式。 1
border-right-width 設(shè)置或檢索對(duì)象的右邊邊框?qū)挾取?/td> 1
border-style 設(shè)置或檢索對(duì)象的邊框樣式。 1
border-top 復(fù)合屬性。設(shè)置對(duì)象頂部邊框的特性。 1
border-top-color 設(shè)置或檢索對(duì)象的頂部邊框顏色 1
border-top-style 設(shè)置或檢索對(duì)象的頂部邊框樣式。 1
border-top-width 設(shè)置或檢索對(duì)象的頂部邊框?qū)挾取?/td> 1
border-width 設(shè)置或檢索對(duì)象的邊框?qū)挾取?/td> 1
outline 復(fù)合屬性。設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓。 2
outline-color 設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的顏色。 2
outline-style 設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的樣式。 2
outline-width 設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的寬度。 2
border-bottom-left-radius 設(shè)置或檢索對(duì)象的左下角圓角邊框。提供2個(gè)參數(shù)，2個(gè)參數(shù)以空格分隔，每個(gè)參數(shù)允許設(shè)置1個(gè)參數(shù)值，第1個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)表示垂直半徑，如第2個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù) 3
border-bottom-right-radius 設(shè)置或檢索對(duì)象的右下角圓角邊框。 3
border-image 設(shè)置或檢索對(duì)象的邊框樣式使用圖像來(lái)填充。 3
border-image-outset 規(guī)定邊框圖像超過(guò)邊框的量。 3
border-image-repeat 規(guī)定圖像邊框是否應(yīng)該被重復(fù)（repeated）、拉伸（stretched）或鋪滿(mǎn)（rounded）。 3
border-image-slice 規(guī)定圖像邊框的向內(nèi)偏移。 3
border-image-source 規(guī)定要使用的圖像，代替 border-style 屬性中設(shè)置的邊框樣式。 3
border-image-width 規(guī)定圖像邊框的寬度。 3
border-radius 設(shè)置或檢索對(duì)象使用圓角邊框。 3
border-top-left-radius 定義左上角邊框的形狀。 3
border-top-right-radius 定義右上角邊框的形狀。 3
box-decoration-break 規(guī)定行內(nèi)元素被折行 3
box-shadow 向方框添加一個(gè)或多個(gè)陰影。 3

4. 盒子(Box) 屬性

屬性 描述 CSS
overflow-x 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對(duì)內(nèi)容的左/右邊緣進(jìn)行裁剪。 3
overflow-y 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪。 3
overflow-style 規(guī)定溢出元素的首選滾動(dòng)方法。 3
rotation 圍繞由 rotation-point 屬性定義的點(diǎn)對(duì)元素進(jìn)行旋轉(zhuǎn)。 3
rotation-point 定義距離上左邊框邊緣的偏移點(diǎn)。 3

5. 顏色(Color) 屬性

屬性 描述 CSS
color-profile 允許使用源的顏色配置文件的默認(rèn)以外的規(guī)范 3
opacity 設(shè)置一個(gè)元素的透明度級(jí)別 3
rendering-intent 允許超過(guò)默認(rèn)顏色配置文件渲染意向的其他規(guī)范 3

6. 內(nèi)邊距(Padding) 屬性

屬性 說(shuō)明 CSS
padding 在一個(gè)聲明中設(shè)置所有填充屬性 1
padding-bottom 設(shè)置元素的底填充 1
padding-left 設(shè)置元素的左填充 1
padding-right 設(shè)置元素的右填充 1
padding-top 設(shè)置元素的頂部填充 1

7. 媒體頁(yè)面內(nèi)容屬性

屬性 說(shuō)明 CSS
bookmark-label 指定書(shū)簽的標(biāo)簽 3
bookmark-level 指定了書(shū)簽級(jí)別 3
bookmark-target 指定了書(shū)簽鏈接的目標(biāo) 3
float-offset 在相反的方向推動(dòng)浮動(dòng)元素，他們一直具有浮動(dòng) 3
hyphenate-after 指定一個(gè)斷字的單詞斷字字符后的最少字符數(shù) 3
hyphenate-before 指定一個(gè)斷字的單詞斷字字符前的最少字符數(shù) 3
hyphenate-character 指定了當(dāng)一個(gè)斷字發(fā)生時(shí)，要顯示的字符串 3
hyphenate-lines 表示連續(xù)斷字的行在元素的最大數(shù)目 3
hyphenate-resource 外部資源指定一個(gè)逗號(hào)分隔的列表，可以幫助確定瀏覽器的斷字點(diǎn) 3
hyphens 設(shè)置如何分割單詞以改善該段的布局 3
image-resolution 指定了正確的圖像分辨率 3
marks 將crop and/or cross標(biāo)志添加到文檔 3
string-set 3

8. 尺寸(Dimension) 屬性

屬性 描述 CSS
height 設(shè)置元素的高度 1
max-height 設(shè)置元素的最大高度 2
max-width 設(shè)置元素的最大寬度 2
min-height 設(shè)置元素的最小高度 2
min-width 設(shè)置元素的最小寬度 2
width 設(shè)置元素的寬度 1

9. 彈性盒子模型（Flexible Box） 屬性(新)

屬性 說(shuō)明 CSS
flex 復(fù)合屬性。設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。 3
flex-grow 設(shè)置或檢索彈性盒的擴(kuò)展比率。 3
flex-shrink 設(shè)置或檢索彈性盒的收縮比率。 3
flex-basis 設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。 3
flex-flow 復(fù)合屬性。設(shè)置或檢索彈性盒模型對(duì)象的子元素排列方式。 3
flex-direction 該屬性通過(guò)定義flex容器的主軸方向來(lái)決定felx子項(xiàng)在flex容器中的位置。 3
flex-wrap 該屬性控制flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。 3
align-content 在彈性容器內(nèi)的各項(xiàng)沒(méi)有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)（垂直）。 3
align-items 定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。 3
align-self 定義flex子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對(duì)齊方式。 3
justify-content 設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。 3
order 設(shè)置或檢索彈性盒模型對(duì)象的子元素出現(xiàn)的順序。 3

10. 彈性盒子模型（Flexible Box） 屬性(舊)

屬性 說(shuō)明 CSS
box-align 指定如何對(duì)齊一個(gè)框的子元素 3
box-direction 指定在哪個(gè)方向，顯示一個(gè)框的子元素 3
box-flex 指定一個(gè)框的子元素是否是靈活的或固定的大小 3
box-flex-group 指派靈活的元素到Flex組 3
box-lines 每當(dāng)它在父框的空間運(yùn)行時(shí)，是否指定將再上一個(gè)新的行列 3
box-ordinal-group 指定一個(gè)框的子元素的顯示順序 3
box-orient 指定一個(gè)框的子元素是否在水平或垂直方向應(yīng)鋪設(shè) 3
box-pack 指定橫向盒在垂直框的水平位置和垂直位置 3

11. 字體（Font） 屬性

屬性 說(shuō)明 CSS
font 在一個(gè)聲明中設(shè)置所有字體屬性 1
font-family 規(guī)定文本的字體系列 1
font-size 規(guī)定文本的字體尺寸 1
font-style 規(guī)定文本的字體樣式 1
font-variant 規(guī)定文本的字體樣式 1
font-weight 規(guī)定字體的粗細(xì) 1
@font-face 一個(gè)規(guī)則，允許網(wǎng)站下載并使用其他超過(guò)"Web- safe"字體的字體 3
font-size-adjust 為元素規(guī)定 aspect 值 3
font-stretch 收縮或拉伸當(dāng)前的字體系列 3

12. 內(nèi)容生成屬性(Generated Content Properties)

屬性 說(shuō)明 CSS
content 與 :before 以及 :after 偽元素配合使用，來(lái)插入生成內(nèi)容 2
counter-increment 遞增或遞減一個(gè)或多個(gè)計(jì)數(shù)器 2
counter-reset 創(chuàng)建或重置一個(gè)或多個(gè)計(jì)數(shù)器 2
quotes 設(shè)置嵌套引用的引號(hào)類(lèi)型 2
crop 允許replaced元素只是作為一個(gè)對(duì)象代替整個(gè)對(duì)象的矩形區(qū)域 3
move-to Causes an element to be removed from the flow and reinserted at a later point in the document 3
page-policy 判定基于頁(yè)面的給定元素的適用于計(jì)數(shù)器的字符串值 3

13. 網(wǎng)格（Grid） 屬性

屬性 說(shuō)明 CSS
grid-columns 指定在網(wǎng)格中每列的寬度 3
grid-rows 指定在網(wǎng)格中每列的高度 3

14. 超鏈接(Hyperlink) 屬性

屬性 說(shuō)明 CSS
target 簡(jiǎn)寫(xiě)屬性設(shè)置target-name, target-new,和target-position屬性 3
target-name 指定在何處打開(kāi)鏈接（目標(biāo)位置） 3
target-new 指定是否有新的目標(biāo)鏈接打開(kāi)一個(gè)新窗口或在現(xiàn)有窗口打開(kāi)新標(biāo)簽 3
target-position 指定應(yīng)該放置新的目標(biāo)鏈接的位置 3

15. 線(xiàn)框(Linebox) 屬性

屬性 說(shuō)明 CSS
alignment-adjust 允許更精確的元素的對(duì)齊方式 3
alignment-baseline 其父級(jí)指定的內(nèi)聯(lián)級(jí)別的元素如何對(duì)齊 3
baseline-shift 允許重新定位相對(duì)于dominant-baseline的dominant-baseline 3
dominant-baseline 指定scaled-baseline-table 3
drop-initial-after-adjust 設(shè)置下拉的主要連接點(diǎn)的初始對(duì)齊點(diǎn) 3
drop-initial-after-align 校準(zhǔn)行內(nèi)的初始行的設(shè)置就是具有首字母的框使用初級(jí)連接點(diǎn) 3
drop-initial-before-adjust 設(shè)置下拉的輔助連接點(diǎn)的初始對(duì)齊點(diǎn) 3
drop-initial-before-align 校準(zhǔn)行內(nèi)的初始行的設(shè)置就是具有首字母的框使用輔助連接點(diǎn) 3
drop-initial-size 控制局部的首字母下沉 3
drop-initial-value 激活一個(gè)下拉式的初步效果 3
inline-box-align 設(shè)置一個(gè)多行的內(nèi)聯(lián)塊內(nèi)的行具有前一個(gè)和后一個(gè)內(nèi)聯(lián)元素的對(duì)齊 3
line-stacking 一個(gè)速記屬性設(shè)置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift屬性 3
line-stacking-ruby 設(shè)置包含Ruby注釋元素的行對(duì)于塊元素的堆疊方法 3
line-stacking-shift 設(shè)置base-shift行中塊元素包含元素的堆疊方法 3
line-stacking-strategy 設(shè)置內(nèi)部包含塊元素的堆疊線(xiàn)框的堆疊方法 3
text-height 行內(nèi)框的文本內(nèi)容區(qū)域設(shè)置block-progression維數(shù) 3

16. 列表(List) 屬性

屬性 說(shuō)明 CSS
list-style 在一個(gè)聲明中設(shè)置所有的列表屬性 1
list-style-image 將圖象設(shè)置為列表項(xiàng)標(biāo)記 1
list-style-position 設(shè)置列表項(xiàng)標(biāo)記的放置位置 1
list-style-type 設(shè)置列表項(xiàng)標(biāo)記的類(lèi)型 1

17. 外邊距(Margin) 屬性

屬性 說(shuō)明 CSS
margin 在一個(gè)聲明中設(shè)置所有外邊距屬性 1
margin-bottom 設(shè)置元素的下外邊距 1
margin-left 設(shè)置元素的左外邊距 1
margin-right 設(shè)置元素的右外邊距 1
margin-top 設(shè)置元素的上外邊距 1

18. 字幕(Marquee) 屬性

屬性 說(shuō)明 CSS
marquee-direction 設(shè)置內(nèi)容移動(dòng)的方向 3
marquee-play-count 設(shè)置內(nèi)容移動(dòng)多少次 3
marquee-speed 設(shè)置內(nèi)容滾動(dòng)的速度有多快 3
marquee-style 設(shè)置內(nèi)容移動(dòng)的樣式 3

19. 多列(Multi-column) 屬性

屬性 說(shuō)明 CSS
column-count 指定元素應(yīng)該分為的列數(shù) 3
column-fill 指定如何填充列 3
column-gap 指定列之間的差距 3
column-rule 對(duì)于設(shè)置所有column-rule-*屬性的簡(jiǎn)寫(xiě)屬性 3
column-rule-color 指定列之間的顏色規(guī)則 3
column-rule-style 指定列之間的樣式規(guī)則 3
column-rule-width 指定列之間的寬度規(guī)則 3
column-span 指定元素應(yīng)該跨越多少列 3
column-width 指定列的寬度 3
columns 縮寫(xiě)屬性設(shè)置列寬和列數(shù) 3

20. 頁(yè)面媒體(Paged Media) 屬性

屬性 思念 CSS
fit 如果其寬度和高度屬性都不是auto給出一個(gè)提示，如何大規(guī)模替換元素 3
fit-position 判定方框內(nèi)對(duì)象的對(duì)齊方式 3
image-orientation 指定用戶(hù)代理適用于圖像中的向右或順時(shí)針?lè)较虻男D(zhuǎn) 3
page 指定一個(gè)元素應(yīng)顯示的頁(yè)面的特定類(lèi)型 3
size 指定含有BOX的頁(yè)面內(nèi)容的大小和方位 3

21. 定位（Positioning） 屬性

屬性 說(shuō)明 CSS
bottom 設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移 2
clear 規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素 1
clip 剪裁絕對(duì)定位元素 2
cursor 規(guī)定要顯示的光標(biāo)的類(lèi)型（形狀） 2
display 規(guī)定元素應(yīng)該生成的框的類(lèi)型 1
float 規(guī)定框是否應(yīng)該浮動(dòng) 1
left 設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移 2
overflow 規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情 2
position 規(guī)定元素的定位類(lèi)型 2
right 設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移 2
top 設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移 2
visibility 規(guī)定元素是否可見(jiàn) 2
z-index 設(shè)置元素的堆疊順序 2

22. 分頁(yè)（Print） 屬性

屬性 說(shuō)明 CSS
orphans 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁(yè)時(shí)必須在頁(yè)面底部保留的最少行數(shù) 2
page-break-after 設(shè)置元素后的分頁(yè)行為 2
page-break-before 設(shè)置元素前的分頁(yè)行為 2
page-break-inside 設(shè)置元素內(nèi)部的分頁(yè)行為 2
widows 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁(yè)時(shí)必須在頁(yè)面頂部保留的最少行數(shù) 2

23. Ruby 屬性

屬性 說(shuō)明 CSS
ruby-align 控制Ruby文本和Ruby基礎(chǔ)內(nèi)容相對(duì)彼此的文本對(duì)齊方式 3
ruby-overhang 當(dāng)Ruby文本超過(guò)Ruby的基礎(chǔ)寬，確定ruby文本是否允許局部懸置任意相鄰的文本，除了自己的基礎(chǔ) 3
ruby-position 它的base控制Ruby文本的位置 3
ruby-span 控制annotation 元素的跨越行為 3

24. 語(yǔ)音（Speech） 屬性

屬性 說(shuō)明 CSS
mark 縮寫(xiě)屬性設(shè)置mark-before和mark-after屬性 3
mark-after 允許命名的標(biāo)記連接到音頻流 3
mark-before 允許命名的標(biāo)記連接到音頻流 3
phonemes 指定包含文本的相應(yīng)元素中的一個(gè)音標(biāo)發(fā)音 3
rest 一個(gè)縮寫(xiě)屬性設(shè)置rest-before和rest-after屬性 3
rest-after 一個(gè)元素的內(nèi)容講完之后，指定要休息一下或遵守韻律邊界 3
rest-before 一個(gè)元素的內(nèi)容講完之前，指定要休息一下或遵守韻律邊界 3
voice-balance 指定了左，右聲道之間的平衡 3
voice-duration 指定應(yīng)采取呈現(xiàn)所選元素的內(nèi)容的長(zhǎng)度 3
voice-pitch 指定平均說(shuō)話(huà)的聲音的音調(diào)（頻率） 3
voice-pitch-range 指定平均間距的變化 3
voice-rate 控制語(yǔ)速 3
voice-stress 指示著重力度 3
voice-volume 語(yǔ)音合成是指波形輸出幅度 3

25. 表格（Table） 屬性

屬性 說(shuō)明 CSS
border-collapse 規(guī)定是否合并表格邊框 2
border-spacing 規(guī)定相鄰單元格邊框之間的距離 2
caption-side 規(guī)定表格標(biāo)題的位置 2
empty-cells 規(guī)定是否顯示表格中的空單元格上的邊框和背景 2
table-layout 設(shè)置用于表格的布局算法 2

26. 文本（Text） 屬性

屬性 說(shuō)明 CSS
color 設(shè)置文本的顏色 1
direction 規(guī)定文本的方向 / 書(shū)寫(xiě)方向 2
letter-spacing 設(shè)置字符間距 1
line-height 設(shè)置行高 1
text-align 規(guī)定文本的水平對(duì)齊方式 1
text-decoration 規(guī)定添加到文本的裝飾效果 1
text-indent 規(guī)定文本塊首行的縮進(jìn) 1
text-transform 控制文本的大小寫(xiě) 1
unicode-bidi 2
vertical-align 設(shè)置元素的垂直對(duì)齊方式 1
white-space 設(shè)置怎樣給一元素控件留白 1
word-spacing 設(shè)置單詞間距 1
text-emphasis 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 1
hanging-punctuation 指定一個(gè)標(biāo)點(diǎn)符號(hào)是否可能超出行框 3
punctuation-trim 指定一個(gè)標(biāo)點(diǎn)符號(hào)是否要去掉 3
text-align-last 當(dāng) text-align 設(shè)置為 justify 時(shí)，最后一行的對(duì)齊方式。 3
text-justify 當(dāng) text-align 設(shè)置為 justify 時(shí)指定分散對(duì)齊的方式。 3
text-outline 設(shè)置文字的輪廓。 3
text-overflow 指定當(dāng)文本溢出包含的元素，應(yīng)該發(fā)生什么 3
text-shadow 為文本添加陰影 3
text-wrap 指定文本換行規(guī)則 3
word-break 指定非CJK文字的斷行規(guī)則 3
word-wrap 設(shè)置瀏覽器是否對(duì)過(guò)長(zhǎng)的單詞進(jìn)行換行。 3

27. 2D/3D 轉(zhuǎn)換屬性

屬性 說(shuō)明 CSS
transform 適用于2D或3D轉(zhuǎn)換的元素 3
transform-origin 允許您更改轉(zhuǎn)化元素位置 3
transform-style 3D空間中的指定如何嵌套元素 3
perspective 指定3D元素是如何查看透視圖 3
perspective-origin 指定3D元素底部位置 3
backface-visibility 定義一個(gè)元素是否應(yīng)該是可見(jiàn)的，不對(duì)著屏幕時(shí) 3

28. 過(guò)渡（Transition） 屬性

屬性 說(shuō)明 CSS
transition 此屬性是 transition-property、transition-duration、transition-timing-function、transition-delay 的簡(jiǎn)寫(xiě)形式。 3
transition-property 設(shè)置用來(lái)進(jìn)行過(guò)渡的 CSS 屬性。 3
transition-duration 設(shè)置過(guò)渡進(jìn)行的時(shí)間長(zhǎng)度。 3
transition-timing-function 設(shè)置過(guò)渡進(jìn)行的時(shí)序函數(shù)。 3
transition-delay 指定過(guò)渡開(kāi)始的時(shí)間。 3

29.用戶(hù)外觀(User-interface) 屬性

屬性 說(shuō)明 CSS
appearance 定義元素的外觀樣式 3
box-sizing 允許您為了適應(yīng)區(qū)域以某種方式定義某些元素 3
icon 為元素指定圖標(biāo) 3
nav-down 指定用戶(hù)按向下鍵時(shí)向下導(dǎo)航的位置 3
nav-index 指定導(dǎo)航（tab）順序。 3
nav-left 指定用戶(hù)按向左鍵時(shí)向左導(dǎo)航的位置 3
nav-right 指定用戶(hù)按向右鍵時(shí)向左導(dǎo)航的位置 3
nav-up 指定用戶(hù)按向上鍵時(shí)向上導(dǎo)航的位置a 3
outline-offset 設(shè)置輪廓框架在 border 邊緣外的偏移 3
resize 定義元素是否可以改變大小 3
以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)