第06章-CSS3布局屬性

2022-05-18 23:32 更新

第06章-前端核心技術(shù)-CSS3布局屬性

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

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

  1. 了解定位的概念

  1. 掌握如何實(shí)現(xiàn)元素的任意布局 重點(diǎn) 難點(diǎn)

  1. 掌握實(shí)際開(kāi)發(fā)特效的實(shí)現(xiàn) 難點(diǎn)
  2. 掌握CSS復(fù)雜選擇器的使用 重點(diǎn)
  3. 掌握CSS屬性選擇器的使用方法
  4. 掌握CSS特效制作的方法 重點(diǎn) 難點(diǎn)

CSS Float(浮動(dòng))

Float（浮動(dòng)），只能使元素向左或向右移動(dòng)，其周圍的元素的內(nèi)容會(huì)被浮動(dòng)的元素的內(nèi)容擠到周圍。

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

屬性 描述
float 使元素浮動(dòng)到左邊或者右邊（left、right）

  • 浮動(dòng)元素只能左右移動(dòng)而不能上下移動(dòng)。
  • 一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/li>
  • 浮動(dòng)元素之后的元素將圍繞它。
  • 浮動(dòng)元素之前的元素將不會(huì)受到影響。
  • 浮動(dòng)元素的空間將不存在，所以這個(gè)元素后邊的元素會(huì)占據(jù)浮動(dòng)元素原本的空間，導(dǎo)致浮動(dòng)元素覆蓋后面的元素，后面的元素需要使用clear屬性清除浮動(dòng)的覆蓋。

案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{
                float: right;
            }
        </style>
    </head>
    <body>
        <img src="image/avatar.jpg"/>
        覺(jué)得很卡機(jī)的話那的艱苦撒旦的艱苦撒謊空間大倒薩立刻就發(fā)生范德薩浪費(fèi)
        瘋狂的思路發(fā)生分類考試的價(jià)格快速拉高餓死了咖啡連鎖店過(guò)的思路開(kāi)發(fā)公
        瘋狂的思路發(fā)生分類考試的價(jià)格快速拉高餓死了咖啡連鎖店過(guò)的思路開(kāi)發(fā)公
        瘋狂的思路發(fā)生分類考試的價(jià)格快速拉高餓死了咖啡連鎖店過(guò)的思路開(kāi)發(fā)公
        瘋狂的思路發(fā)生分類考試的價(jià)格快速拉高餓死了咖啡連鎖店過(guò)的思路開(kāi)發(fā)公
    </body>
</html>

效果展示

圖片浮動(dòng)到最右邊，將正常排版的文字?jǐn)D到旁邊，并不會(huì)覆蓋住文字。

案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            li{
                float: left;
                padding: 20px;
                background-color: #DC143C;
                color: white;
            }
            h4{
                background-color: blueviolet;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>家具</li>
            <li>服飾</li>
            <li>汽車</li>
            <li>裝飾</li>
            <li>鞋包</li>
            <li>兒童</li>
        </ul>
        <h4>內(nèi)容</h4>
    </body>
</html>

效果展示

清除浮動(dòng)

清除浮動(dòng)的屬性一般用于浮動(dòng)元素后面的元素，用戶清除上面浮動(dòng)元素對(duì)其產(chǎn)生的影響

屬性 描述
clear 清除上面浮動(dòng)元素的影響（left、right、both）

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            li{
                float: left;
                padding: 20px;
                background-color: #DC143C;
                color: white;
            }
            h4{
                background-color: blueviolet;
                color: white;
                clear: both;/*清除上面浮動(dòng)元素的影響，并從新的行開(kāi)始*/
            }
        </style>
    </head>
    <body>
        <ul>
            <li>家具</li>
            <li>服飾</li>
            <li>汽車</li>
            <li>裝飾</li>
            <li>鞋包</li>
            <li>兒童</li>
        </ul>
        <h4>內(nèi)容</h4>
    </body>
</html>

效果展示

總結(jié)

  1. 浮動(dòng)的特征：
    1. 把任何元素看成：元素 = 空間 + 內(nèi)容
    2. 浮動(dòng)的元素只能浮動(dòng)到左邊 或者 右邊，不能居中
    3. 浮動(dòng)后的元素的空間不存在，但內(nèi)容還存在
    4. 浮動(dòng)元素的內(nèi)容會(huì)和下面的元素顯示在同一行
    5. 浮動(dòng)元素的內(nèi)容會(huì)把下面的元素的的內(nèi)容擠壓到旁邊

  1. 清除浮動(dòng)
    1. 想讓浮動(dòng)的元素獨(dú)占一行，不影響后面的元素排版，需要給后面的第一個(gè)元素加clear:bath清除浮動(dòng)
    2. 當(dāng)一個(gè)元素的所有子元素都浮動(dòng)后，子元素的空間都不存在了，這個(gè)元素的高度會(huì)變?yōu)?code>0px，導(dǎo)致這個(gè)元素的背景等看不到，需要給這個(gè)元素加overflow:hidden;或者display:inline-block;。

