JS成神之路（六）：css的布局样式

1. display(block,inline,inline-block,none,inherit,flex)
   display属性每个元素都有，比如div默认属性值block,span的默认属性值inline
   注意：inline-block可以将块级元素变为行级元素，单需要消除magin。
   对行级元素设置宽高不起作用，magin,padding都只对左右起作用。

2. position
   在布局中很重要的因素就是定位，position 属性就是用来定义元素的定位机制。position 的常用属性值有：
   • relative：相对定位，相对于元素本身自己的正常位置进行定位（添加left,top等以后进行偏移量定位）；
   • absolute：绝对定位，相对于除 static 定位以外(有position)的父级元素进行定位如果没有就是window窗口进行定位；
   • fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；
   • static：默认值，没有定位属性，元素正常出现在文档流中；
   • inherit：继承父元素的 position 属性值。
   上文出现了文档流（normal flow）的概念，按理来说应该翻译成普通流，文档流是大多数人的叫法。“流”可以想象成流动的水，当我们打开屏幕，浏览网页，滚动鼠标，网页的内容就像是水流一样滑过。文档流便是指从上到下，从左往右的文档布局。当我们给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流，不再遵循从上到下，从左到右的规律了。
   float:浮动元素，常用的属性有left,rigth,当没有定义父级元素高度的时候，可能出现高度塌陷，我们清除浮动特性就用 clear:left,rigth,both都可以。

3. flex弹性布局
   
   上图便是一个 Flex 布局的大致架构了，图中的囊括概念有几点：
   • Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目；
   • Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的；
   • 主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end；
   • 子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。
   父容器属性：
   display 属性用来将父元素定义为 Flex 布局的容器，设置 display 值为 display: flex; 容器对外表现为块级元素；display: inline-flex; 容器对外表现为行内元素，对内两者表现是一样的。
   • flex-direction 定义了主轴的方向，即项目的排列方向 row | row-reverse | column | column-reverse; item排列起点从左开 始，从右，从垂直上面，从垂直下面
   • flex-wrap 用来定义当一行放不下时，项目如何换行。nowrap | wrap | wrap-reverse; 不换行，第一行在上，在下
   • flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-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;

子项目的属性：
• order 该属性的数字越小，那么项目就越靠前
• flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。
如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。
• flex-shrink flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
• flex-basis
• flex
• align-self