[CSS] Position 用法进阶01:匹配父级容器空间
引入
在前端界面设计中,会有那么一些布局,需要占满整个父级容器,比如:
模态框(Modal)的背景
加载器(Spinner)的背景
以上两种组件中,都是将背景完全填充到父级容器,区别在于模态框通常是背景填满屏幕,通常使用 position: fixed; 用于定位,而加载器更多用于将其背景布满父级容器,通常使用 position: absolute; 定位。
通过 CSS position 属性实现填满父级容器
为了实现填充父级的需求,从正常的盒子模型的设计逻辑来讲,我们的思路大体上很简单:
原创
2021-01-12 17:39:47 ·
950 阅读 ·
0 评论