---
tags: css
---
# 常見的版型設定

### 禁止顯示 x 軸法則

* 在做RWD時禁止X軸出現拖動左右移的的方式出現，解決的方式是
> 比較常見是寫上了 width 固定寬度所造成
>

.wrap{
    width: 600px;
    margin: 0 auto;
}

.h1{
    font-size: 25px;
}

* 使用 max-width 就可以解決這點了

max-width: 600px;

### %數設計觀念

* 在我們內容以%數來做寬度時，他會依照父元素多寬來調整內容的容器%數。

> 我們以上個版型制定max-width的 父元素寬度

.wrap{
    /*  父元素寬度   */
    max-width: 900px;
    margin: 0 auto;
    height: 200px;
    background-color: black;
    display: flex;
}

> 在內容中以%數 寬度來排列左右欄位

.menu{
    width: 30%;
    background: orange;
    height: 100px;
}

.content{
    width: 70%;
    background: blue;
    height: 100px;
}