CSS新时代布局

CSS新时代布局

1. flexbox 、BoxAlignment、Grid这三个可以称为新时代的新栋梁。

2. 浏览器解析过程
   渲染引擎会把服务器发送过来的source文档解析成，浏览器能明白的对象，浏览器会将对象生成一个渲染树，这个渲染树是一个中介性的结构，是文档结构formating struct结构的表示法， CSS在解析的过程会计算每一个元素和文本节点的每一个CSS属性，会通过display属性决定生成哪一类型的盒子。display目前有17个属性值。
   主要分两种类型。

• inner display type 内部显示类型
• outer display type 外部显示类型
  

flex 简写及其关键字

• flex: initial flex: 0 1 atuo :不能生长，但缺乏空间时可以伸缩小
• flex: auto flex:1 1 auto :依照空间平均伸缩
• flex: none flex: 0 0 auto :完全不伸缩，失去弹性功能，保持固定的尺寸
• flex ：<position-number> :flex: 1 0 能屈能伸，属性值断定生长比例。

自动margin是flex 的好友

automargin{
	display:flex;
}
.automargin div {
	margin: auto;   // div 将居中
	margin-top: auto // div 将在下边
	margin-left: auto // div 将在右边
}

网页中 登录在右侧时，可以用上面的方式来进行布局

为什么块级自动margin不垂直居中元素？？？

如果我们给元素的height设置auto，浏览器在渲染该元素时，只会考虑元素内容及子元素，纵向没有已确定的高度来调整位置，即使我们给height设置了固定的高度，他似乎跟子元素是不相关的，这可能是浏览器最初实行的抉择，而遗留下来的行为，浏览器没有办法计算上下margin的取值会把margin-top:auto margin-bottom:auto，解析成0

新时代的转折点就在flex/Grid容器，因为flex/Grid容器在跟子元素的关系，在布局时是被浏览器承认的，因此浏览器才有办法，计算出，四面的自动margin取值

css盒式对齐模块（Css Box Alignment Level3）

1. flexbox

• align-content
• justify-content
• align-item
• align-self
• justify-items/justify-self在flex项目是用不上的。

2. Grid

• align-content
• justify-content
• align-item
• align-self
• justify-items
• justify-self

justify-content和align-content属性 被规定为内容分配属性，当容器有多余空间时才生效

在grid容器时
justity-content: 用来调整整个行的对齐 start、end center
align-content: 用来调整列之间对齐 space-evenly、space-between
在flex容器时
justity-content: 用来调整整个行的对齐
align-content:用来调整多个轴线的对齐方式，如果轴线只有一条的时候，该属性是么有效果的。而默认情况下该值是stretch，只有单轴线时，这条轴线会占满flex的空间。

justify-self和align-self 用来对齐自己，被归类为自我对齐属性
在Grid中

justify-self和align-self 用来对齐自己，被归类为自我对齐属性
允许我们操作在网格区域里面的位置，默认是stretch，占据网格的整个空间。调整位置可以用

justify-item和align-item 用来设置grid的，所有的默认的align-self和justify-self的行为

justify-item和align-item 用在flex时，指定项目在交叉轴如何对齐，他们的默认值与grid相同，都是stretch

特别的：有一个比较少见的值baseline，如果你的项目的尺寸不一致，而导致文本上下上下不齐，我们可以用baseline，将文本对齐。

问题一：是选择flex 好 还是 grid好
flex 适合（单维的布局 ） flex 的行与列是不相关的，但是拥有最强的弹性功能。

Grid（二维的布局）适合二维的布局，grid的行列才是真实的，才是有关系的，可以像排棋子似的排想要的布局。

答：可配合在一起使用，实现复杂的布局，没有那个好与不好，各有长短。

问题二： 百分比的局限，每一个元素伸缩率是一致的----响应式网页设计

灵活性尺寸

1. fr 是free space的数量单位，剩余空间的单位，如果有多余空间时，浏览器会将多余空间分配给多余空间的那一栏，也可以用来分配多余空间分配的比例，viewport变小时，浏览器会将多余空间取回，且fr的空间最先被取回，直到缩到min-content时，才会取回auto的空间。压缩的优先级最高。
2. auto 多余空间涨优先级最低，只要达到了文字的宽度后一般不再涨了，但当别人都不涨时他就涨。
3. minmax(下线，上线) 达到下限就不再缩，达到上线就不再涨，涨优先级最高，缩优先级低。
4. fit-content(num) 涨到num时就不再涨了

max-content() 与固定width相同
百分比尺寸灵活性尺寸

灵活性尺寸轻松的实现重叠性的设计

future query 用来做本地功能检测，类似于media query，判断浏览器是否支持该属性值。
使用的关键字是@supports
用法
@support (property:value){
.selector {
/style for browsers that support the specified property/
}
}

@support浏览器的支持率达到了百分之九十四，对于不支持的浏览器 @support的选择器根本就不生效。
将回退样式写在前头，新属性在@support中，用渐进增强的方式。用旧款浏览器的用户也可以浏览网页
可以用在任何一个css属性上

最后的问题，网站需要在每一个浏览器长的一模一样吗？
答案：是NO