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}