CSS position (定位)

position 屬性指定了元素的定位類型。

屬性 描述
Static 靜態(tài)定位，默認(rèn)值，就是沒(méi)有定位。
Relative 相對(duì)定位，相對(duì)當(dāng)前元素位置
Fixed 固定定位，在頁(yè)面上固定的位置出現(xiàn)
Absolute 絕對(duì)定位，相對(duì)于上級(jí)已經(jīng)定位的元素的位置

static 靜態(tài)定位（默認(rèn)）

HTML元素的默認(rèn)值，即沒(méi)有定位，元素出現(xiàn)在正常的流中。

靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。

fixed 固定定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)。

案例04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                height: 2000px;
                margin: 0;
            }
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                text-align: center;
                background-color: #DC143C;
                width: 100%;
                position: fixed;
                top: 0;
                padding: 4px 0;
            }
            li{
                display: inline-block;
                padding: 15px 5%;
                background-color: rgba(0,0,255,0.5);
                color: white;
                font-weight: bold;
                border-radius: 6px;
            }
            li:hover{
                background-color: rgba(0,255,0,0.5);
                cursor: pointer;
            }
            h4{
                text-align: center;
            }
            .bottom{
                position: fixed;
                background-color: #DC143C;
                width: 100%;
                bottom: 0;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>首頁(yè)</li>
            <li>動(dòng)態(tài)</li>
            <li>新聞</li>
            <li>聯(lián)系</li>
        </ul>
        <div class="bottom">
            底部
        </div>
    </body>
</html>

效果展示

relative 相對(duì)定位

相對(duì)定位元素的定位是相對(duì)其正常位置。

相對(duì)定位元素經(jīng)常被用來(lái)作為絕對(duì)定位元素的容器塊。

可以移動(dòng)的相對(duì)定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會(huì)改變。

absolute 絕對(duì)定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于<html>

absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

absolute 定位的元素和其他元素重疊。

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="2.css"/>
    </head>
    <body>
        <h2>商品分類</h2>
        <ul>
            <li>女裝/內(nèi)衣
                <div class="right">
                    <div class="l">
                        <div class="item">
                            <div class="ll">
                                當(dāng)季流行>
                            </div>
                            <div class="lr">
                                春季新品商場(chǎng)同款氣質(zhì)連衣裙衛(wèi)衣時(shí)髦外套毛針織衫休閑褲牛仔褲毛呢大衣無(wú)痕文胸運(yùn)動(dòng)文胸潮流家居服百搭船襪
                            </div>
                        </div>
                    </div>
                    <div class="r">
                        <img src="../day17/image/1-3.jpg"/>
                    </div>
                </div>

                
            </li>
            <li>男裝/運(yùn)動(dòng)戶外</li>
        </ul>
    </body>
</html>

效果展示

重疊的元素

元素的定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素

z-index屬性指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面）

一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .img1{
                position: absolute;
                width: 200px;
                left: 50px;
                top: 120px;
                z-index: 2;
            }
            .img2{
                position: absolute;
                width: 200px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <img src="image/avatar.jpg" class="img1"/>
        <img src="image/meinv.jpg" class="img2"/>
    </body>
</html>

效果展示

CSS復(fù)雜選擇器

子元素（后代）選取器

后代選取器匹配元素所有的內(nèi)部元素，無(wú)論嵌套多少層都可以被選擇。符號(hào)“空格”

案例07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代選取器</title>
        <style type="text/css">
            #content .child{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div class="child">
                第一層前套的子元素1
                <div class="child">
                    第二層前套的子元素1
                </div>
            </div>
            <div class="child">
                第一層前套的子元素2
                <div class="child">
                    第二層前套的子元素2
                </div>
            </div>
        </div>
    </body>
</html>

效果展示

直接子元素選擇器

與后代選擇器相比，直接子元素選擇器（Child selectors）只能選擇作為某元素直接子元素，嵌套的不能被選中。

直接子元素使用“>”符號(hào)來(lái)表示

案例08



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>直接子元素選擇器</title>
        <style type="text/css">
            #content > .child2-1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div class="child1-1">
                第一層前套的子元素1
                <div class="child2-1">
                    第二層前套的子元素1
                </div>
            </div>
            <div class="child1-1">
                第一層前套的子元素2
                <div class="child2-1">
                    第二層前套的子元素2
                </div>
            </div>
        </div>
    </body>
</html>

效果展示

相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇后面緊接在一個(gè)元素后的元素，且二者有相同父元素。只能選擇一個(gè)。

相鄰兄弟選擇器使用“+”符號(hào)來(lái)表示

案例09

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相鄰兄弟選擇器</title>
        <style type="text/css">
            p + .child1-1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <p>段落</p>
            <div class="child1-1">第一層前套的子元素1</div>
            <div class="child1-1">第一層前套的子元素2</div>
        </div>
    </body>
</html>

效果展示

后續(xù)兄弟選擇器

后續(xù)兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。

后續(xù)兄弟選擇器使用“~”符號(hào)來(lái)表示

案例10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后續(xù)兄弟選擇器</title>
        <style type="text/css">
            p ~ .child1-1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <p>段落</p>
            <div class="child1-1">第一層前套的子元素1</div>
            <div class="child1-1">第一層前套的子元素2</div>
        </div>
    </body>
</html>

效果展示

偽類(元素)選擇器

選擇器 示例 示例說(shuō)明
:checked input:checked 選擇所有選中的表單元素（單選和復(fù)選）
:disabled input:disabled 選擇所有禁用的表單元素
:enabled input:enabled 選擇所有啟用的表單元素
:not(selector) :not(p) 選擇所有p以外的元素
:in-range input:in-range 選擇元素值在指定（數(shù)字輸入框）min和max范圍內(nèi)的值
:out-of-range input:out-of-range 選擇元素值在指定（數(shù)字輸入框）min和max范圍外的值
:invalid input:invalid 選擇所有無(wú)效的元素
:valid input:valid 選擇所有有效值的屬性
:first-letter p:first-letter 選擇每個(gè)<p> 元素的第一個(gè)字母
:first-line p:first-line 選擇每個(gè)<p> 元素的第一行
:last-child p:last-child 選擇所有p元素的最后一個(gè)元素
:last-of-type p:last-of-type 選擇每個(gè)p元素是其母元素的最后一個(gè)p元素
:first-of-type p:first-of-type 選擇每個(gè)父元素是p元素的第一個(gè)p子元素
:first-child p:first-child 選擇器匹配屬于任意元素的第一個(gè)子元素的 <p> 元素
:nth-child(n) p:nth-child(2) 選擇所有p元素的第二個(gè)子元素
:nth-last-child(n) p:nth-last-child(2) 選擇所有p元素倒數(shù)的第二個(gè)子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數(shù)的第二個(gè)為p的子元素
:nth-of-type(n) p:nth-of-type(2) 選擇所有p元素第二個(gè)為p的子元素
:only-of-type p:only-of-type 選擇p元素在父元素中只有一個(gè)類型為p的元素
:only-child p:only-child 選擇p元素在父元素中只有一個(gè)p的元素
:empty p:empty 選擇所有沒(méi)有子元素（任何內(nèi)容）的p元素
:optional input:optional 選擇沒(méi)有"required"的元素屬性
:required input:required 選擇有“required”屬性指定的元素屬性
:read-only input:read-only 選擇只讀屬性的元素屬性
:read-write input:read-write 選擇沒(méi)有只讀屬性的元素屬性
:root root 選擇文檔的根元素
:target #news:target 選擇當(dāng)前活動(dòng)#news元素(點(diǎn)擊URL包含錨的名字)
:link a:link 選擇所有未訪問(wèn)鏈接
:visited a:visited 選擇所有訪問(wèn)過(guò)的鏈接
:active a:active 選擇正在活動(dòng)鏈接
:hover a:hover 把鼠標(biāo)放在鏈接上的狀態(tài)
:focus input:focus 選擇元素輸入后具有焦點(diǎn)
:before p:before 在每個(gè)<p>元素之前插入內(nèi)容
:after p:after 在每個(gè)<p>元素之后插入內(nèi)容

案例11：自定義單選框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="new_file.css"/>
    </head>
    <body>
        <!-- 自定義單選框 -->
        <div class="radio">
            <input type="radio" name="a"/>
            <div class="checked"></div>
        </div>
        <div class="radio">
            <input type="radio" name="a"/>
            <div class="checked"></div>
        </div>
    </body>
</html>

css

.radio{
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.1);
    position: relative;
    display: inline-block;
    border-radius: 100px;
    box-shadow: 0 0 2px 1px rgba(255,0,0,0.5);
}


.radio input[type=radio]{
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.radio .checked{
    position: relative;
}
.radio .checked::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-right: 20px solid green;
    border-top: 20px solid transparent;
    right: 25px;
    top: 5px;
    display: none;
}
.radio .checked::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid blue;
    border-bottom: 20px solid transparent;
    left: 25px;
    top: 25px;
    display: none;
}


