目录结构：
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 ...
随机推荐
-
React学习笔记-7-销毁阶段
销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...
-
LeetCode Paint House II
原题链接在这里:https://leetcode.com/problems/paint-house-ii/ 题目: There are a row of n houses, each house ca ...
-
远程调试 ASP.NET MVC 项目
Visual Studio 支持从一台计算机到另一台设备的远程调试.进行远程调试时,主机可以是任何支持 Visual Studio 的平台.远程设备可以是 x86.x64 或 ARM 平台. 本文将指 ...
-
paip.代码生成器数据源格式最佳实践
paip.代码生成器数据源格式最佳实践 需要满足几个条件. 1.基于文本 2.容易的编辑.. 3,容易的代码解析. 这样,常用的设计工具powerdesign cdm pdm就排除兰...cdm虽然是 ...
-
mysql中的存储过程和事务隔离
※存储过程存储过程是保存在数据库上的一段可执行代码.1.定义存储过程的语法是:Create procedure sp_name (参数..)Begin SQL语句End;2.调用它的方法:Call s ...
-
santoku学习笔记
帮助文档:https://santoku-linux.com/faqs The first time you log in your username and password are “Santok ...
-
web相关
1. html 和 htm 的区别 如果一个网站有index.html和index.htm 默认情况下优先访问.html htm是为了兼容之前dos系统的命名规范. 2. http1.0短连接 htt ...
-
与阿根廷一起学习Java Web四个发展：对于信息传输和信息传输
发送短信和通用身份验证和用户注册系统消息提示功能模块,但是实现代码过于复杂.使用JSPGen后,深深发送消息.SMS程序包使复杂的简单非常活跃. 在短信模块:支持两种模式,它们被发送到第三方.地方平台 ...
-
android列表停止滚动，加载图片，较为通用的一种办法
在Adapter的itemView里面,判断列表是否在滚动中,其实是比较麻烦的,可能耦合性会比较严重. 所以考虑了下,是否能在itemView里面,检测列表的滚动状态,并监听停止状态加载图片,实现it ...
-
Android学习笔记(10).布局管理器
布局管理器的几个类都是ViewGroup派生的,用于管理组件的分布和大小,使用布局管理器能够非常好地解决屏幕适配问题. 布局管理器本身也是一个UI组件,布局管理器能够相互嵌套使用,以下是布局管理器的类 ...