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-flexflex-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}