CSS布局flex、position、display、visibility、opacity分析

flex:1 解析

• 可以实现均分外层容器空间的效果。

• flex 是 flex-grow，flex-shrink，flex-basis 三个属性值的缩写

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  

• flex-grow

  • flex-grow用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1

• flex-shrink

  • flex-shrink用于设置item的总和超出容器空间时，各item的收缩比例，若flex中没有指定flex-shrink,则等同于设置了flex-shrink:1

• flex-basis

  • flex-basis用于设置各item项的伸缩基准值，可以取值为长度或百分比，如果flex中省略了该属性，则相当于设置了flex-basis:0

position 绝对/相对/粘性 布局分析

张鑫旭：杀了个回马枪，还是说说position:sticky吧

• static
• relative
• absolute
• fixed
• sticky
  • sticky元素效果完全受制于父级元素们，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。
  • 父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。
  • 同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
  • sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。
  • 父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。(2019-05-22新增)

display、visibility、opacity 区别分析

CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

• transparent：是一种色彩颜色，只不过它是全透明色彩。可以利用这个属性画出三角形。

• 顺带一提opacity和rgba的区别：

  • opacity是属性，rgba()是函数，计算之后是个属性值。
  • rgba一般修改的是背景色或者文本的颜色，内容不会继承透明度。
  • opacity作用于元素和元素的内容，内容会继承透明度。

• 针对元素的隐藏分析，即 display:none;visibility:hidden;opacity:0;

1. 属性分析

   • display：定义建立布局时元素生成的显示框类型。
   • visibility：用来设置元素是否可见。
   • opacity：用来设置透明度。

2. 是否占据页面空间

   • 使用 opacity:0 和 visibility:hidden 属性时，元素还是会占据页面空间的，而使用 display:none 属性时，元素不仅看不见也不占据页面空间。

3. 对子元素的影响

   父元素分别设置为 display:none;visibility:hidden;opacity:0;子元素设置为 display:block;visibility:visible;opacity:1;

   • display：子元素不可见，受父元素影响
   • visibility：子元素可见，不受父元素影响
   • opacity：子元素不可见，受父元素影响

4. 自身绑定的事件是否能继续触发

   父元素分别设置为 display:none;visibility:hidden;opacity:0;对子元素设置onmouseenter鼠标移入事件触发alert()弹窗

   • display：不会触发，该属性下的元素不仅看不见，而且也不占据页面空间，所有不会触发事件。
   • visibility：不会触发。
   • opacity：可以正常触发

5. 回流（重布局或者重排）/重绘

   回流必将引起重绘，而重绘不一定会引起回流。

   • 回流：当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
     • dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。
   • 重绘:当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。
     • dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。