CSS中各种百分比(%)
1、固定定位 position:absolute;width:100%;height:100%; 中%相对的 都是浏览器的可视窗口宽高。
2、标准文档流中,标签的 % 单位除了height以外,垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度。
参考:https://blog.csdn.net/qq_34099161/article/details/52623615
3、div{height:100%;}百分比要有效 父级标签的高度必须要设定(值有效,浏览器计算的时候不会根据父元素实际内容大小进行计算的,只会根据设置值进行计算)。
如果高度要等于浏览器的高度,必须 同时设置 html,body{ height:100%}然后目标标签div每一个父级标签的高度都必须是100%。
http://www.webhek.com/post/css-100-percent-height.html 或 https://www.cnblogs.com/ostrich-sunshine/p/8309963.htm
可以这样理解:父元素的高度没有设置,则height只是一个默认值:height: auto;
。当浏览器根据这样一个默认值来计算百分比高度时,只能得到undefined
的结果。
也就是一个null值,浏览器不会对这个值有任何的反应。子元素的height进行百分比计算,获得不了具体的值,只能是默认的默认值height: auto。
注:要想标签高度为浏览器高度也可以使用 vh(视窗高度) 单位来实现。参考 https://blog.csdn.net/jyy_12/article/details/42557241
CSS中各种百分比(%)的更多相关文章
- CSS中属性百分比的基准点
1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...
- 浅谈CSS中的百分比
结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...
- CSS中的百分比(%)如何使用???
除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度 在默认的content-box盒模型下元素的width ...
- 一起来看看css中的单位
一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- CSS 中的高度百分比
CSS 中可以使用%来给定指定元素的大小,也就是高度.宽度.margin,padding 等等,但是相信很多人都对百分比表示法的具体含义并不清楚,那么不懂就练,毕竟是检验真理的唯一标准(考研党举个手我 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
随机推荐
- 开放融合 | “引擎级”深度对接!POLARDB与SuperMap联合构建首个云原生时空平台
阿里巴巴新一代自研云数据库POLARDB与超图软件SuperMap GIS实现 “引擎级”深度对接,构建了自治.弹性.高可用的云原生时空数据管理平台联合解决方案,推出了业界首个“云原生数据库+云原生G ...
- SPI驱动程序设计
一.SPI驱动子系统架构 m25p80.c: static int __devinit m25p_probe(struct spi_device *spi) { struct flash_platfo ...
- APICloud框架——总结一下最近开发APP遇到的一些问题 (二)
高度自适应 flex布局 允许子元素伸缩 手机号正则 function checkPhone(data){ if(!(/^1[34578]\d{9}$/.test(data))){ alert(&qu ...
- jetson资料
http://www.waveshare.net/wiki/Jetson_Nano_Developer_Kit http://www.waveshare.net/wiki/JetBot_AI_Kit ...
- zabbix监控winserver网卡流量
当前基于windows2008系统安装配置zabbix客户端,服务端为linux系统 1.设置防火墙规则 开启防火墙入站(tcp和udp)10050端口 2.在zabbix官网上下载windows包 ...
- nodejs操作消息队列RabbitMQ
一. 什么是消息队列 消息队列(Message Queue,简称MQ),从字面意思上看,本质是个队列,FIFO先入先出,只不过队列中存放的内容是message而已.其主要用途:不同进程Process/ ...
- scrapy原理
scarpy据说是目前最强大的爬虫框架,没有之一.就是这么自信. 官网都是这么说的. An open source and collaborative framework for extracting ...
- HTML-参考手册: 画布
ylbtech-HTML-参考手册: 画布 1.返回顶部 1. HTML5 <canvas> 参考手册 描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 ...
- linux安装相关软件
XShell上传jdk文件到Linux并安装配置1.yum -y install lrzsz2.sudo rz选文件3.sudo tar -zxvf jdk-8u131-linux-x64.tar.g ...
- python调用tushare的pro_bar通用行情接口
接口名称:pro_bar 更新时间:股票和指数通常在15点-17点之间,数字货币实时更新,具体请参考各接口文档明细. 描述:目前整合了股票(未复权.前复权.后复权).指数.数字货币.ETF基金.期货. ...