.radio input[type=radio]:checked+.checked::before{
    display: block;
}


.radio input[type=radio]:checked+.checked::after{
    display: block;
}

效果展示

案例12：提示框文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #content{
                position: relative;
                width: 200px;
            }
            .cart{
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                margin-top: -35px;
                padding: 5px 10px;
                height: 20px;
                background-color: black;
                border-radius: 5px;
                color: white;
            }
            .cart:after{
                content: "";
                border-width: 5px;
                border-style: solid;
                border-color: black transparent transparent transparent;
                position: absolute;
                bottom: -10px;
                left: 50%;
                margin-left: -5px;
            }
            #content:hover .cart{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <br /><br /><br /><br />
        <div id="content">
            請(qǐng)把鼠標(biāo)移上來(lái)
            <div class="cart">
                提示文字
            </div>
        </div>

        
    </body>
</html>

效果展示

案例13：自定義列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="new_file.css"/>
    </head>
    <body>
        <ul>
            <li tip="提示1">自定義列表</li>
            <li tip="提示2">自定義列表</li>
            <li tip="提示3">自定義列表</li>
            <li tip="提示4">自定義列表</li>
        </ul>
        <ul>
            <li tip="提示1">自定義列表</li>
            <li tip="提示2">自定義列表</li>
            <li tip="提示3">自定義列表</li>
            <li tip="提示4">自定義列表</li>
        </ul>
    </body>
