HTML和 CSS学习---（18）

内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道， 名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引， 也借以这个平台来和大家分享一下一些很有用的学习资源。

要点

1. 方位

我们知道，当我们使用Position：absolute ;的时候，则父元素的行为就好像子元素根本不存在当我们尝试设置其他值（例如left，）时bottom，right我们会发现子元素不是响应其父元素的尺寸，而是响应文档；(来自csstrick)

<div class="parent">
Parent element
<div class="element">Child element</div>
</div>

HTML SCSSResult
EDIT ON
.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}




/* Alignment styles */

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.有趣的填牛奶

原理是这样子的， 底部是一个满的照片， 中间一个seperator， 顶上一个空瓶子， 于是将中间的seperator的背景颜色换成页面的背景色，然后使用javascript调整seperator的bottom项的大小，这里使用的是mousemove 函数与animate函数的结合

$('.box).mousemove(function(e){
			$ ('.seperator').animate({
				'bottom':-e.pageY + 768 +'px'
			})
  })

bottom 的作用简单讲就是定义当前元素的底部相对于页面底部的位置。
这个animation的用意在于将seperator逐渐上移看起来就像是填牛奶的动作

3 flex 属性

该属性设置柔性怎么项目将增长或缩小以适合可用空间在其弯曲的容器
根据MDN的解释

当flex：1的时候，其他元素也是相同设置属性， 那么将会处于平分容器的状态，使用flex：1，然后在hover元素时使用flex-grow:5可以使元素伸长至5倍宽度、

4. 分享一段代码

我当时比较质疑为什么需要两个transition， 后面有一个比较好理解的一种思维就是，transition是设置回到当前元素设置状态的时间，如果只有一个时间value的话，这样的话就比较好理解啦
今天的分享就到这里啦， 希望大家喜欢：）