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的 ...
随机推荐
- 07-图5 Saving James Bond - Hard Version(30 分)
This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...
- nucleus学习
task的TCB结构: typedef struct TC_TCB_STRUCT { /* Standard thread information first. This information is ...
- 2019ccpc秦皇岛/Gym102361 I - Invoker dp
题意: 连续3个特定的按键(在这3个中不要求顺序)能使出某个技能,使出不同技能所需要的按键可以重叠,给你一个技能序列,问你最少花费多少次按键能按顺序使出这些招数. 题解: dp,dp[i][j]代表使 ...
- 2018 ICPC Asia Singapore Regional A. Largest Triangle (计算几何)
题目链接:Kattis - largesttriangle Description Given \(N\) points on a \(2\)-dimensional space, determine ...
- css点击高亮
.btn-default:active:focus, .btn-default:active:hover { color: #333; background-color:lightseagreen; ...
- SSO 实现博客系统的单点登录
https://blog.csdn.net/qq1350048638/article/details/78933375 https://blog.csdn.net/yejingtao703/artic ...
- Eureka 系列(08)心跳续约与自动过期
Eureka 系列(08)心跳续约与自动过期 [TOC] Spring Cloud 系列目录 - Eureka 篇 在上一篇 Eureka 系列(07)服务注册与主动下线 中对服务的注册与下线进行了分 ...
- Eureka 系列(04)客户端源码分析
Eureka 系列(04)客户端源码分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 在上一篇 Eureka 系列(01)最简使用姿态 中对 Eureka 的简单用法做 ...
- arcpy-字段唯一值、重复值、最值、平均值、方差、标准差、中数、众数
插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 im ...
- go build报错cannot find package
go env 关键数据是这样的 GOPATH="/home/zzy/goProject" GOROOT="/usr/local/go" 项目目录是这样的 goP ...