css 百分比继承关系的探讨
引入：近日在回顾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 百分比继承关系的探讨的更多相关文章
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- CSS3学习笔记-1：CSS样式继承
自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- css的继承之width属性（容易忽略）
众所周知,css的三大特性分别是 继承性,层叠性,和优先级. 那么这里就详细说一下css中width的继承性及其特殊情况. 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元 ...
- CSS系列：CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- Dom中的继承关系
首先声明,一些内容基于个人猜测,如果哪里有错误,请立即联系在下! 我们用js操作Dom时,会经常用到一些个方法比如基于获取到的元素选择其子元素: <!DOCTYPE html> <h ...
- [原创]java WEB学习笔记87：Hibernate学习之路-- -映射 继承关系(subclass , joined-subclass,union-subclass )
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- Entity Framework Code First 映射继承关系
转载 http://www.th7.cn/Program/net/201301/122153.shtml Code First如何处理类之间的继承关系.Entity Framework Code Fi ...
- CSS的继承和使用方式
CSS的继承 css的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质. 在Css中有些属性不允许继承,例如,border属性没有继承性.多边框类的属性都没有继承 ,例如, ...
随机推荐
- Redis、MPP、kafka 、MongDB简介
Redis :间值数据库,适合缓存用户Session会话与经常需要查的数据1.Redis集群,为什么在项目中使用集群 1.持久化,持久化是最简单的高可用方法(有时甚至不被归为高可用的手段),主要左右 ...
- 2019-3-13-win10-uwp-使用-ScaleTransform-放大某个元素
title author date CreateTime categories win10 uwp 使用 ScaleTransform 放大某个元素 lindexi 2019-3-13 19:5:56 ...
- [linux]vmware中linux虚拟机扩容 标签： vmware虚拟机linux 2016-09-05 08:03 315人阅读 评
扩容原因 现阶段,虚拟机的标配都是1G内存和20G硬盘,大部分时候是够用的,但是也会出现虚拟机里面东西放多了硬盘不够用的情况,这种情况下,除了清理垃圾,另外就只能给虚拟机扩容了.因为window扩容相 ...
- maven 从svn导入项目遇到的问题 No marketplace entries found to handle yuicompressor maven plugin:1.3.0:compile
版权声明:本文为博主原创文章,未经博主同意不得转载.安金龙 的博客. https://blog.csdn.net/smile0198/article/details/25463825 RT.使用ecl ...
- 2019-8-31-dotnet-使用-lz4net-压缩-Stream-或文件
title author date CreateTime categories dotnet 使用 lz4net 压缩 Stream 或文件 lindexi 2019-08-31 16:55:58 + ...
- EF ObjectStateManager无法跟踪具有相同键的多个对象 标签： EasyUIc# 2015-09-05 11:01 1181人阅读
最近做一个项目,因为是重构,好多代码是搬过来的,但是因为框架不同,所以搬过来也出现了很多问题,前几天在调试的时候,就碰到一个EF框架经常出现的问题:ObjectStateManager中已存在具有同一 ...
- 模板—扩展GCD*2
有必要重新学一下扩展GCD emmmm. 主要是扩展GCD求解线性同余方程$ax≡b (mod p)$. 1.方程有解的充分必要条件:b%gcd(a,p)=0. 证明: $ax-py=b$ 由于求解整 ...
- python 自动识别黄图
from watchdog.observers import Observerfrom watchdog.events import *import timeimport sysimport osim ...
- Python中进制转换函数的使用
Python中进制转换函数的使用 关于Python中几个进制转换的函数使用方法,做一个简单的使用方法的介绍,我们常用的进制转换函数常用的就是int()(其他进制转换到十进制).bin()(十进制转换到 ...
- hdu 4629 Burning （扫描线）
Problem - 4629 以前写过PSLG模拟的版本,今天写了一下扫描线做这题. 其实这题可以用set存线段来做,类似于判断直线交的做法.不过实现起来有点麻烦,于是我就直接暴力求交点了. 代码如下 ...