</html>

css

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    /* 設(shè)置每個(gè)UL重新計(jì)數(shù)，默認(rèn)起始值=0 */
    counter-reset: a 0;
}


ul li{
    position: relative;
    padding-left: 20px;
    /* 設(shè)置每個(gè)li自增 1 ，默認(rèn)自增值=1 */
    counter-increment: a 1;
}


/* 自定義列表前面的圖案 */
ul li:before{
    /* 引用 li 中定義的自增變量 a 的值 */
    content: counter(a);
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: 0;
    top: 4px;
    line-height: 0px;
}


/* 自定義列表后面的鼠標(biāo)懸停提示文字 */
ul li:after{
    /* 引用 html標(biāo)記上的 tip 屬性值 */
    content: attr(tip);
    position: absolute;
    color: white;
    background-color: black;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: none;
}


ul li:hover:after{
    display: block;
    left: 110%;
    white-space: nowrap;
    top: 0px;
}

效果展示

屬性選擇器

選擇器 描述
[attribute] 用于選取帶有指定屬性的元素。
[attribute=value] 用于選取帶有指定屬性和值的元素。
[attribute~=value] 用于選取屬性值中包含指定詞匯的元素。
[attribute l=value] 用于選取帶有以指定值開(kāi)頭的屬性值的元素，只能選擇前綴，必須加：“-”。
[attribute^=value] 匹配屬性值以指定值開(kāi)頭的每個(gè)元素。
[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個(gè)元素。
[attribute*=value] 匹配屬性值中包含指定值的每個(gè)元素。

實(shí)例14：輸入元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代選取器</title>
        <style type="text/css">
            form{
                border-radius: 5px;
                display: inline-block;
                padding: 5px;
                border: 1px solid rgba(0,0,0,0.3);
                box-shadow: 1px 3px 1px rgba(0,0,0,0.4),
                -1px 4px 1px rgba(0,0,0,0.3),
                2px 5px 3px rgba(0,0,0,0.2),
                -2px 6px 3px rgba(0,0,0,0.1);
            }
            input {
                height: 30px;
                margin: 0;
                padding: 0px 10px;
                border: 1px solid rgba(0,0,0,0.4);
                border-radius: 5px;
                font-size: 18px;
                color: #DC143C;
            }
            input[type=button]{
            }
            input:focus{
                border: 1px solid rgba(255,0,0,1);
                outline: 0;
            }
            input:active{
                border: 1px solid rgba(0,0,255,1);
                outline: 0;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text" placeholder="請(qǐng)輸入用戶名" />
            <input type="password" placeholder="請(qǐng)輸入密碼" />
            <input type="button" value="登陸" />
        </form>
    </body>
</html>

效果展示

image-20210902173247813

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)