---
# System prepended metadata

title: CSS2 排版
tags: [frontend, cssmonster]

---

# CSS2 排版

## margin-top/-bottom > 穿透父層問題
```css=!
父層{
    padding: 1px; /* 解決方案一 */
    border-top: 1px solid transparent; /* 解決方案二 */
} 
```

## float > 浮動區塊問題
```css=!
由浮動區塊支撐高度的物件{
    overflow: hidden; /* 恢復高度，還原高度消失區塊應有的高 */
} 
浮動區塊後方的物件{
    clear: both; /* 清除浮動，還原後方跑上來物件原本的位置 */
}
```

## float > header快速排版
```css=!
.header{
    overflow: hidden; /* 恢復高度 */
} 
.header img{
    float: left; /* logo往左 */
} 
.header ul{
    float: right; /* nav列往右 */
} 
.header li{
    float: left; /* li由左向右水平排列 */
} 
```

## display: inline-block > 區塊間隔問題
```css=!
父層{
    font-size: 0; /* 消除inline-block造成的區塊間格 */
} 
該層{
    display: inline-block;
    vertical-align: top; /* 解決因高度不同，出現的上方水平方向不對齊問題 */
} 
inline-block作用層{
    font-size: ?; /* 將被消除的font-size寫回來 */
} 
```

## position應用一 > 基礎
```css=!
父層{
    position: relative;
    overflow: hidden; /* 隱藏超出版面的部分 */
} 
position層{
    position: absolute; /* 以relative作為基準點，而非整個網頁 */
} 
```

## position應用二 > 滿版header、漂浮
```css=!
header層{
    position: fixed; /* fixed不吃relative，是以視窗可視範圍作為基準 */
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1; /* 決定座標定位物件重疊時的上下關係，預設為0 */
} 
```

## position應用三 > 水平垂直雙向置中
```css=!
父層{
    position: relative;
}
position層{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}
```
> 須注意position只吃座標，會和網頁排版脫鉤。

###### tags: `frontend` `cssmonster`      [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)