css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?
壹 ❀ 引
当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论。
贰 ❀ 关于top left right bottom
position定位属性大家都不会陌生,添加position属性的元素可以定位,而top,left,right,bottom属性决定元素定位后所在的位置,而在使用定位属性需要注意两点:
第一点,top,left此类定位属性只对添加了position属性且值为非static的元素生效,即值为fixed,absolute,relative,sticky其一。
第二点,在使用top,left,right与bottom属性时一般只设置两个属性进行定位,比如常见的top与left为一对,设置了top一般不会再设置bottom。
而四个同时设置时,我们常见就是值为0,那么四个值设置0有哪些使用场景,一般有两种:
1.让明确宽高的盒子垂直水平居中
HTML:
<div class="parent"> <div class="child"></div> </div>
CSS:
.parent { width: 200px; height: 200px; background: #ffb6b9; position: relative; } .child { width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #8ac6d1; margin: auto; }
效果图:
通过设置top,left四属性为0居中元素的做法有个前置条件,就是需要居中的盒子必须有固定的宽高(px),否则会失效。这就像四个方向有相同的力在拉这个盒子,配上margin:auto让这个盒子的位置保持中立,来达到盒子处于正中心的目的。
2.让无宽高的盒子填满父容器
在做弹窗或者loading效果时,我们往往会给弹窗加一个半透明的黑色遮罩,用于凸显核心内容;当父容器宽高不确定时,遮罩的宽高也无法确定,除了设置width:100%,height:100%外,设置top,right四属性为0就是第二做法。
.child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); }
这样一看,貌似也没问题,那么它与宽高设置为100%都能填满父容器呢?
叁 ❀ top:0,left:0,right:0,bottom:0和width:100%和height:100有什么区别
从实现效果上来看,两种做法都能让一个没有宽高的盒子完全填满父容器。
但设置子容器宽高为100%表示继承父容器宽高,即父容器不管多大子容器始终为父容器的百分百。
而设置top:0,left:0,right:0,bottom:0本质目的,是让子盒子四边与父容器间距为0,而子盒子没有明确宽高,自然被拉伸到完全填满父容器了。这也是为何上文中对于让盒子垂直水平居中时必须要有明确宽高的原因。
那么到这里,我们了解了top,left等为0常见的使用场景(其实一开始不是想写这些,但遇到的问题无法重现了...),水了一篇文章,本文结束。
相关文章
- 【静态页面架构】CSS之链接和图像
- css font-family常用的黑体宋体等字体中英文对照
- css实现一级下拉菜单
- 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
- Web 开发中 20 个很有用的 CSS 库 - WEB开发者
- 网页设计DIV+CSS——第5天:head区的其他设置
- [CSS] Customer focus / disabled style for select element
- CSS ID选择器与CLASS选择器
- 为什么CSS这么难学?css核心知识点攻坚指南
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- Qt css样式大全(整理版)
- 【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )
- 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
- 【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )
- 【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )
- 【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
- 【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
- 219:vue+openlayers 加载gif文件,采用CSS设置gif背景的方式
- 【CSS】盒子模型、内边距、背景设置_03
- 【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数