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在继承百分比类属性时，是先继承原始百分比的声明，再根据此声明计算最后的样式。

转载于:https://www.cnblogs.com/p-l-u-m/p/11314254.html

css 百分比继承关系的探讨相关推荐

css案例学习之继承关系
代码 <html> <head><title>继承关系</title><style> body{color:blue; /* 颜色 */te ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
hibernate继承关系映射方法（三）--每个具体类一张表TPC
TPC:所谓是"每个具体类一张表(table per concrete class)"的意思是:使继承体系中每一个子类都对应数据库中的一张表.每一个子类对应的数据库表都包含了父类的 ...
hibernate继承关系映射关系方法（二）--每个子类一张表
TPS:所谓"每个子类一张表(Table Per Subclass)":父类一张表,每个子类一张表,父类的表保存公共有信息,子类的表只保存自己特有的信息这种策略是使用<jo ...
hibernate继承关系映射方法(一)--共享一张表
对于如下关系: Person.java package com.hust.PO;public class Person {private Integer id;private String name; ...
【JavaWeb】一文Servlet全解：继承关系、生命周期、容器和请求转发与重定向等
文章目录一.Servlet 概述二.Servlet HelloWorld 三.Servlet 继承关系四.Servlet 生命周期五.ServletConfig 和 ServletContex ...
python和selenium的关系_selenium之python源码解读-webdriver继承关系
一.webdriver继承关系在selenium中,无论是常用的Firefox Driver 还是Chrome Driver和Ie Drive,他们都继承至selenium\webdriver\re ...
java集合类继承关系图_java集合继承关系图
面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 数组虽然也可以存储对象,但长度是固定的:集合长度是可变的,数组中可以存储基 ...
Unity中的MonoBehaviour脚本-基础知识和继承关系
本文分享Unity中的MonoBehaviour脚本-基础知识和继承关系作为一个程序员, 在Unity中开发, 我们接触最多的对象之里一定有MonoBehaviour, 所以作为Unity基础知识学 ...
html 像素跟百分比,css 百分比跟px之间怎么换算？
px的特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是有大部分 ...

css 百分比继承关系的探讨

css 百分比继承关系的探讨相关推荐

最新文章

热门文章