css3佈局的若干筆記總結

自己在寫一些樣式的時候，遇到的一些問題，順手就記下了，多總結。

1. css 圖片間隙問題：

解決方案：

法寶一：定義圖片img標籤vertical-align:bottom，vertical-align:middle，vertical-align:top。
img{vertical-align:bottom;}

法寶二：定義容器裡的字型大小為0。

div {
font-size:0
}

據說原因：
圖片文字等inline元素預設是和父級元素的baseline對齊的，而baseline又和父級底邊有一定距離（這個距離和 font-size，font-family 相關），所以設定 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li，其他的block元素中包含img也會有這個現象。

2.元素垂直居中的若干種方法：

（1）父元素的dispaly:table, 然後自身的display為table-cell，這樣的話，自己可以利用垂直屬性：vertical-align:middle.

(2)採用絕對定位的方式position：absolute，當然是對於其父節點。設定自身高度，top為50%，此時的水平線在頂部，通過設定margin-top為一半的高度就行了。

（3）對於固定寬和高的塊級元素就比較簡單，直接絕對定位，然後設定top,right,bottom,left為0，同時設定margin：auto就行了。

（4）對於容器內的單行文字垂直居中，只需設定其height = line-height就可以了。

（5）還有一種不要輕易嘗試，增加個div父元素，float：left,margin-bottom:-一半height，height：50%。自身position：relative,clear:both.

3.flex佈局

容器有的屬性：
可以參考：https://github.com/xingbofeng/css-grid-flex

.box{
    display:flex,//行內元素 display:inline-flex
    flex-direction: row （default）| row-reverse | column | column-reverse;//定義排列方向
    flex-wrap: nowrap(default) | wrap | wrap-reverse;//定義是否可以換行
    flex-flow：flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
    justify-content: flex-start | flex-end | center | space-between | space-around;//主軸的對其方式
    // 左對齊，右對齊，居中對齊，兩側對其中間填充，兩邊對其，四周填充
     align-items: flex-start | flex-end | center | baseline | stretch;//豎軸對其方式，基線對其，拉伸對其
     align-content: flex-start | flex-end | center | space-between | space-around | stretch;
//一行放不下是，多行軸線的對其方式
}

專案有的屬性：

.item {
    order: <integer>;//排列順序，越小排在越前面，預設為零
    flex-grow: <number>; /* default 0 */ 縮放比例，設定百分比可以顯示多行，也很好用
    flex-shrink:<number>; /* default 1 */  縮放比例，如果為零，表示不縮放。
    flex-basis: <length> | auto; /* default auto */ 佔據的空間大小，可以是固定大小
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    align-self: auto | flex-start | flex-end | center | baseline | stretch;//縱軸上單個專案的對其方式，預設繼承align-items

}

常用的應用場景：

（1）水平垂直居中

設定父元素的align-items:center（垂直居中）,justify-content:center（水平居中）就行了。

<div class="box">
    <div class="content">我是子元素，我要垂直居中</div>
</div>

.box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 500px;
            width: 500px;
            background-color: green;
        }
        .content {
            height: 200px;
            width: 200px;
            background-color: yellow;
            line-height: 200px;
            text-align: center;
        }

（2）聖盃佈局

<div class="box">
    <header>header</header>
    <div class="content">
        <main>main</main>
        <nav>nav</nav>
        <aside>aside</aside>
    </div>
    <footer>footer</footer>
</div>

.box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 500px;
    background-color: yellow;
    text-align: center;
    font-size: 30px;
}
header, footer {
    flex: 0 0 80px;
    line-height: 80px;
}
header {
    background-color: pink;
}
footer {
    background-color: gray;
}
.content {
    display: flex;
    flex: 1;
}
nav {
    order: -1;
    background-color: blue;
    flex: 0 0 80px;
}
aside {
    background-color: green;
    flex: 0 0 80px;
}
main {
    flex: 1;
}

（3）響應式佈局

這是一道來自百度前端技術學院-task10：Flexbox 佈局練習的習題

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
.box div{
    width: 150px;
    padding: 20px;
}
.box1 {
    height: 120px;
    background-color: red;
}
.box2 {
    height: 100px;
    background-color: blue;
}
.box3 {
    height: 40px;
    background-color: pink;
}
.box4 {
    height: 200px;
    background-color: yellow;
}
@media (min-width: 640px) {
    .box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
@media (max-width: 640px) {
    .box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box4 {
        order: -1;
    }
}

其他的一些應用（固定在底部）：http://azq.space/blog/flex/

一些常用的清除浮動

如果有一個DIV作為外部容器，內部的元素如果設定了float樣式，則外部的容器DIV因為內部元素float脫離文件流，導致不能被撐開。這個時候我們可以用clearfix清除浮動

• 骨灰級的：

.clear{clear:both;height:0;overflow:hidden;}

上訴辦法是在需要清除浮動的後面加個div.clear，最大缺陷就是改變了html結構，雖然只是加個div。

• 推薦的 偽元素

.clearfix:after{content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}

• 很拉轟的浮動閉合辦法：

.clearfix{overflow:auto;_height:1%}

或者

.clearfix{overflow:auto;_zoom:1}