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常见的使用场景(其实一开始不是想写这些,但遇到的问题无法重现了...),水了一篇文章,本文结束。
原文地址:https://www.cnblogs.com/echolun/p/11353627.html
- 《快学Scala》第一章 基础
- 二分查找法的实现和应用汇总
- 《快学Scala》第一章 基础
- 移动端打印输出内容以及网络请求-vconsole.js
- 二分查找法的实现和应用汇总
- JavaScript前端和Java后端的AES加密和解密
- 《Spark MLlib 机器学习实战》1——读后总结
- angularjs自定义指令实现分页插件
- A+B for Input-Output Practice (V)
- 机器学习——相似度算法汇总
- 白话推荐系统——从原理到实践,还有福利赠送!
- 基于Spring Boot的Logback日志轮转配置
- Java程序员的日常—— Spring Boot单元测试
- Windows下TensorFlow安装指南(图文版)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- JSTL
- shell脚本快速入门之-----正则三剑客之三awk用法大全!!!
- 一起来看看1stOpt到底有多强大?
- shell脚本快速入门之-----深入介绍Expect免交互
- shell脚本快速入门之-----Here document使用方法总结
- spring框架应用系列一:annotation-config自动装配
- 弄它!!!2020年了你还不懂ACL嘛,小编带你走进ACL的世界,分分钟搞定!!!
- jsp实用过滤器写法
- 搞它!!! Linux 查看CPU信息,机器型号,内存等信息
- shell脚本快速入门之----sort、uniq和tr
- 社区开源框架网络模块:ConnectionManager详解
- 搞它!!!Linux--深入介绍firewalld防火墙管理工具
- 搞它!!! 深入介绍iptables防火墙管理工具
- ZooKeeper的十二连问,你顶得了嘛?
- 手把手教你,嘴对嘴传达----Apache虚拟主机配置与应用