CSS中详解height属性
目录结构：
hight属性值类型一览表
| value | describtion |
| auto | 默认 |
| length | 绝对长度 |
| % | 相对长度 |
| inherit | 继承 |
这里笔者主要介绍相对长度的用法，关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息。
height的%值的使用
定义：
这个值是一个百分比，它是基于包含它的块级元素的百分比。
实例：
<!DOCTYPE html>
<html>
<head>
<title>height.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
div{
width:50%;
height:50%;
border:1px solid red;
}
body{
border:1px solid green;
display:block;
height:100px;
}
</style>
</head> <body>
<div>I am box with width 50% and height 50%</div>
</body>
</html>
读者可以在Chrome浏览器中按下“F12”,选择“element”查看，读者可很快发现<div>的高度恰好为父元素<body>的50%。
需要注意的
在上面的示例中，我们验证了height的相对值的用法。但是读者需要注意，如果父元素没定义hight，则子元素的hight用百分比就不起作用，此时的高度值就相当于auto值，除非用绝对值改变。这里hight没定义是指，根本没写height，与把height定义为0px不同。读者可试一试下面这段代码：
<body id="b" style="width:0px;height:0px;">
<br>
<div id="er" style="width:50%;height:50%;border:1px solid red;"></div>
然后再body的style属性去掉，再试一试。
<body id="b">
参考文章：
http://www.runoob.com/cssref/pr-dim-height.html
本博客为博主原创作品，如需转载请注明出处。
CSS中详解height属性的更多相关文章
- CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- css中的width,height，属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
- CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- 此博客使用的CSS样式详解！
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕 今天会逐行解析一下SparkStreaming运行的日志,运行的是WordCountO ...
随机推荐
- Win10系统80端口被系统进程占用
一.问题 有系统需要用到80端口,为了方便,但是发现80端口被占用,执行netstat -ano 发现80端口竟然被一个System process占用了,当然这个是不能被杀掉的 二.解决问题 在网上 ...
- LeetCode 292 Nim Game（Nim游戏）
翻译 你正在和你的朋友们玩以下这个Nim游戏:桌子上有一堆石头.每次你从中去掉1-3个.谁消除掉最后一个石头即为赢家.你在取出石头的第一轮. 你们中的每个人都有着聪明的头脑和绝佳的策略.写一个函数来确 ...
- ZooKeeper启动报错 JAVA_HOME is incorrectly set
解决办法:在zkEnv.cmd文件中直接写死调用的jdk路径 set JAVA_HOME="D:\Program Files\Java7\jdk1.7.0_51" if not e ...
- ScrollView嵌套ListView，ListView完全展开及makeMeasureSpec测量机制原理分析
在实际应用中,经常会碰到非常规的布局要求,比如说在ScrollView里嵌套ListView,ScrollView和ListView都是可以滚动的控件,这样布局看似很奇怪,但是有些效果又不得不这样做. ...
- WinForm程序开发
WinForm程序开发------------------------------主要页面----------------------------------BaseForm.cs 基类,用于派 ...
- python unittest case运行失败重试
因为使用unittest进行管理case的运行.有时case因为偶然因素,会随机的失败.通过重试机制能够补充保持case的稳定性.查阅资料后发现,python的unittest自身无失败重试机制,可以 ...
- kibana 显示 @timestamp 时间问题（utc or browser当前时间）自动转换显示
https://github.com/elasticsearch/kibana/issues/95
- python xlsxwriter写excel并操作各种格式属性
# -*- coding: utf-8 -*- import xlsxwriter workbook = xlsxwriter.Workbook('test.xlsx') worksheet = wo ...
- http 206请求
1.概要 在客户端表明自己只需要目标URL上的部分资源的时候返回的.这种情况经常发生在客户端继续请求一个未完成的下载的时候(通常是当客户端加载一个体积较大的嵌入文件,比如视屏或PDF文件). 通常在展 ...
- 6、redis之使用spring-data-redis的Template
POM: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o ...