[纪录] Day2 切版练习笔记

切版练习日期: 2020/02/14
观看影片 : CssCoke - "金鱼都能懂的网页切版 : 网页页尾版块 NO006" && "金鱼都能懂的网页切版 : 导览列 NO007"

border-radiom用法

设置元素的外边框圆角

HTML:

    <div class="wrap"></div>

CSS:

    .wrap{            width: 200px;            height: 200px;            background-color: #faa;            margin: 20px;            border-radius: 20px 40px;        }

Note :
- 如果省略了左下角则等于右上角。
- 如果省略了右下角则等于左上角。
- 如果省略了右上角则等于左上角。

Flexbox宽度

flex-basis

flex-basis 预设值爲 auto，表示其预设分配到的空间，与 width 很像，但优先程度较高。

flex-grow

flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间，其值为一个权重（也称扩张因子），默认为0，剩余空间将会按照这个权重来分配。

分配公式: 剩余空间 * 子元素n / Sum
(Sum = 子元素1 + 子元素2 +...)

最终宽度 = 原本宽度 + 分配宽度

EX :

父元素宽度 = 1000px
三个子元素宽度都为 100px
剩余空间 : 1000 - (100 * 3) = 700px

若将flex-grow分给三个子元素为 1 / 3 / 1
于是Sum = 1+3+1 = 5

子元素1 = 100px + (700 * 1/5) = 240px
子元素2 = 100px + (700 * 3/5) = 520px
子元素3 = 100px + (700 * 1/5) = 240px

当所有元素的flex-grow 之和小于1 的时候，剩余空间不会全部分配给各个元素。
分配公式: (Sum / 1) * 剩余空间

若将flex-grow分给三个子元素为 0.1 /0.3 / 0.1
于是Sum = 0.1+0.3+0.1 = 0.5

子元素1 = 100px + (700 * 0.1 / 1) =170px
子元素2 = 100px + (700 * 0.3 / 1) = 310px
子元素3 = 100px + (700 * 0.1 / 1) =170px
剩余空间:700 - 170 - 310 - 170 = 350px

flex-shrink

flex-shrink 属性定义空间不够时各个元素如何收缩，其值默认为1。
flex-shrink 定义的是元素宽度变小的一个权重分量

EX :

父元素宽度 = 500px
三个子元素宽度为: 150px / 200px / 300px
超出的宽度 : 500 - 150 - 200 - 300 = -150px
而这多出来的150px就由三个元素的分别收缩一定的量来弥补

若将flex-shrink分给三个子元素为 1 / 3 / 1
权重 = 子元素宽度 * flex-shrink
总权重:150 * 1 + 200 * 3 + 300 * 1 = 1050

三个元素分别收缩：
150 * 1(flex-shrink) * 150(width) / 1050 = -21.4px
150 * 3(flex-shrink) * 200(width) / 1050 = -85.7px
150 * 1(flex-shrink) * 300(width) / 1050 = -42.85px
三个元素的最终宽度分别为：
150 - 21.4 = 128.4px
200 - 85.7 = 114.3px
300 - 42.85 = 257.15‬px

当所有元素的flex-shrink 之和小于1 时，并不会收缩所有的空间，而只会收缩flex-shrink 之和相对于1 的比例的空间。

总权重 : 150 * 0.1 + 200 * 0.3 + 300 * 0.1 = 105
三个元素收缩总和并不是150px，而是只会收缩150px的(0.1 + 0.3 + 0.1) / 1即50%的空间：75px

三个元素分别收缩：
75 * 0.1(flex-shrink) * 150(width) / 105 = -10.7px
75 * 0.3(flex-shrink) * 200(width) / 105 = -42.85px
75 * 0.1(flex-shrink) * 300(width) / 105 = -21.42px
三个元素的最终宽度分别为：
150 - 10.7 = 139.3px
200 - 42.85 = 157.15px
300 - 21.42 = 275.58‬px

FlexBox参考网站:https://github.com/xieranmaya/blog/issues/9