引入：近日在回顾css基础的时候发现了一个有趣的问题，就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算，还是继承父级根据百分比计算过后的绝对值。下面举一个简单的例子来描述这一个问题，如下代码，两个段落最后会缩进多少距离呢？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent {

            width: 1000px;

            background: #ccc;

        }

        .textParent {

            width: 800px;

            text-indent: 10%;

        }

        .textParent2 {

            width: 800px;

        }

    </style>

</head>

<body>

    <div class="parent">

        以下段落继承了'textParent'的'text-indent'，实际缩进为800px * 10% = 80px:

        <div class="textParent">

            <p>这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字</p>

        </div>

    </div>

    <div class="parent">

        以下段落的'text-indent'来自p标签自身，实际缩进为800px * 10% = 80px:

        <div class="textParent2">

            <p style="text-indent: 10%;">这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字</p>

        </div>

    </div>

</body>

</html>

分析： 如果是继承百分比后再根据父级宽高计算，那么第一个段落应该最后缩进：800px * 10% = 80px; 如果是继承父级根据百分比计算过后的绝对值，那么第一个段落应该最后缩进： 1000px * 10% = 100px; 由于第二个段落不存在继承，所以缩进是固定的 800px * 10% = 80px，所以我们以第二个段落作为标准就可以看到css在继承百分比属性时是采取上述何种方式了

　　　结果： 打开浏览器可以看到上图的运行结果，说明css在继承百分比类属性时，是先继承原始百分比的声明，再根据此声明计算最后的样式。

css 百分比继承关系的探讨的更多相关文章

  1. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  2. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  3. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  4. css的继承之width属性（容易忽略）

    众所周知,css的三大特性分别是 继承性,层叠性,和优先级. 那么这里就详细说一下css中width的继承性及其特殊情况. 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元 ...

  5. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  6. Dom中的继承关系

    首先声明,一些内容基于个人猜测,如果哪里有错误,请立即联系在下! 我们用js操作Dom时,会经常用到一些个方法比如基于获取到的元素选择其子元素: <!DOCTYPE html> <h ...

  7. [原创]java WEB学习笔记87：Hibernate学习之路-- -映射 继承关系(subclass , joined-subclass,union-subclass )

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. Entity Framework Code First 映射继承关系

    转载 http://www.th7.cn/Program/net/201301/122153.shtml Code First如何处理类之间的继承关系.Entity Framework Code Fi ...

  9. CSS的继承和使用方式

    CSS的继承 css的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质. 在Css中有些属性不允许继承,例如,border属性没有继承性.多边框类的属性都没有继承 ,例如, ...

随机推荐

  1. Mac 电脑如何卸载 node

    因为刚入手「 Mac 」很多淫技还不懂,在一次使用 npm install 的时候安装出错,提示为 npm 与 node 的版本有问题,所以就想着卸载重新装一个版本. 但是因为刚使用「 Mac 」所以 ...

  2. 【水滴石穿】douban-movies-react-native

    这个项目的话,倒是可以做一个支架页面,就是你需要什么东西,你就可以在里面加,不过也是比较难的地方 就是数据流,数据处理的部分.react可以处理数据的方式很多,没有见过类似于古老的vue时候可以使用的 ...

  3. NFS实现（双httpd + php-fpm + nfs + mysql 搭建discuz论坛）的方法

    NFS相关介绍 一.NFS简介 1. NFS(Network File System):NFS是一个文件共享协议, 也是是在类Unix系统中在内核中实现的文件系统. 2. 起源:最早是由SUN公司研发 ...

  4. LDAP Authentication Handler

    Including the Handler In the pom.xml file for your CAS Maven2 WAR Overlay, add the following depende ...

  5. golang进制

  6. No PostCSS Config found解决办法

    npm install报错 Module build failed: Error: No PostCSS Config found 解决办法是同级package.json文件新建postcss.con ...

  7. ANSI编码方式转化为UTF-8方式

    说明: 记事本txt有四种编码方式,分别为:UTF-8.ANSI.Unicode和Unicode big endian,当进行写操作,创建的txt编码格式,与写入汉字的编码方式相同:如果写入的汉字是不 ...

  8. 用Sketch和PaintCode快速得到绘制代码

    http://www.cocoachina.com/ios/20150901/13155.html 作者:codeGlider 授权本站转载. 在我的上一篇文章中 swift10分钟实现炫酷的导航控制 ...

  9. java 操作Oracle 批量入库的问题

    java 操作Oracle 批量入库的问题 先说下我运行的环境: Windows7 64位操作系统 (四核)Intel i5-2300 CPU @2.80GHz 内存4G 硬盘1T Jdk1.6+My ...

  10. SDUT-3362_村村通公路

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 当前农村公路建设正如火如荼的展开,某乡 ...