第06章-CSS3布局屬性

2022-05-18 23:32 更新

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

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

學習目標

  1. 了解定位的概念

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

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

CSS Float(浮動)

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

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

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

  • 浮動元素只能左右移動而不能上下移動。
  • 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
  • 浮動元素之后的元素將圍繞它。
  • 浮動元素之前的元素將不會受到影響。
  • 浮動元素的空間將不存在，所以這個元素后邊的元素會占據(jù)浮動元素原本的空間，導致浮動元素覆蓋后面的元素，后面的元素需要使用clear屬性清除浮動的覆蓋。

案例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"/>
        覺得很卡機的話那的艱苦撒旦的艱苦撒謊空間大倒薩立刻就發(fā)生范德薩浪費
        瘋狂的思路發(fā)生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發(fā)公
        瘋狂的思路發(fā)生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發(fā)公
        瘋狂的思路發(fā)生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發(fā)公
        瘋狂的思路發(fā)生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發(fā)公
    </body>
</html>

效果展示

圖片浮動到最右邊，將正常排版的文字擠到旁邊，并不會覆蓋住文字。

案例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>

效果展示

清除浮動

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

屬性 描述
clear 清除上面浮動元素的影響（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;/*清除上面浮動元素的影響，并從新的行開始*/
            }
        </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. 浮動的特征：
    1. 把任何元素看成：元素 = 空間 + 內(nèi)容
    2. 浮動的元素只能浮動到左邊 或者 右邊，不能居中
    3. 浮動后的元素的空間不存在，但內(nèi)容還存在
    4. 浮動元素的內(nèi)容會和下面的元素顯示在同一行
    5. 浮動元素的內(nèi)容會把下面的元素的的內(nèi)容擠壓到旁邊

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

CSS position (定位)

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

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

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

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

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

fixed 固定定位

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

即使窗口是滾動的它也不會移動。

案例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>首頁</li>
            <li>動態(tài)</li>
            <li>新聞</li>
            <li>聯(lián)系</li>
        </ul>
        <div class="bottom">
            底部
        </div>
    </body>
</html>

效果展示

relative 相對定位

相對定位元素的定位是相對其正常位置。

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

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

absolute 絕對定位

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>

absolute 定位使元素的位置與文檔流無關(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">
                                當季流行>
                            </div>
                            <div class="lr">
                                春季新品商場同款氣質(zhì)連衣裙衛(wèi)衣時髦外套毛針織衫休閑褲牛仔褲毛呢大衣無痕文胸運動文胸潮流家居服百搭船襪
                            </div>
                        </div>
                    </div>
                    <div class="r">
                        <img src="../day17/image/1-3.jpg"/>
                    </div>
                </div>

                
            </li>
            <li>男裝/運動戶外</li>
        </ul>
    </body>
</html>

效果展示

重疊的元素

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

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

一個元素可以有正數(shù)或負數(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復雜選擇器

子元素（后代）選取器

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

案例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）只能選擇作為某元素直接子元素，嵌套的不能被選中。

直接子元素使用“>”符號來表示

案例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）可選擇后面緊接在一個元素后的元素，且二者有相同父元素。只能選擇一個。

相鄰兄弟選擇器使用“+”符號來表示

案例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ù)兄弟選擇器使用“~”符號來表示

案例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>

效果展示

偽類(元素)選擇器

選擇器 示例 示例說明
:checked input:checked 選擇所有選中的表單元素（單選和復選）
: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 選擇所有無效的元素
:valid input:valid 選擇所有有效值的屬性
:first-letter p:first-letter 選擇每個<p> 元素的第一個字母
:first-line p:first-line 選擇每個<p> 元素的第一行
:last-child p:last-child 選擇所有p元素的最后一個元素
:last-of-type p:last-of-type 選擇每個p元素是其母元素的最后一個p元素
:first-of-type p:first-of-type 選擇每個父元素是p元素的第一個p子元素
:first-child p:first-child 選擇器匹配屬于任意元素的第一個子元素的 <p> 元素
:nth-child(n) p:nth-child(2) 選擇所有p元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2) 選擇所有p元素倒數(shù)的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數(shù)的第二個為p的子元素
:nth-of-type(n) p:nth-of-type(2) 選擇所有p元素第二個為p的子元素
:only-of-type p:only-of-type 選擇p元素在父元素中只有一個類型為p的元素
:only-child p:only-child 選擇p元素在父元素中只有一個p的元素
:empty p:empty 選擇所有沒有子元素（任何內(nèi)容）的p元素
:optional input:optional 選擇沒有"required"的元素屬性
:required input:required 選擇有“required”屬性指定的元素屬性
:read-only input:read-only 選擇只讀屬性的元素屬性
:read-write input:read-write 選擇沒有只讀屬性的元素屬性
:root root 選擇文檔的根元素
:target #news:target 選擇當前活動#news元素(點擊URL包含錨的名字)
:link a:link 選擇所有未訪問鏈接
:visited a:visited 選擇所有訪問過的鏈接
:active a:active 選擇正在活動鏈接
:hover a:hover 把鼠標放在鏈接上的狀態(tài)
:focus input:focus 選擇元素輸入后具有焦點
:before p:before 在每個<p>元素之前插入內(nèi)容
:after p:after 在每個<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">
            請把鼠標移上來
            <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è)置每個UL重新計數(shù)，默認起始值=0 */
    counter-reset: a 0;
}


ul li{
    position: relative;
    padding-left: 20px;
    /* 設(shè)置每個li自增 1 ，默認自增值=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;
}


/* 自定義列表后面的鼠標懸停提示文字 */
ul li:after{
    /* 引用 html標記上的 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] 用于選取帶有以指定值開頭的屬性值的元素，只能選擇前綴，必須加：“-”。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。

實例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="請輸入用戶名" />
            <input type="password" placeholder="請輸入密碼" />
            <input type="button" value="登陸" />
        </form>
    </body>
</html>

效果展示

image-20210902173247813

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號