CSS布局（Display、Position、Overflow、Float）

布局說(shuō)明

image.png

基本布局屬性

Display（顯示）

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示。
display:none可以隱藏某個(gè)元素,且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失
display:block-顯示為塊級(jí)元素
display:inline-顯示為內(nèi)聯(lián)元素
display:inline-block-顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)邊距等屬性

Visibility(可見)

visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏
visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了，但仍然會(huì)影響布局。
visibility:collape一般的元素的表現(xiàn)與visibility:hidden一樣，也即其會(huì)占用空間。但如果該元素是與table相關(guān)的元素，列如table row、table column、table column group、table column group等，其表現(xiàn)卻跟display:none一樣，也即其占用的空間會(huì)釋放。

Position（定位）

position屬性指定了元素的定位類型
1、staticHTML元素的默認(rèn)值，即沒(méi)有定位，遵循正常的文檔流對(duì)象
2、fixed固定定位元素的位置相對(duì)于瀏覽器窗口是固定位置
1、Fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間
2、Fixed定位的元素和其它元素重疊

// 右上角顯示
p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

3、relative相對(duì)定位元素的定位時(shí)相對(duì)其正常位置
1、移動(dòng)相對(duì)定位元素，但它原本所占的空間不會(huì)改變

// 從元素的原始左側(cè)位置減去 20 像素。（左移20px）
h2.pos_left
{
   position:relative;
   left:-20px;
}

4、absolute絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于html
1、absolute定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間
2、absolute定位的元素和其它元素重疊
5、sticky粘性定位基于用戶的滾動(dòng)位置來(lái)定位
1、粘性定位的元素是依賴于用戶的滾動(dòng)，在postion:relative與position:fixed定位之間切換。它的行為就像position:relative;而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed；它會(huì)固定在目標(biāo)位置

// Top為0 的時(shí)候固定在那
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

Overflow(溢出)

overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情
注意：overflow屬性值工作于指定高度的塊元素上
1、visible內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外(默認(rèn)值)
2、hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的
3、 scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
4、auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容

Float(浮動(dòng))

float會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。往往是用于圖像，但它在布局時(shí)一樣非常有用。使元素的位置與文檔流無(wú)關(guān)，因?yàn)椴徽紦?jù)空間

// 圖片浮動(dòng)顯示
.image-list {
    float:left;
    margin:5px
  }

Clear（清除浮動(dòng)）

clear屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素
元素浮動(dòng)后，周圍的元素會(huì)重新排列，為了避免這種情況，使用clear屬性

// text_line 元素左右兩邊不能出現(xiàn)浮動(dòng)元素
.text_line
{
    clear:both;
}

z-index（順序）

z-index設(shè)置元素的堆疊順序
可定義為一個(gè)值(整數(shù)數(shù)字),越大代表越置前，如可定義為：z-index:9999。若定義為-1，代表為最底層

flex布局 & grid布局

圣杯布局 & 雙飛翼布局

左右兩欄固定寬度，中間部分自適應(yīng)的三欄布局，其原理差不多，都有負(fù)邊距的應(yīng)用，就是middle的實(shí)現(xiàn)不一樣。
關(guān)于負(fù)邊距的理解： https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html.

  • 圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title> 
<style>
        .header {
            width: 100%;
            height: 30px;
            background: red;
        }

        .content {
            overflow: hidden;
            padding: 0 100px;
        }

        .footer {
            width: 100%;
            height: 30px;
            background: red;
        }

        .middle {
            position:relative;          
            width: 100%;
            float: left;
            height: 80px;
            background: green;
        }

        .left {
            position:relative;
            width: 100px;
            float: left;
            left:-100px;
            height: 80px;
            margin-left: -100%;
            background: yellow;
        }

        .right {
            position:relative;          
            width: 100px;
            float: left;
            right:-100px;
            height: 80px;
            margin-left: -100px;
            background: pink
        }

</style>
</head>

<body>
        <div class="header">header-start header header header header header header-end</div>
        <div class="content">
            <div class="middle"> middle-start middle middle middle middle middle middle middle middle middle middle middle-end </div>
            <div class="left">left-start left left left left left left left left left left left left left left left-end </div>
            <div class="right"> right-start right-end</div>
        </div>
        <div class="footer"></div>
</body>
</html>
image.png
  • 雙飛翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title>
<style>
.header {
        width: 100%;
        height: 30px;
        background: red;
    }

    .content {
        overflow: hidden;
    }

    .footer {
        width: 100%;
        height: 30px;
        background: red;
    }

    .middle {           
        width: 100%;
        float: left;
    }
    .inner-middle{ 
       height: 80px; 
       margin: 0 100px; 
       background: green;        
    }
    .left {
        width: 100px;
        float: left;
        height: 80px;
        margin-left: -100%;
        background: yellow;
    }

    .right {            
        width: 100px;
        float: left;
        height: 80px;
        margin-left: -100px;
        background: pink
    }
</style>
</head>

<body>
<div class="header">header-start header header header header header header-end </div>
   <div class="content">
    <div class="middle">
        <div class="inner-middle">middle-start middle middle middle middle middle middle middle middle middle middle middle-end</div>
    </div>
    <div class="left">left-start left left left left left left left left left left left left left left-end </div>
    <div class="right"> right-start right-end</div>
   </div>
   <div class="footer"></div>
</body>
</html>
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容