css

当flex-basis为auto是，意味着basis是item的内容的main size。

min-width > flex-basis > item width 优先级

如果只声明了flex-basis， 其它都没有，则flex-shrink默认为1.

如果flex item宽度，最小宽度没有指定，flex-basis指定为auto是，item的宽度刚好是内容宽度。

如果内容无法容纳了，则flex items不会进一步收缩了。比如图片。

如果既没有flex, 也没有flex-shrink， 则flex-shrink默认为1，意味着如果空间不够，内部的盒子会自动收缩的。

如果只声明flex-grow, 则flex-basis默认是auto，这一点要特别注意。

overflow: 每个元素都有一个盒子，如果盒子的宽和高不能容纳内容，可以通过overflow的属性来控制外面的内容如何显示，

有四个值：visible, hidden, scroll, auto; 默认是visible.

如果象wpf的grid那样按照比例分配空间，可以设置flow-basis为0%，然后分别设置flex-grow就可以了。请看fefinitive 622页

如果在flex表达式中省略了grow, shrink, 那么grow默认为1

如果在flex中省略了shrink和basis, 则shrink默认为1， basis默认为0%。

如果flex和flex-grow都省略了，那么grow默认为0，真是奇葩！！！！！！！！！！！！！P619 definitive

如果只写了flex-shrink，相当于在flex表达式中省略了grow和basis，则grow默认0， basis默认auto

如果只写了flex-grow, 相当于在flex表达式中省略了shrink和basis，则shrink为1， basis默认auto

一旦使用flex,所有的子节点的float和clear都被忽略，只要它们不是绝对定位，就都是块状的。

vertical-align对于flex items没有影响， 只对item里面的东西有影响。

<<css权威指南>>

color: 文本和边框颜色

border: 2px solid blue; 二个像素的蓝色边框

a:hover {text-decoration: none;} 文字下面没有下划线了

p:hover {background-color: gray;} 背景颜色

属性前面有星号的表示的是早期ie版本特定的比如: *display: inline; /* for IE7 */

边框三属性：

border-width

border-style

border-color

float从文档流中拿出来, 后面的会提上来, 但是会绕开浮动的元素.

overflow:hidden;

1. 让容器包含浮动的元素, 该容器下面的元素会自动移到下面.

2. 防止包含元素被超大内容撑大.

当父元素中有浮动元素时, 如果让父元素包围住浮动元素时, 可以让父元素也浮动起来.

父元素float: left; width: 100%;才能包住内容的浮动元素. 第94页

神奇的清楚规则, P95页开始.

 为父元素应用overflow:hidden
 浮动父元素
 在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
素添加clearfix 类来加（当然，样式表中得需要相应的clearfix 规则）

position属性是核心:

static 这个是默认的, 意思是每个元素都处在常规文档流中.

relative: 相对, 相对于哪里? 相对的是它原来在文档流中的位置, 就是相对于默认位置.

        应用relative的关键是要知道元素原来的位置.

absolute: 绝对定位, 元素彻底从文档流中拿出来.应用绝对定位之后, 该元素会从文档流中彻底拿出来.

       绝对元素的默认定位上下文是body.

       也可以改变绝对定位的上下文, 只要把相应祖先元素的position设定为relative就可以了

fixed: 固定定位, 定位上下文是视口, 不是body, 因此它不会随页面滚动而滚动.通常适用于导航元素.

absolute可以和父元素或祖先元素的relative结合起来.

top, left属性只和relative, absolute, fixed三种定位方式搭配使用才有效果.

display属性:

display 属性还有一个值有必要提一下，就是none。把元素的display 设定为none，
该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间

也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是visibility
属性，这个属性最常用的两个相对的值是visible（默认值）和hidden。把元素的
visibility 设定为hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”

背景:

每个元素盒子包含两个图层, 

1. 前景层包含内容和边框

2. 背景层, 元素的背景层可以用
实色填充（使用background-color 属性），也可以包含任意多个背景图片（使用
background-image 属性），背景图片叠加在背景颜色之上。

div里面有个图片包含在另一个div里面, 图片div后面跟一行文字, 把图片和文字居中:

把第一个图片设置display:inline-block;vertical-align:middle;就行了

或者:

如果文字在前面, 则需要把文字和图片div的vertical-align都设置成middle.

vw(view-width) vh(view-height)单位, 100vw 就是100%的view port宽度, 100vh就是100%的view port高度

1. 好几张图片紧凑地挨在一起, 放在container的中间:

.container {

display: flex;

flex-wrap: wrap;

justify-content: center;   // 水平方向居中

align-content: center;      // 垂直方向居中

[bootstrap-4] [image-resizing] [alignment] [centering]

[vertical-alignment]

index.html

进度条文字居中, 内层div居中

https://stackoverflow.com/questions/12937470/twitter-bootstrap-center-text-on-progress-bar

index1.html

容器内6张图片宽高固定, 集中分布在容器中间, 控制margin调节间距

index2.html

在一个div里面, 水平居中均匀分布li, 外层是ul, 多种方法: 可以用display: table; float: left; display: inline-block; display: flex; justify-content: center;

https://stackoverflow.com/questions/3259612/horizontally-centering-evenly-distributed-li-inside-of-ul-inside-a-div

index3.html

How do I vertically center text with CSS? [duplicate]

在一个div里面垂直居中文本, 在帖子里面提到align-content, 作用和justify-content一样, 不过是在另外一个轴.

https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css

index4.html

盒子里面的图片以及其后的文字一起居中:

https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image

index5.html

盒子里面3个div, 2个在边上, 一个在中间

6年前用float解决, 建议用flexbox解决.

https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div

index6.html

checkbox和后面的文字一起居中.

高票答案前提是使用meyer的reset脚本, 否则使用inline-block搭配vertical-align: middle更好.

https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

 

index7.html

去掉ul, li前面的缩进

https://stackoverflow.com/questions/9620594/removing-ul-indentation-with-css

不用flex垂直居中文字和图片的

https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div

 

介绍了一个在线垂直居中的工具, 有很多选项可以配置, 然后根据配置生成居中代码.

http://howtocenterincss.com/

vertical-align只有在有限的情况下才能对div居中, 一种是, 内层单行, 父亲固定高度, 设置父亲的inline-height就行. 现在这种方法很局限了.

http://phrogz.net/CSS/vertical-align/index.html

justifying content取值：flex-start | flex-end | center | space-between | space-around | space-evenly

默认值为flex-start, 这个属性指导在每一个flex line上，如何分布flex items

 

flush齐平的。

align-items默认是stretch的。