前端總結·基礎篇·CSS（一）佈局

時間 2019-11-09

標籤前端總結基礎 css 佈局欄目 CSS 简体版

原文原文鏈接

前端總結系列css

目錄html

這是《前端總結·基礎篇·CSS》系列的第一篇，主要總結一下佈局的基礎知識。前端

1、顯示（display）
    1.1 盒模型（box-model）
    1.2 行內元素（inline） & 塊元素（block）
    1.3 行內塊元素（inline-block IE8+ IE6-7/tools）
    1.4 flex（IE11+ IE10/-ms-）
    1.5 none
2、位置（position）
3、補充
    3.1 浮動（float）
    3.2 層疊（z-index）
    3.3 溢出（overflow）
    3.4 resize（notIE）（CSS3）
    3.5 分欄（column）（IE10+ notOperaMini）（CSS3）

1、顯示（display）

1.1 盒模型（box-model）

看圖瞭解盒模html5

盒模型包括內容（content）、填充（padding）、邊框（border）、邊距（margin）。咱們給元素設置的高度，是內容（content）的高度。再給元素添加填充（padding），元素看起來會更高。css3

如下是一個盒模型的演示實例，在谷歌瀏覽器中查看盒模型可使用右鍵>屬性>Computed 的方式進行查看。segmentfault

<p class="box-model">box-model</p>

.box-model {
    border: 1px solid red;
    padding: 20px;
}

以邊框爲界的盒模型跨域

有些時候，咱們不但願給元素添加填充（padding）時，元素的高度會改變，這樣不利於咱們進行佈局。能夠把元素的盒模型，設置成以邊框（border）爲界的盒模型（box-sizing:border-box;）。在IE的怪異模式下，默認使用了這種盒模型。數組

下面是一個示例。瀏覽器

<div class="box-model">box-model</div>

.box-model {
    box-sizing: border-box;  /* 設置成以邊框爲界的盒模型 */
    border: 1px solid red;
    height: 80px;
    padding: 10px;
}

1.2 行內元素（inline） & 塊元素（block）

佈局通常都用塊元素app

塊元素能夠設置寬高，默認佔據一行。行內元素不能設置寬高，寬度由其內容決定。

塊元素默認沒高度，有內容纔會有高度。行內元素默認沒高度和寬度，有內容纔會有。行內元素雖然不能設置寬高，可是設置成絕對定位（absolute）後，能夠設置寬高。（定位在第二節講）

塊元素：div p ul li table form html5(header section footer)。
行內元素：a font(em strong i) img span。

塊元素能夠變成行內元素

咱們一般將li變成行內元素製做導航欄。

<ul class="nav">
    <li>首頁</li>
    <li>文章</li>
    <li>留言</li>
</ul>

.nav li {
    display: inline;
}

一行只有一個塊元素

可是，行內元素能夠有多個。

空的塊元素將在佈局中消失

在調試頁面的時候想要顯示元素在佈局中的位置，咱們一般會給元素添加一個高度。

行內元素內容爲空也會在佈局中消失（不推薦爲空）。

1.3 行內塊元素（inline-block IE8+ IE6-7/tools）

兼容性是支持>=IE8，IE6-7請參見專一WEB前端開發。

清除兩元素間隙

兩元素間隙來源於元素間的空格，拼接元素便可消除。也能夠用過使用模板來消除。更多討論請見知乎。

<ul class="nav">
    <li>首頁</li><li>
    文章</li><li>
    留言</li>
</ul>

特殊狀況下的元素對齊

三個li並列，都設置成inline-block。當對最左邊的元素設置display:none;時，其餘兩個li會下沉到容器的底部。此時，須要對這兩個li設置頂部對齊（vertical-align:top;）。

<ul class="nav" id="nav">
    <li class="left"><div class="hidden">首頁</div></li>
    <li class="center"><div>文章</div></li>
    <li class="right"><div>留言</div></li>
</ul>

.hidden {display: none;}
.left {height: 50px;}
.center,.right {vertical-align: top;}

1.4 彈性盒子（flex IE11+ IE10/-ms-）

兼容性是支持>=IE11，IE10須要添加瀏覽器私有前綴（-ms-）。

使用彈性佈局

使用了彈性佈局，float clear vertical將失效。更多請見阮一峯的博客。

display:flex;  // 塊元素用
display:inline-flex;  // 行內元素用

彈性佈局設置

這些就暫時看成參考手冊吧。

flex-direction:row/row-reverse/column/column-reverse;  // 方向
flex-wrap:nowrap/wrap/wrap-reverse;  // 換行
flex-flow:direction/wrap;  // 方向和換行的簡寫，默認爲flex-flow:row nowrap;
justify-content:flex-start/center/flex-end/space-between/space-around;  // 主軸（默認爲水平軸）
align-items：flex-start/center/flex-end/baseline/stretch;  // 交叉軸
align-contents:flex-start/center/flex-end/space-between/space-around/stretch;  // 多條軸線的對齊方式（單條無效）
order:number;  // 順序（默認爲0）
flex-grow:number;  // 寬度有餘時放大比例（默認爲0）
flex-shrink:number;  // 寬度有餘時縮小比例（默認爲1）
flex-basis:number/auto;  // 分配多餘空間前，項目佔據的主軸空間（默認auto）
flex:grow/shrink/basis;  // grow shrink basis三個屬性的縮寫
align-self:auto/flex-start/center/flex-end/baseline/stretch;;  // 單個項目的對齊方式，可覆蓋align-items（默認auto）

