|
CSS是一个很独特的语言。看起来非常简单，然则某种特殊效果看似简单，实现起来就颇有难度。这篇文案重点是给在学习前端的童鞋分享有些新的CSS技巧，有些在前端教程和培训课堂中不会讲到的知识。第二便是让还在前端研发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！ 
1. 固定底部内容
这种是一个非常常见的布局方式，然则针对新手来讲是比较平常的困难。
这种布局方式在后台管理系统中比较平常，当咱们内容不足浏览器窗口高度时，底部内容必须固定在底部。当内容超出了浏览器窗口高度，就会随着内容往后推。
在有CSS3之前，实现这个效果是颇有难度的。浏览器窗口高度是会按照区别用户打开浏览器的状况，屏幕体积的差异和浏览器的缩放比例而变。咱们必须借助JavaScript来实时获取浏览器高度进行运算才可实现。虽然说标题是说“固定”底部，然则咱们想要的效果不是position: fixed。运用固定定位，在内容高于窗口高度时，就会挡住咱们的内容。
随着CSS3的来临，最完美的实现方式是运用Flexbox。实现的重要便是运用不太被关注的flex-grow属性，能够在咱们的内容标签元素（例如div）中运用。在咱们下面的例子里运用了main标签。
我来讲解一下实现原理吧。
flew-grow是用来掌控一个flex元素相对它同等级flex元素的自己可扩充的空间。倘若咱们运用flex-grow: 0，那这个flex元素就完全不会扩展了。因此咱们必须把头部和底部之间的内容标签元素设置为flex-grow: 1或flex-grow: auto，这般内容部分就会自动填充满头部和底部之外的所有空间。
为了避免底部内容受内容部分扩充空间的影响，咱们给footer底部元素flex-shrink: 0属性。flex-shrink的功效与flex-grow是恰恰相反，用来掌控flex元素收缩的空间，这儿咱们给了
| 
发表于 2024-6-29 15:27:44
