博主信息

博文 34

粉絲 0

評論 0

訪問量 28657

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

默認(rèn)布局與元素類型

文檔布局流

position:static靜態(tài)定位

默認(rèn)情況下，元素布局的完整流程
1.把內(nèi)容（匿名文本）放到一個獨立的盒模型，如div
2.為盒子添加上padding/border/margin
3.盒子的種類
3.1 塊級
屬性：display:block/table/table-cell,td/list-item/form/p/h1-h6
寬度：占據(jù)父級全部寬度
高低：由內(nèi)容決定且可自定義
排列：垂直

3.2 內(nèi)聯(lián)（行內(nèi)）
用來描述塊級元素內(nèi)部的內(nèi)容（文本）
寬度：內(nèi)容寬度
高度：內(nèi)容高度
排列：水平排不下則換行顯示
寬高不能自定義，padding有效，margin只有左右有效
使用displau:block可將內(nèi)聯(lián)元素轉(zhuǎn)為快級，使寬高生效，但后面的其他元素
如果不想讓后面的其他元素?fù)Q行顯示，可使用display:inline-block將它轉(zhuǎn)為

3.3 內(nèi)聯(lián)塊（行內(nèi)塊）：即像內(nèi)聯(lián)一樣水平排列，又像塊級一樣可設(shè)置寬高

定位原理與演示

1.靜態(tài)定位：position:static

2.相對定位：position:relative
需設(shè)置top:/left:/right:/bottom:
參照物：相對元素自身在文檔流張的原始位置進(jìn)行偏移

3.絕對定位：position:absolute
隱藏：visibility:hidden源碼有，頁面有但看不見
刪除：display:none源碼有，頁面沒有
參照物：具有定位屬性的包含塊（定位父級）
初始包含塊：根元素的父級

4.固定定位：position:fixed
永遠(yuǎn)相對于視口定位，是絕對定位的一個特例，

5.粘性定位：position:sticky
粘性定位=靜態(tài)定位+固定定位

案例：

<body>
<div class="box parent">
    <div class="box child one">相對定位</div>
    <div class="box child two">絕對定位</div>
    <div class="box child three">固定定位</div>
</div>
<style>
    .box{
        border: 1px solid ;
    }
    .box.parent{
        width: 400px;
        height:400px;
        background-color:lightcyan;
    }
    .box.child{
        padding: 20px;
    }
    .box.child.one{
        background-color:aqua;
    }
    .box.child.two{
      background-color:aquamarine;
    }
    .box.child.three{
      background-color: cadetblue;
    }
    .box.child.one{
        display: none;
    }

相對于.box.parent定位

.box.parent{
    position:relative;
}
.box.child.two{
 right: 0;
 bottom: 0;
}

相對于body定位

body{
    height: 500px;
    width: 500px;
    border: 2px solid blue;
}
.box.parent{
    position: static;
}
body{
    position: relative;
}

相對于html定位

html{
    width: 700px;
    height: 700px;
    border: 2px dashed red;
}
body{
    position: static;
}
html{
    position: relative;
}

注：當(dāng)絕對定位找不到任何定位父級的時候，它會把“初始包含塊”作為定位父級且只出現(xiàn)在視口第一屏，而固定定位是永遠(yuǎn)對視口定位，所有屏都有效！

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

markdown語法學(xué)習(xí)及代碼展示

2022-07-02 17:47:31

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

默認(rèn)布局與元素類型

文檔布局流

定位原理與演示

案例：

注：當(dāng)絕對定位找不到任何定位父級的時候，它會把“初始包含塊”作為定位父級且只出現(xiàn)在視口第一屏，而固定定位是永遠(yuǎn)對視口定位，所有屏都有效！

注：當(dāng)絕對定位找不到任何定位父級的時候，它會把“初始包含塊”作為定位父級且只出現(xiàn)在視口第一屏，而固定定位是永遠(yuǎn)對視口定位，所有屏都有效！