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 ...

随机推荐

python安装locustio报错error: invalid command 'bdist_wheel'的解决方法
locust--scalable user load testing tool writen in Python(是用python写的.规模化.可扩展的测试性能的工具) 安装locustio需要的环境 ...
iOS --------Crash 分析（一）
iOS Crash 分析(文一)- 开始 1. 名词解释 1. UUID 一个字符串,在iOS上每个可执行文件或库文件都包含至少一个UUID.目的是为了唯一识别这个文件. 2. dwarfdump 苹 ...
bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
MVC5 网站开发实践 1、建立项目
目录 MVC5 网站开发实践概述一.建立项目 1.建立团队项目在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目. 如图打开vs2013→新建→团队项目(图1),会自动 ...
ASP.NET MVC下的四种验证编程方式[续篇]
在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...
AngularJS之代码风格36条建议【一】（九）
前言其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...
【读书笔记】XHTML与HTML5 的差异
最近在困惑html5和XHTML两者之间的具体区别,查看了百度.google和新浪等,他们首页的源码第一句都是 1 <!Doctype html> 这是HTML5的doctype声明,说明 ...
Lua 学习笔记（八）错误（error）
Lua所遇到的任何未预期条件都会引发一个错误.因此在发生错误时不能简单的崩溃或着退出,而是结束当前程序块并返回应用程序.当错误引发时进行恰当的处理是最合适的,然而这个阶段伴随着错误的捕获.错误的处理. ...
使用纯前端JavaScript 实现Excel IO
公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格 Excel导出,并 ...
TCP ，UDP概念和TCP三次握手连接的知识点总结
OSI 计算机网络7层模型 TCP/IP四层网络模型传输层提供应用间的逻辑通信(端到端),网络层提供的是主机到主机的通信,传输层提供的是可靠服务. TCP 中常说的握手指的是:连接的定义和连接的建立 ...

CSS中详解hight属性