漫漫前端之路CSS布局(下)

新的一周开始了，冷风吹得人懒洋洋不想动弹.趁着总结iOS新特性之前继续学习CSS布局。

Absolute

绝对布局，破坏了流结构，会直接覆盖在其他流结构布局元素上。

position:absolute;

① 未设置left right bottom top时，位置不变只不过流结构中不会保留该元素的区域。

Absolute布局

②设置left right bottom top时，会相对父元素(非static)进行绝对布局

举个例子: top = 0并不是屏幕的y = 0的位置，而是父视图中 y = 0的位置

• 设置两个值(如left和top、bottom和right)

Absolute布局

• 设置三个值(如left、top和right)

Absolute布局

• 设置四个值

Absolute布局

上文中有一个重点，绝对布局是相对于父元素（非static）而言的，举个例子: 当父视图的高度 > 屏幕的高度

position: absolute;

① 父元素position: static ，那么该absolute子元素相对于屏幕布局

image

②父元素position:relative，那么absolute子元素相对于父元素布局

image

Position: fixed

在未滑动的状态下设置left right top bottom 的效果和absolute一致，但是不管什么情况下这四个值都是相对于屏幕而言。

Position: sticky

元素在保留在流结构中的位置，当滑动到距离 top left right bottom设置的值时，便会停止在该位置，如同当滚动到某个位置时，某个view会悬停到某个位置不动的效果。在页面中设置多个sticky元素时，下面为sticky的元素会从上面盖过上面元素的效果:

Position: sticky

静止状态

Position: sticky

Section B(sticky)滑动靠近顶部时

① 当同时设置了top = 0px 和bottom = 0px，并不会和fixed一样覆盖整个父视图的区域，而是在该view信息流中的y位置进入屏幕前使用bottom = 0px，固定在底部:

Position: sticky

② 在信息流中的y位置进入屏幕时，滚着滚动，直到满足top = 0px

Position: sticky

grid 网格布局

和flex弹性布局不同的地方是通过画格子的方式能快速的进行二维空间布局。

grid-template-columns

默认为一列，通过设置该属性值设置尺寸，判断每行的column数。通过数值和百分比进行布局时：

① 当只有一个值时，如40%

② 当设置多个值时，且总和不超过屏幕宽度，如 40% +60% = 100%

③ 当设置多个值时，总和超过屏幕的宽度,窗口可横向滑动，如40% + 60% + 40% = 140%

使用弹性单位fr，可以按比例分配容器的大小。

总共分成4份，第一列占1份，第二列占2份

使用关键字auto，会填满容器的可用空间：

但是对于设置弹性单位fr，则会默认为auto的列设置文本的宽度:

对齐方式

① justify-items: grid-item在布局区域水平方向左右对齐方式

②justify-content:给content items在水平方向分配空间

和flex相似，space-around: item间距是边距的2倍；space-evenly: 间距和边距一致。

③ justify-self: 修改某个item在水平方向上的对齐方式。效果和justify-items一样，只不过是针对某个item而言

在竖直方向上，实现以上的效果，只需要将justify替换成align

align-items 、align-content 、 align-item

④ place-content: align-content 和justify-content的缩写（注意顺序！！）。可同时设置水平和垂直方向content的对齐方式

place-content: start end;

⑤place-items: align-items 和justify-items的缩写（注意顺序！！）。可同时设置水平和垂直方向items的对齐方式

Flex 布局缩放因子Flex-shrink 和Flex-grow计算

三个元素宽度分别为 200px 300px 400px，缩小因子分别为: 1 2 3

容器宽度为800px

所以这时候因为会缩小各个flex-shrink != 0的元素。之前错误的理解是:

而正确的理解为:

①当flex-shrink的总和 > 1时，表示要缩放整个超出的部分

②当flex-shrink的总和 < 1 时，表示只是缩放（超出部分 * flex-shrink）的部分

具体可参考:Flex弹性布局缩放因子探究

---

按照前端学习流程，下一步就进入了JS相关的学习了[撒花]