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的 ...
随机推荐
- 数据中台核心方法论--OneModel为何需要产品化支撑?
什么是产品化 大部分创业公司都是从一个伟大的想法创意开始的,并且需要有一堆技术专家来实现.我们清楚,伟大的技术并不等同于和伟大的产品,技术可以解决问题,但如果它没有办法法规模化,那这些技术或者能力对用 ...
- 用 GetEnvironmentVariable 获取常用系统环境变量
以前曾用 GetWindowsDirectory.GetSystemDirectory.GetTempPath 等函数获取系统常用文件夹; 也用过 SHGetSpecialFolderLocation ...
- css 导航菜单+下拉菜单
一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- hdu6578 2019湖南省赛D题Modulo Nine 经典dp
目录 题目 解析 AC_Code @ 题目 第一题题意是一共有{0,1,2,3}四种数字供选择,问有多少个长度为n的序列满足所有m个条件,每个条件是说区间[L,R]内必须有恰好x个不同的数字. 第二题 ...
- Emgucv图像处理工具
此工具是当年自己在学习Emgucv的时候,慢慢积累的,包含了常用的图像处理算法,非常适合新人学习,现放出源码,由于是以前做的,功能不全. 当时Emgucv的学习资料非常之少,没有一本书是讲Emgucv ...
- OpenResty 技术图谱skill-map
# OpenResty 技术图谱## basic concepts- HTTP- RESTful API & API GateWay- Microservice- Domain Specifi ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- ORACLE切非归档模式:
C:\Documents and Settings\Administrator>sqlplus /nologSQL> conn / as sysdbaConnected to an idl ...
- 查看mysql慢日志,进行优化
MySQL 慢查询的相关参数解释:slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭. slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭. lo ...
- 接口调用post请求参数在body中
package com.ynhrm.common.utils; import com.alibaba.fastjson.JSONObject; import lombok.Data; import o ...