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中各种百分比(%)的更多相关文章

  1. CSS中属性百分比的基准点

    1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

  2. 浅谈CSS中的百分比

    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...

  3. CSS中的百分比(%)如何使用???

    除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度 在默认的content-box盒模型下元素的width ...

  4. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  5. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  6. CSS 中的高度百分比

    CSS 中可以使用%来给定指定元素的大小,也就是高度.宽度.margin,padding 等等,但是相信很多人都对百分比表示法的具体含义并不清楚,那么不懂就练,毕竟是检验真理的唯一标准(考研党举个手我 ...

  7. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  8. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  9. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

随机推荐

  1. UNP学习第七章

    一.套接口选项 函数getsockopt和setsockopt 函数fcntl 函数ioctl 二.getsockopt和setsockopt函数 #include <sys/socket.h& ...

  2. 系统的重要文件/etc/inittab被删除了--急救办法!

    如果在生产环境中,系统的重要文件/etc/inittab被删除了(系统还没重启,崩溃前),不要急,下面告诉你该如何处理.1.模拟误删除文件[root@localhost ~]# rm -rf /etc ...

  3. <Jmeter入门不放弃>之<1.认识jmeter>

    大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,,才有印象,大家一定要启动JMeter! 一.Jmeter是什么 由 Apache 组织开发,基于JAVA压力测试工具 ...

  4. nginx防止SQL注入规则

    $request_uriThis variable is equal to the *original* request URI as received from the client includi ...

  5. 【Java架构:基础技术】一篇文章搞掂:MyBatis

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文主要总结于刘增辉的<MyBatisc从入门到精通>一书,有兴趣的朋友可以自行研读 建议仔细研读官方文档: http ...

  6. 如何把EXCEL数据导入到SQL SERVER数据库中 (转)

    转:http://blog.csdn.net/jjp837661103/article/details/13509889 在我们完成一个项目开发之后,通常我们需要把客户的很多数据导入到数据库中,面对大 ...

  7. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  8. PHP面试 MySQL数据库基础

    MySQL数据库基础 MySQL数据类型 整数类型:TINYINT   SMALLINT   MEDIUMINT   INT   BIGINT 属性:UNSIGNED 长度:可以为整数类型指定宽度,列 ...

  9. Linux中的特殊权限s、t、i、a

    文件权限除了r.w.x外还有s.t.i.a权限:s:文件属主和组设置SUID和GUID,文件在被设置了s权限后将以root身份执行.在设置s权限时文件属主.属组必须先设置相应的x权限,否则s权限并不能 ...

  10. AutoMapper用法 转载https://www.cnblogs.com/youring2/p/automapper.html

    AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...