1、属性百分比的基准点

1.1、基于包含块

以下的关于包含块(含块)的概念,不能简单地理解成是父元素。

如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 不是static的父元素,比如为absolute,relative,或者 fixed 的父元素。而对于固定定位的元素,它的包含块是视口(viewport)。

1.1.1、基于包含块的宽度(width,min-width,max-width,margin,padding,left,right,text-indent)

百分比是基于包含块的宽度的属性:width,min-width,max-width,margin,padding,left,right,text-indent

1.1.2、基于包含块的高度(height,max-height,min-height,top,bottom)

百分比是基于包含块的高度的属性:height,max-height,min-height,top,bottom

1.2、基于元素的字体大小(line-height )

line-height 的百分比基于该元素本身的字体大小

1.3、基于元素的行高(vertical-align)

vertical-align 的百分比基于元素的行高 line-height

(vertical-align 主要是设置行内元素的属性,该属性值设置行内元素相对于该元素所在的基线的垂直对齐位置。如果该行内元素是表格的单元格的话,该属性设置的是单元格内的内容的垂直方向的对齐位置)

1.4、font-size 的百分比

字体大小font-size 中的百分比是基于该元素所继承的字体大小的,也就是父元素的字体大小。

参考:https://blog.csdn.net/qq_41459038/article/details/81698551

CSS中属性百分比的基准点的更多相关文章

  1. css中属性值继承小解

    继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...

  2. 浅谈CSS中的百分比

    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...

  3. CSS中属性的详细运用(新手必看)

    =不同的浏览器有不同的默认字体大小font-size 这里以谷歌浏览器为准字体大小为10px   (其他浏览器是12px) 1.这里强调一个备注:属性继承 a 是特殊的,要改变a里面的颜色,必须在它后 ...

  4. CSS中属性position位置详解功能讲解与实例分析

    position有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页制作时,没有指定 ...

  5. CSS中各种百分比(%)

    1.固定定位  position:absolute;width:100%;height:100%: 中%相对的   都是浏览器的可视窗口宽高. 2.标准文档流中,标签的 % 单位除了height以外, ...

  6. CSS中的百分比(%)如何使用???

    除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度 在默认的content-box盒模型下元素的width ...

  7. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  8. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  9. css中的一些属性解析

    1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解 ...

随机推荐

  1. uni-app-在开启小程序在微信开发工具打开时,打开失败,解决方法:手动打开

    这是我自学ui-app的第一张记录内容,问题都是我在实际开发中遇到的问题 1.微信开发工具打开失败,提示是: 接着我的流程就是打开上面提到的链接,进入页面:https://developers.wei ...

  2. python_001

    一.python开发1.python基础 -基础 -基本数据类型 -函数 -面向对象2.网络编程3.web框架 -用于写网站4.设计模式 + 算法

  3. 【ABAP系列】SAP MB5B中FI凭证摘要是激活的/结果可能不正确 的错误

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP MB5B中FI凭证摘要是 ...

  4. Mac015--在Mac下安装使用Vagrant

    网址:http://yansu.org/2014/04/10/install-vagrant-in-mac.html 一.安装Vagrant 下载地址在http://www.vagrantup.com ...

  5. Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式

    在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值. 接下来就说一下,当seesionSt ...

  6. .net日志的用法

    public class Logs { private static Logger logger = LogManager.GetCurrentClassLogger(); //初始化日志类 /// ...

  7. go工具链

    1 编辑器 goland 2 GOPATH GOPATH是go的一个环境变量,它以绝对路径提供go的工作目录. go工程的源码存放在${GOPATH}/src目录下,go编译过程中生成的中间文件存放在 ...

  8. C# DataSet转JSON

    经常会遇到系统数据交互采用JSON数据格式进行交互的,避免不必要的重复工作,记录下自己的处理方式. 获取数据集之后,通过函数对数据集信息进行整理通过.Net Framework3.5提出的JavaSc ...

  9. Python学习-第一天-函数和模块的使用

    目录 Python学习-第一天总结 print输出的一种简单格式 函数参数之可变参数 模块管理函数 if else语句的单行实现(简洁) 变量作用域 函数书写格式 Python学习-第一天总结 pri ...

  10. Linux内核模块(Module)初解

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...