盒模型、外邊距合併、元素浮動問題、定位！

時間 2019-11-30

原文原文鏈接

盒模型

在學習css進行佈局時離不開盒模型，盒模型中裝的是html中的內容，咱們能夠想象它是一個存在與二維平面的盒子。css

盒模型的組成：一個盒模型由外到內能夠分紅四個部分：margin（外邊距）、border（邊框）、padding（內邊距）、content（內容）。其中咱們能夠經過css改變margin、border、padding的樣式，content是html內容。具體樣式如圖： html

盒模型的分類：瀏覽器

標準盒模型bash

元素實際的width = 咱們設置的width；佈局

元素實際的寬 = width + padding + border；學習
怪異盒模型flex

元素實際的width + padding + border = 咱們設置的width；ui

元素的實際的寬 = width；spa
相互轉化：咱們能夠經過box-sizing指定盒模型的種類3d

box-sizing:content-box->標準盒模型；

box-sizing:content-border->怪異盒模型。

外邊距合併

w3c中指出外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

以上兩種爲外邊距合併的並列關係和嵌套關係。

解決方法

並列關係：只給其中的某一個元素設置外邊距。
嵌套關係：

給父元素設置邊框
給父元素設置溢出隱藏：overflow：hidden
給父元素或子元素設置定位 :position: absolute(絕對定位)
給父元素或子元素設置浮動

元素浮動

標準文檔流：（1）空白摺疊現象（2）高矮不齊底邊對齊（3）自動換行一行寫不滿，換行寫。

css中有3種方法能夠使一個元素脫離標準文檔流：

元素浮動
固定定位
絕對定位

咱們來講一下元素浮動:

float：left->左浮動按照html的結構順序從左向右依此排列

float: right->右浮動按照html的結構順序從右向左依此排列

元素在浮動後空間會釋放

浮動塌陷問題解決

父元素設置溢出隱藏 overflow: hidden
給父元素設置高度
給父元素新增一個子元素（最後一個）而且清除浮動
clearfix 新增僞元素清除浮動

.clearfix::after{
        content: '';
        display: block;
        clear: both;
複製代碼

定位

定位至關於給一個元素設置位置或相對於父元素、另外一個元素、甚至相對於瀏覽器，經常使用的定位：

position:relative;相對定位相對於元素自身進行定位定位後空間不釋放；
position:absolute;絕對定位相對於最近的已經定位的祖先元素進行定位若是沒有最終找到body 定位後空間釋放；
position:fixed;固定定位相對於瀏覽器窗口進行的定位定位後空間釋放；

空間釋放後咱們引入層級概念 z-index：n；

值越大，越在上面。

行列布局

兩列布局

左側固定中間自適應

定位

<style>
#baba{
    width: 100%;
    height: 500px;
    background: #653232;
    position: relative;
}
.left{
    width: 200px;
    height: 500px;
    background: #445544;
    position: absolute;
    top: 0;
    left: 0;
  
}
.right{
    height: 500px;
    margin-left: 200px;
    background: #ff0036;
}
</style>
<body>
    <div id="baba">
    <div class="left">z</div>
    <div class="right">z</div>
    </div>
</body>
複製代碼

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            width: 200px;
            height: 400px;
            background-color: brown;
        }
        #box>div:nth-child(2){
            height: 400px;
            background-color: violet;
            flex-grow: 1;
        }
    </style>    
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
    </div>
複製代碼

效果圖：

2. 左右固定中間自適應

浮動

<style>
.container{
    width: 100%;
    height: 500px;
    background: #000000;
}
.left{
    width: 100px;
    height: 500px;
    background: #ffffff;
    float: left;
}
.right{
    width: 100px;
    height: 500px;
    background: #ff0036;
    float: right;
}
.center{
    margin: 0 100px;
    height: 500px;
    background: #559966;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">我是左邊</div>   
    <div class="right">我是中間</div>
    <div class="center">我是右邊</div>
    
</div>    
複製代碼

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            flex: 0 0 200px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex: auto;
        }
        #box>div:nth-child(3){
            background-color: blue;
            flex: 0 0 200px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>我是左邊</div>
        <div>我是中間</div>
        <div>我是右邊</div>
    </div>
複製代碼

效果圖：

上下固定中間自適應

定位

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 50px;
            width: 100%;
            background: #654826;
            position: absolute;
            top: 0;
        }
        .buttom{
            height: 50px;
            width: 100%;
            background: #872387;
            position: absolute;
            bottom: 0;
        }
        .center{
            background: #821248;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 50px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="center"></div>
    <div class="buttom"></div>
</body>
複製代碼

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body
        {
            width: 100%;
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            height: 50px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex-grow: 1;
        }
        #box>div:nth-child(3){
            background-color: blue;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
複製代碼

效果圖：