触发怪异模式的条件

如果想设置滚动条样式怎么办?

三列布局

第一种 绝对定位

html

css

利用 vw 和 calc()?

float方式,

要注意html的顺序

html

scss

参考 三列布局实现4种方法

双侧翼,还真是学习了.

这样能够保证先加载中间的主要内容

html

scss

不用float 用display : inline-block行不行?

这才发现 float 和 inline-block 有个挺大的区别

float 时, left 通过 margin-left 向左移动时, right 会被 mid卡主.

inline-block 时, left通过margin-left 向左移动时, right会跟着left 一起移动.

双侧翼很巧妙!

css每个单句都不怎么难, 但复合使用不太好掌握.

圣杯模式

html

scss

这个就更巧妙了,我真实佩服的五体投地.

首先, width 和 margin 的百分比都是 针对父级的宽度, 这个宽度是 content-width

不包括padding部分.

所以根据padding 预留出左右的空间.

根据float 的特性, 左右会折行到下一行,

通过margin-left 可以让float元素 之间重叠, 让他们回到同一行.

但重要的是, left 的移动,right不会跟着移动,这和inline-block 不同.

最后用relative最后再调一次位置.

实在是精妙.

css3 关于position 感觉非常坑人

关于 百分比的基准值,这里有写.

用flex

html

scss

确实很方便, 问题来了, 如果我想让mid 先加载怎么办?

利用order

html

scss

设置在子元素,伸缩项目上.

多余的部分会进行拉伸填充,

每个子元素的默认是为0, 默认是不会拉伸填充,不变形.

如果设置,则按照比例,分割空间分配.

也就是会经过变形不超出父级.

默认值为 1, 按照该比例,切割子元素,

如果我们想让他们不变形且不换行,

可以把子元素的shrink 值都设置为0

这就是视频和文字的差异了,

因为用文字表达要准确,所以只能说的不是人话,

实际上核心逻辑非常简单.

刚开始,我不明白这个属性有什么用处,

后来发现三列布局时,通过html顺序和 order配合可以调整加载顺序.

默认值为 0

如果我们想设置子元素的主轴方向的属性,

可以用 grow, shrink, base ,order, 可以调整主轴的大小和位置

如果想谁知子元素的侧轴方向的属性,

可以用aline-item,

父元素上的 flex-direction flex-wrap justify-content aline-item aline-content

这几个属性,都是用来进行布局的.

非常的,,嗯强大.

我们讲主轴设为 x轴, 设定多行的情况,

讨论一下 aline-item 和 aline-content的效果区别.

之前我只是笼统的知道 aline-item 作用在侧轴只有一行的情况.

aline-content 作用在侧轴多行的情况.

而实际上 aline-item 对 侧轴多行的情况也是有效果的,只是不一样.

html

当值为strech时, 两个效果是一样的.

注意strech 如果想要有效果, 就必须让heigth(侧轴宽度) 不是固定宽度,否则失效.

除了这三个之外, aline-content 还有两个属性,

与justify-content 非常类似,

如果父级 relative 子级当中有 absolute的元素,

则该子元素不受到 flex布局的影响.

flex布局时会排除该元素进行布局

至此,我觉得flex进行布局,那是真的强.

主轴和侧轴的各自控制属性基本就全了.

侧轴唯一比主轴差的属性,应该就是 shink 和 order属性了.

好课外思考就到这里, 继续看视频

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】

【八角形】

【菱形】

需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等

scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin

通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整

【裁切路径方案clip-path菱形】

【相关知识点】

clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）

生成器https://www.html.cn/tool/css-clip-path/

一、基本图形

inset()矩形（上右下左的边距round上右下左圆角）

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

circle圆形

circle()可以传人2个可选参数：

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比

2. 圆心位置，默认为元素中心点

半径公式

如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比

ellipse椭圆

ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

二、多边形polygon--正三角形

x: 0, y:100% 从元素的左上角开始，并从那里开始移动

x: 50%, y: 0

x: 100%, y: 100%  元素右边，元素底部

从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点

正方形

从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点

正五边形  59/（59+95）=38.31%，31/（81*2）=19.14%

162/2 = 81

59是上面三角形的高度

95是下面三角形的高度

31是下面四边形的高度

正六边形  50/（100+50 2）=25%，150/（100+50 2）=75%

50 是左边三角形的高度

100 是边长

正七边形 

22/（100+62 2）=10.09%

202/（100+62 2）=90.18%

43/（43+97+78）=19.72%

（43+97）/（43+97+78）=64.22%

62/（100+62 2）=27.68%

（100+62）/（100+62 2）=72.32%

正八边形

71/（100+71 2）=29.34%

（71+100）/（100+71 2）=70.66%

五角星

红叉叉

标签

也可用于动画中

如果觉得百分比不好计算，可以换算成px

下面就是第一个点的计算方法

35.00%*800=280px

29.75%*400=119px

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了

如果不同是没有效果的

小技巧，如果点不够，可以将两个坐标点进行重合即可

推荐网址：

http://species-in-pieces.com/

30个动物全部使用CSS3写的。超牛