《CSS世界》读书笔记(五) --height:100%
<!-- 《CSS世界》 张鑫旭著 -->
相对简单而单纯的height:auto
height:auto比width:auto简单的多,原因在于:
CSS默认流是水平方向的,宽度是稀缺的,高度是无限的。因此,宽度的分配规则比较复杂,高度就显得随意的多。
此外,height:auto也有外部尺寸特性。其可能只存在于绝对定位模型中,也就是“格式化高度”??。
关于height:100%
对于width属性,就算父元素width为auto,其百分比值也是支持的。但是,对于height属性,如果父元素height为auto,只要子元素在文档流中,其百分比值完全被忽略了。
为何父级没有具体高度值的时候,height:100%会失效?
从示例来说明:(详见:http://demo.cssworld.cn/3/2-10.php)
<div class="box">
<img src="1.png">
<span class="text">红色背景是父级</span>
</div>
.box{
display: inline-block;
white-space: nowrap;
background-color: red;
}
.text{
display: inline-block;
width: 100%;
background-color: blue;
}
先了解浏览器渲染的基本原理:
首先下载文档内容,加载头部的样式资源(如果有的话),然后按照从上而下、自外而内的顺讯渲染DOM内容。也就是会先渲染父元素,后渲染子元素。因此,当渲染到父元素的时候,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;当渲染到子元素的时候,父元素宽度已经固定,此时的width:100%就是已经固定好的父元素的宽度。
那为什么宽度支持,高度不支持呢?规范中给出了答案:如果包含块的高度没有显示指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto。也就是'auto'*100/100 = NaN。
但是如果包含块的宽度取决于该元素的宽度,那么产生的布局在CSS2.1中是未定义的,属于“未定义行为”,浏览器可以自己去发挥,根据作者的测试,布局效果在各个浏览器下是一致的。
如何让元素支持height:100%效果
有两种方法:
(1)设定显示高度值。
(2)使用绝对定位
div {
height: 100%;
position: absolute;
}
此时的height:100%就会有计算值,即使祖先元素的height计算值为auto也是如此。需要注意的是:绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的,区别在于绝对定位的宽高百分比计算是相对于第一个position不为static的祖先元素(或根元素)的padding box的,也就是说会把padding大小值计算在内,但是,非绝对定位元素是相对于content box计算的。
《CSS世界》读书笔记(五) --height:100%的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 《css世界》笔记之流、元素与基本尺寸
1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
- css揭秘读书笔记
currentColor属性让hr和段落相同的颜色: div { color: red; } hr { background: currentColor; /* 一定要设置高度*/ height: 0 ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- CSS Grid 读书笔记
基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...
- css进阶读书笔记
说明:努力在十一左右,最迟双11之前掌握所有css知识要点 一.摘自<写给大家看的CSS书(第2版)>(虽然书比较旧,09年版的,但对于我这种刚入门的小菜鸟 来说,能学到的还是挺多的) 1 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
随机推荐
- Oracle 行列转置
两种简单的行列转置 1.固定列数的行列转换如student subject grade--------- ---------- --------student1 语文 80st ...
- 【Zookeeper系列】Zookeeper简单介绍(转)
原文链接:https://www.cnblogs.com/sunddenly/p/4033574.html 一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技 ...
- Go学习笔记(五)Go命令工具
上篇Go学习笔记(四)Go自动化测试框架 1.go build 这个命令可以直接使用,也可以带上代码包或源码文件使用. 如果是直接使用,表示试图编译当前目录所对应的代码包,如果当前目录不是一个有效的代 ...
- python将字符串类型改成日期类型
将字符串类型的'2019-03-14'改成date类型,如下: import datetime b = datetime.date(*map(int,'2019-03-14'.split('-'))) ...
- 守护线程daemon
如下代码: from threading import Thread import time def func1(n): time.sleep(10) print(n) t = Thread(targ ...
- react Context
import React, { useState, useEffect, useContext } from "react"; import axios from "ax ...
- yarn-RM-check-by-curl
#!bin/bash SELF_DIR="$( cd "$( dirname "$0" )" && pwd )" #grep ...
- pytorch入门与实践-2.2
Tensor 1--本质上可以理解为具有不同维度的数组 2--支持的基本运算 |---创建Tensor: x=t.tensor(x,y) x,y 表示数组的大小 , x=t.rand(x,y), x ...
- vb中的除法
“\”:在Integer类型中,如果商带小数,则直接舍去小数部分,只保留整数部分.“/”:在Integer类型中,如果商带小数,则把小数部分以0.5为界限,小数部分大于0.5,则返回的整数部分+1:如 ...
- RGBA与Opacity
rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.