主軸（justify-content）只能居中單行元素

那多行怎麼辦呢？咱們能夠把多行嵌套在一個div中，構造出單行元素。

下面是一個水平和垂直居中的一個實例。

<div class="parent">
    <div class="child">
        <p>兩行都會</p>
        <p>居中</p>
    </div>
</div>

.parent {
    display: flex;  /* 使用flex佈局 */
    align-items: center;  /* 交叉軸居中 */
    justify-content: center;  /* 主軸（默認爲水平軸）居中 */
    background: red;
    height: 200px;
}

1.5 none

隱藏元素

如下兩種方法均可以隱藏元素，可是display:none;會清除本來佔用的佈局空間。

visibility:hidden;  // 隱藏元素
display:none;  // 隱藏元素並清除本來佔用的佈局空間

2、位置（position）

絕對（absolute）、相對（relative）和固定（fixed）定位，均可以使用top，right，left，bottom元素。可是表示的意義卻各不相同。

清除佈局空間的定位（absolute fixed）

固定定位（fixed）不會隨着鼠標的滾動而改變位置。他真的是固定屏幕的某一個位置的，比較常見的是網頁右下角的廣告。

絕對定位（absolute）的定位原點是非默認定位（static）的父節點。能夠是absolute fixed relative，若是父節點沒有這些，那定位原點就是body了。使用了這兩種定位中的一種，元素本來佔用的佈局空間將會消失（脫離文檔流）。

下面是絕對定位（absolute）的一個例子。左圖是默認佈局，右圖是使用絕對定位（absolute）以後的（元素本來的佈局空間被清除）。

<p class="border">I'm in front of you.</p>
<div class="parent">Hello</div>
<p class="border">I'm next to you.</p>

.border {
    border: 1px solid blue;
}
.parent {
    position: absolute;
    left: 20px;
    top: 20px;
    background-color: red;
    padding: 5px;
}

保留佈局空間的定位（relative）

元素本來佔用的佈局空間依舊保留在文檔流中。

相對定位（relative）相對原有位置定位。把上例中的absolute改爲relative便可看到效果。使用這種方法，元素本來佔用的佈局會保留。

默認定位

默認定位爲static。

巧用relative+absolute定位

父級採用relative，子代採用absolute。則子代的定位原點變爲父級元素的左上角。

3、補充

3.1 浮動（float）

剛開始作頁面的時候，還不知道浮動用了以後得清除，只氣的想要砸鍵盤。如今好多了，知道了點技巧。更多技巧請見Tomson。

清除浮動（.clear）

這種方法須要在浮動元素後面添加一個空的節點，而後寫上clear屬性。兼容IE6須要添加zoom:1;。

<ul class="nav">
    <li>首頁</li>
    <li>文章</li>
    <li>留言</li>
</ul>
<div class="clear"></div> <!--用來清楚浮動的空元素-->
<p>我是另一行</p>

.nav li {
    background-color: red;
    float: left;
    list-style-type: none;
}
.clear {
    clear: both;
    zoom:1;  /* IE 6 */
}

清除浮動（overflow:hidden;）

使用這種方法意味着，浮動元素得有一個父元素，並給父元素添加overflow:hidden;屬性。

<ul class="nav">
    <li>首頁</li>
    <li>文章</li>
    <li>留言</li>
</ul>
<p>我是另一行</p>

.nav li {
    background-color: red;
    float: left;
    list-style-type: none;
}
.nav {
    overflow: hidden;
}

文字環繞

浮動元素的另一個妙用是實現文字環繞。

<div class="article">
    <div class="photo"></div>
    <p>這段文字很長，是用來測試文字環繞的。圖片的佔位將用div塊來模擬。這段文字很長，是用來測試文字環繞的。圖片的佔位將用div塊來模擬。</p>
</div>

.article {
    width: 200px;
}
.photo {
    width: 60px;
    height: 60px;
    background-color: red;
    float: right;
}

3.2 層疊（z-index）

層疊能夠控制元素的上下放置關係。值越大越上面。

<div class="z zOne"></div>
<div class="z zTwo"></div>

.z {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 60px;
    height: 60px;
    background-color: red;
    opacity: .5;  /* 設置透明度爲0.5 */
}
.zTwo {
    top: 220px;  /* 和第一個塊錯開以看到效果 */
    left: 220px;
    background-color: blue;
    opacity: .5;
}

3.3 溢出（overflow）

當頁面內存在多個業內選項卡的時候，從一個沒有右邊滾動條的頁面達到一個有滾動條的頁面，將會產生頁面跳動。解決辦法是默認設置顯示右邊的滾動條。

overflow-x:visibility;

3.4 resize（notIE）（CSS3）

定義用戶是否可調整當前元素的邊框大小。

resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

3.5 分欄（column）（IE10+ notOperaMini）（CSS3）

兼容性是IE>=10，不支持opera mini。更多請見菜鳥教程。

<p>這一段文字用來測試分欄。這一段文字用來測試分欄。這一段文字用來測試分欄。</p>

p {
    width: 200px;  /* 把段落的寬度設短一點，便於效果的展示 */
    column-count: 3;  /* 設定須要分幾欄 */
    column-gap: 20px;  /* 設定兩欄間隔 */
}