position+left+bottom+top+right
今天才知道原来position加上上下左右可以控制的到div的宽度的
比如我现在有一个需要
这样一个需求
现在是红色部分50px
但是你可能不知道剩下的蓝色部分的高度是多少
蓝色部分要怎么填满剩余的高度呢 这时候left,right,top,bottom,就很有用了
直接给蓝色的div:position:absolute;top:50px;bottom:0;left:0;right:0
给这个样式蓝色部分就填满了除了红色部分的高度跟宽度了
然后黄色部分要在蓝色部分里面水平垂直居中,那网上就有很多方案了
要解决这个问题还有一个方案
<div style="display: flex;flex-direction: column;height: 100vh">
<div style='height:50px;background-color: red'></div>
<div style='flex: 1;background-color: blue;display: flex;justify-content: center;align-items: center;'>
<div style='height:50px;width:50px;background-color: yellow;'></div>
</div>
</div>
position+left+bottom+top+right的更多相关文章
- 关于苹果手机微信端 position: fixed定位top导航栏问题
在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...
- (四)学习CSS之position、bottom、left、right和top属性
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 微信小程序自定义组件实现
官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...
- css3的transform,translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
- vue动画钩子
<template> <div class="hello"> <div class="toggle" @click="f ...
- Vue.js 实现的 3D Tab菜单
今天给大家带来一款基于VueJS的3D Tab菜单,它跟我们之前分享的许多CSS3 Tab菜单不同的是,它可以随着鼠标移动呈现出3D立体的视觉效果,每个tab页面还可以通过CSS自定义封面照片.它的核 ...
- margin的auto的理解 top,left[,bottom,right] position
auto auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the ...
- position relative top失效的问题,温习下常用两种的居中方式
因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} <!DOCTYPE h ...
随机推荐
- 第一天-python基础
每一个今天的坚持都会改变明天的自己! 一.python介绍 python是一门由解释型.弱类型的高级开发编程语言,由龟叔于1989圣诞开发出,后经过二十多年的发展,因其简洁高效的特点而被广泛使用,在世 ...
- [CTSC2008]祭祀(构造方案)
前面的话 这道题显然就是最长反链 根据 \(Dilworth\) 定理:最小链覆盖数 = 最长反链长度 然后传递闭包跑匹配即可 \(luogu\)交了一下,\(WA\) 了 \(QAQ\) 本来各种 ...
- Python之正则表达式模块
正则表达式符号: . ^ $ * + ? {} () | [] .一个点代表一个字符 ^代表开头 $代表结尾 *代表有0到无数个 [0,+00] ?代表有0到1个 [0,1] +代表有1到无 ...
- PHP开发支付宝之电脑网站支付--流程简介
前言 前端时间自己开发了一个drupal的支付宝模块,现在整理一下过程,因为支付宝官方网站提供的接口及文档都是新接口的,而且使用新接口的过程比较麻烦一点,所以整理一下 1.支付宝的账号必须经过企业资格 ...
- JavaScript如何比较两个数组的内容是否相同【转】
比较2个数组是否相等的. 不能像字符样 简单的用 == === 比较 ([]==[]); // false ([]===[]); // false 都是false -------------- ...
- android toast使用方法
1.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二个参数:要显示的字符串.也可是R.string中字符串ID // 第三个参数: ...
- Android SD卡上文件
1. 得到存储设备的目录:/SDCARD(一般情况下) SDPATH=Environment.getExternalStorageDirectory()+"/"; 2. 判断SD卡 ...
- redis使用方式
关于Jedis连接Linux上的redis出现 DENIED Redis is running in protected mode问题的解决方案 1.修改redis.conf配置文件,将绑定的ip地址 ...
- git操作合集
目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...
- iOS亮屏解锁命令【iOS自动化测试】--使用ssh
前提:iOS越狱手机一个 越狱方法:使用pp助手, 爱思助手等 1.从Cydia安装以下软件: AppSync for iOSx(可安装破解软件).afc2add补丁(可访问整个iOS设备的系统文件) ...