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的 ...
随机推荐
- CSS分组和嵌套选择器
CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 { color:green; } h2 { color:green; } p { ...
- centos7 安装PHP5.3 报错undefined reference to symbol '__gxx_personality_v0@@CXXABI_1.3'
系统:centos 7 原有PHP版本:5.6.27,5.4.45 试着安装nginx+多php版本,首先安装了5.6和5.4的版本,一帆风顺,但是在安装5.3.29版本时,出现问题了,configu ...
- echarts绘制饼图时的一点特殊设置
最后的效果如图,需要在中间展示的部分换行然后字体大小不同. 以下为option的设置,使用rich里面的参数来设置更多的文本样式,使用‘\n’来控制换行 let option = { color: c ...
- JSP 取list的长度
引入:<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> L ...
- 75、python学习第一篇
1.sys包下边的argv方法,从控制台获取数据 ''' Created on 2017年4月8日 @author: weizhen ''' import sys One = [" * &q ...
- main()和代码块
main方法 * main()方法的使用说明 * main方法是程序的主入口(一个主程序 先从main开始进行执行) * * * main方法也可以是一个普通的静态方法 代码块 代码块也是类的成员变量 ...
- intellij IDEA2016如何打可执行的jar包
尊重版权,原文地址:https://blog.csdn.net/liufeilong_sean/article/details/75254875 操作步骤: 1.在File -> project ...
- inline-block 导致元素下沉 解决方法添加vertical-align:middle属性
<div class="layui-input-block"> <input name="username" lay-verify=" ...
- 力扣算法——140WordBreakII【H】
Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, add space ...
- 【题解】Ride to Office
题目描述 起点与终点相隔4500米.现Charley 需要从起点骑车到终点.但是,他有个习惯,沿途需要有人陪伴,即以相同的速度, 与另外一个人一起骑.而当他遇到以更快的速度骑车的人时,他会以相应的速度 ...