100％在CSS中是什么意思？

我最常使用的CSS单位之一就是出色的％，每个属性的百分比使用的规则并不完全相同。

width/height

让我们从最基本，最直接的示例开始：width 和 height。

.self {position: absolute;height: 50%;width: 40%;
}

我们可以看到元素的 width 和 height 是分别基于父元素 width 和 height 的。

left/top

这些值也基于父元素的 width 和 height。如果元素的 left 值为 50%，则其左侧将位于其父元素的中间。

.self {position: absolute;height: 50%;width: 50%;margin-top: 0%;margin-left: 50%;
}

margin/padding

margin 的显示效果于上一个示例-它们基于其父对象的大小。

在这里注意的是，padding-left 不会改变元素本身的 width，除非该 padding-left 值大于元素本身的 width。

.self {position: absolute;height: 50%;width: 50%;padding-top: 0%;padding-left: 50%;
}

transform

这里 transform: translate 百分比值是基于元素本身 width 和 height。

.self {position: absolute;height: 50%;width: 50%;top: 0%;left: 50%;translate-top: 0%;translate-left: 50%;transform: translate(50%, 0%);
}

100％在CSS中是什么意思？相关推荐

解决css中height:100%失效的问题
解决css中height:100%失效的问题参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
CSS中100%和inherit(继承)的区别正常情况下没有区别兼容性 100% ie6+ inherit ie8+ 该元素绝对定位,父元素使用静态定位(static)或没有使用定位时 100%继 ...
css中background-size属性cover、contain、100%的含义案例详解
昨天学前端,看到 css中的background-size属性,忽然对cover.contain属性值有点蒙,具体到底什么显示效果有点糊涂. 看了菜鸟教程的解释,还是不太明白.于是自己做了一个案例来验 ...
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
html中透明度100是,CSS 透明度设置方法及常见问题解析
你对 CSS 中的半透明颜色可能已经有了基础的了解,CSS透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在 ...
css中float用法
文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列. 浮动属性是CSS中的定位属性,用法如下: float: 浮动方向(left.right.no ...
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
CSS中对字体进行设置
在对字体设置的时候,我们可以设置字体的字体系列,字体的样式,字体的大小,字体加粗,和字体转换.下面我们来一一的对字体的这些设置进行分析. 字体系列: 在CSS中有两种类型的字体系列: 通用的字体系列: ...