CSS中详解hight属性
目录结构：
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中详解hight属性的更多相关文章
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- 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样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕 今天会逐行解析一下SparkStreaming运行的日志,运行的是WordCountO ...
- SQL 中详解round(),floor(),ceiling()函数的用法和区别？
SQL 中详解round(),floor(),ceiling()函数的用法和区别? 原创 2013年06月09日 14:00:21 摘自:http://blog.csdn.net/yueliang ...
- CSS中具有继承性的属性：
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
随机推荐
- Java final 关键词修饰类、方法、变量
1. final修饰类 被修饰的类不能被继承,也没有子类.假如随意创建这些类的子类,子类可能会错误的修改父类的实现细节.出于安全原因,类的实现细节不允许有任何改动.在创建对象模型的时候,确信这个类不 ...
- Java基础-多线程编程-1.随便选择两个城市作为预选旅游目标。实现两个独立的线程分别显示10次城市名，每次显示后休眠一段随机时间(1000ms以内)，哪个先显示完毕，就决定去哪个城市。分别用Runnable接口和Thread类实现。
1.随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread ...
- [转]关于typedef的用法总结
不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...
- 数据结构与算法JavaScript (三) 链表
我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...
- File类使用小结
一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...
- PHP精选数组函数
编程怎么能少的了数组呢,以下是学习PHP时常用的数组处理函数.在编程中要遵循一个原则就是DRY(Don`t Repeat Yourself)原则,PHP中有大量的函数,都记住这些函数不太现实,但常用的 ...
- Masonry 当需要把某个控件进行隐藏的时候有警告的解决方案
//查看全文 [self.moreBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo (self.conten ...
- iOS 如何自定义UISearchBar 中textField的高度
iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...
- 把《c++ primer》读薄（4-1 c和c++数组）
督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. c和c++的数组和指针都属于低级的复合数据类型,比如c++的数组,类似vector容器,指针类似迭代器.低级的数据类型优势是速度 ...
- hibernate笔记--cascade级联以及inverse属性
cascade : 不管是单向多对一还是一对多,或者是双向的一对多关系,在一的一端映射文件中有一个set标签,在多的一端有many-to-one标签,拿前几篇笔记里讲的Grade和Student举例, ...