css 布局知识_css使用zoom和flex

css布局

1、正常布局流

（基础，建议学习，若已了解，可跳到下一标题）
块状元素：占一行，宽度与父元素一样，高度与内容高度一样

(内联元素转块元素方法）

设置display: block; （或者，display: inline-block;      	inline-block 混合了inline 和 block的特性。)
1

常见块状元素：div,form,h1```h6,hr,caption,p,列表，表格标签。

行内元素：

• 宽度与内容宽度一样，相邻的行内元素会排在一行，排满才进入下一行或溢出。
• 不可设置宽高
• margin、padding水平方向有效，竖直方向无效

（块元素转内联元素方法）
设置display:inline;

2、float+position

float:left/right/none

清楚浮动：
1：在父级结束前，添加一个子标签

<div style="clear:both;">
1

2：在父级css属性加上入overflow:hidden;zoom:1;或者overflow:auto;zoom:1;
3：在父级用zoom+:after方法，原理类似于clear:both,利用CSS方式：after在元素内部加一个clear:both的元素块

.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
1
2

4：对父级设置合适的高度直接撑开（子绝父相）

position:
1.absolute：生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位；

2.relative：生成相对定位的元素，相对于其所在普通的文档流位置进行定位；

3.static:默认值，没有定位，元素出现在正常的文档流中;

4.fixed:老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动；

5.sticky:(CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

absolue:绝对定位，不占位置，完全脱标
relative:相对定位，占位置，不脱标
一般子绝父相（子盒子绝对定位，父盒子相对定位）
fixed:不占位置

3、弹性盒子-flex布局

/*给父元素设置flex属性，称之为flex容器，内含元素成为flex项*/
section {
  display:flex
}
1
2
3
4

1. flex-direction属性决定主轴的方向
   

2、justify-content属性定义了项目在主轴上的对齐方式

3、align-items属性定义项目在交叉轴上如何对齐

4、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，使用上一属性。




5、flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

6、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
1
2
3

7、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
8、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
9、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4、Grid布局