CSS 中可以使用%来给定指定元素的大小，也就是高度、宽度、margin，padding 等等，但是相信很多人都对百分比表示法的具体含义并不清楚，那么不懂就练，毕竟是检验真理的唯一标准（考研党举个手我看看...）。

练习：

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

    <style>

        .div_1 {

            background-color: orange;

            height: 300px;

            width: 400px;

            text-align: center;

        }

        .div_2 {

            background-color: purple;

            width:100%;

               height:50%;

        }

    </style>

</head>

<body>

    <div class="div_1">

        <div class="div_2">

        </div>

    </div>

</body>

</html>

　　一般来说，很多人认为百分比表示法是针对当前元素的父元素来定义的，如上例，在父元素没有padding的情况下，高度为300px，而子元素的高度设置为 50% ，此时子元素高度为150px，如下图所示：

　　

　　那么，加入 padding 之后的情况又会如何？

练习：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

    <style>

        .div_1 {

            background-color: orange;

            height: 300px;

            width: 400px;

            text-align: center;

            padding:100px 0;

        }

        .div_2 {

            background-color: purple;

            width:100%;

               height:50%;

        }

    </style>

</head>

<body>

    <div class="div_1">

        <div class="div_2">

        </div>

    </div>

</body>

</html>

　　我们分别将父元素的上下padding设置为100px，原来父元素高度为300px，所以此时父元素内容的高度只有100px，而子元素的高度为50px，如图所示：

　　这说明，百分比表示法所表示的仅仅是父元素“内容”的百分比，不包括padding。

　　

CSS 中的高度百分比的更多相关文章

  1. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  2. CSS中的高度

    https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight Element.clientHeight是只读属性,以像素为 ...

  3. css中，设置百分比后，让百分比的宽度包括padding和border来计算

    *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

  4. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

  5. css中的行高line-height

    “行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字 ...

  6. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  7. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  8. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  9. css中如何实现左边的高度随着右边改变而改变

    css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...

随机推荐

  1. POJ 3264 Balanced Lineup 线段树RMQ

    http://poj.org/problem?id=3264 题目大意: 给定N个数,还有Q个询问,求每个询问中给定的区间[a,b]中最大值和最小值之差. 思路: 依旧是线段树水题~ #include ...

  2. Linux 命令笔记（1）

    [root@Oracle11_2 ~]# ll total -rw-------. root root May : anaconda-ks.cfg drwxr-xr-x. root root May ...

  3. 【MemSQL Start[c]UP 3.0 - Round 1 A】 Declined Finalists

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] max(最大值-25,0) [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> ...

  4. C#利用反射机制，获取实例的属性和属性值

    C#利用反射,遍历获得一个类的所有属性名,以及该类的实例的所有属性的值 对应某个类的实例化的对象tc, 遍历获取所有属性(子成员)的方法(采用反射): Type t = tc.GetType();// ...

  5. 过滤input框中的特殊字符

    两种方式,我觉得是一样的效果,请看: var charFilter1 = function(str) { var pattern = new RegExp("[`~!@#$^&*() ...

  6. 2、应用程序及驱动-poll和select使用说明

    1.poll机制(如果中断机制出问题了,poll机制是对中断机制的补充,比如等一个小孩,如果小孩生病了,因此隔一段时间应该去找他) poll机制就是给定一段时间,在这一段时间内程序处于睡眠状态一直等待 ...

  7. PHP的工作原理和生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013778883/article/details/79831035   php是一门适用于web开 ...

  8. 【习题 3-2 UVA - 1586】Molar mass

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. 主要是找那个数字. [代码] #include <bits/stdc++.h> using namespace ...

  9. Java与模式：装饰(Decorator)模式

    装饰模式使用被装饰类的一个子类的实例.把client的调用委派到被装饰类,装饰模式的关键在于这样的扩展是全然透明的.   装饰模式在Java种使用也非常广泛,比方我们在又一次定义button.对话框等 ...

  10. linux 查看 *.a *.so 符号表(zt)

    objdump -tT libName.so | grep symbel symbolName nm -D libName.so | grep symbel symbolName 很多非常熟悉wind ...