CSS知識(shí)點(diǎn)

雙飛翼布局

代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>雙飛翼布局</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
    .sub,
    .main,
    .extra{ 
        float: left;
        min-height: 130px;
    }
    .sub{
        margin-left: -100%;
        width: 200px;
        background: red;
    }
    .extra{
        margin-left: -220px;
        width: 220px;
        background: blue;
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: green;
        word-break: break-all;
    }
    .footer{ 
        clear: both;
    }
</style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
    <div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
        </div>
    </div> 
    <div class="sub">
    <h4>sub</h4>
        <p>oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>

      <div class="extra">
    <h4>extra</h4>
        <p>BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>

這里相應(yīng)解釋一下，中間的main設(shè)置了width：100%，所以后面的浮動(dòng)元素沒(méi)有位置換行到了下一行，但是實(shí)際還是相當(dāng)于排在main的后面。此時(shí)，left塊使用margin-left：-100%，則讓left塊向左邊移動(dòng)了父元素100%的距離，成功移動(dòng)到了main的左邊，對(duì)于右側(cè)元素，使用margin-left：-自身width，則可以移動(dòng)到main的右側(cè)，最后，給main加一個(gè)wrap，給上合適的margin，左右側(cè)欄設(shè)置position：relative方便調(diào)整，布局完成。

BFC

創(chuàng)建BFC的方法：

  • 根元素或其它包含它的元素
  • 浮動(dòng)元素的不是 none
  • 絕對(duì)定位的元素 (元素具有為 absolute或 fixed)
  • 內(nèi)聯(lián)塊 inline-blocks (元素具有display： inline-block）
  • 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
  • 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
  • 塊元素具有overflow且值不是 visible

BFC的特點(diǎn)：

  1. 內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置。
  2. Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加
  3. 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
  4. BFC的區(qū)域不會(huì)與float box疊加。
  5. BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
  6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

margin負(fù)值

對(duì)于static元素：

當(dāng)元素沒(méi)有設(shè)置width（或者width：auto）時(shí)，margin left/right為負(fù)值會(huì)使元素向指定的方向拉伸，增加元素的寬度。
當(dāng)元素設(shè)置了width屬性時(shí)，margin left/top設(shè)置負(fù)值會(huì)使元素向左/上偏移，而margin right/bottom會(huì)將后續(xù)的元素拖拉進(jìn)來(lái)，覆蓋本來(lái)的元素。我認(rèn)為這與BCF中margin box的左邊會(huì)與包含塊的左邊相接觸以及BFC內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置這兩個(gè)規(guī)則有關(guān)。

對(duì)于浮動(dòng)元素：

如果向浮動(dòng)的方向設(shè)置負(fù)margin，會(huì)使元素向這個(gè)方向移動(dòng)，如果設(shè)置與浮動(dòng)方向相反的負(fù)margin，會(huì)使后面的浮動(dòng)元素覆蓋本身。著名的雙飛翼布局就是將浮動(dòng)和margin負(fù)值應(yīng)用起來(lái)實(shí)現(xiàn)的。

Flex布局

Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為 Flex 布局。

.box{
  display: flex;
}

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。

flex容器結(jié)構(gòu)

容器上的屬性

以下六個(gè)屬性設(shè)置在容器上

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

1 . flex-direction決定了主軸的方向（也就是項(xiàng)目的排列順序）

主軸的四個(gè)方向

這個(gè)屬性可能有四個(gè)值

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

2 .flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
可能為以下下三個(gè)值：
1 .nowrap(默認(rèn))：不換行
2 . wrap：換行，第一行在上方。
3 . wrap-reverse：換行，第一行在下方。

3 . flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;

4 . justify-content屬性
justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content

它可能有五個(gè)值：
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5 . align-items
align-items: flex-start | flex-end | center | baseline | stretch;

align-items

6 .align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

image.png

該屬性可能取得值
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

項(xiàng)目上的屬性

以下六個(gè)屬性設(shè)置在項(xiàng)目上
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1 .order屬性
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
2 .flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

  1. align-self屬性
    align-items: flex-start | flex-end | center | baseline | stretch;
    屬性和align-items一致
最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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