CSS百分比参照物整理

最新推荐文章于 2023-04-07 20:34:42 发布
最新推荐文章于 2023-04-07 20:34:42 发布
阅读量504 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21428081/article/details/93044975
版权

百分比的参照物
1.参照于包含块的高度：top、bottom、height
2.参照于包含块的宽度：left、right、width、margin（四个方向）、padding（四个方向）
3.参照于自身的尺寸：transform:translate(50%,30%);水平方向参照于自身的宽度，垂直方向参照于自身的高度
4.参照于背景区（background-origin指定）的尺寸：background-size 水平方向参照于自身的宽度，垂直方向参照于自身的高度
5.参照于(背景区-图片的位图像素值)：background-position

小木house
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS中的百分比
09-27
主要介绍了浅谈CSS中的百分比,在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢
CSS3:中的transfom转换及涉及translate：（30%， 50%）
sinat_20276727的博客
03-01 791
translate()函数是css3的新特性 translate值（50px，100px）是往左（x轴）移动50个像素，并往上（y轴）移动100像素。顺序是（left,top）:即（X,Y）值 translate值（10%，60%）是往左走自己盒子宽度的10%，往上走自己盒子高度的60%。（无论任何时候：包括旋转） rotate值（30deg）元素顺时针旋转30度。 perspective 作为transform一个属性值，一般设置给父元素，经过研究，范围一般设置在800-1000px最满足人的
transform属性
最新发布
weixin_54327001的博客
04-07 360
CSS transform属性允许对某一个元素进行某些形变, 包括等。注意事项，并非所有的盒子都可以进行transform的转换,t常见的函数transform function有： 平移：translate(x, y) 缩放：scale(x, y) 旋转：rotate(deg) 倾斜：skew(deg, deg)
css3 2D变换
平安喜乐
04-06 298
前提：二维坐标系如下图所示。
CSS Transform让百分比宽高布局元素水平垂直居中
sunlizhen的专栏
03-11 590
很早以前了解过当元素是固定宽度和高度的时候，水平垂直高居中的方法可以设置margin的负值来使其居中，这个负值是元素的宽和高的一半，比如宽高是100px，那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢？ 如果使用百分比来设置宽高的话，以前哪个负值方法已经用不上了，这个我们发现在一个小的窍门，就是使用CSS3中的tran...
css中涉及到的百分比
Kratial的博客
10-09 3143
css中涉及到的百分比
CSS百分比定义高度为什么没有效果
12-09
原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素...
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
热门推荐
PT - Blog
04-18 3万+
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
transform：translate(-50%，-50%)定位实现百分比居中
xiaoxiezZ的博客
05-07 8197
HTML代码<div id="translateTest"></div>CSS代码#translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; bac...
CSS 之 百分比（%）样式属性
weixin_45092437的博客
02-27 3336
​ 这篇博客主要是整理一下，CSS中所有可以使用 % 作为属性值的样式属性，并说明他们的基数取决于什么，有些样式属性的 % 取决于元素本身的属性，有些元素样式的 % 取决于其父元素的属性。整理的可能有遗漏，欢迎大家留言补充。 一、取决于父元素 1、height ​ 如果给子元素的height属性设置为 % ，则其基数取决于父元素的height属性。 2、width ​ 如果给子元素的width属性设置为 % ，则其基数取决于父元素的width属性。 3、padding ​ 如果给子元素的paddin
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1313
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
简单介绍CSS3中的transform的使用方法
前端小伙子的博客
05-27 5974
transform属性分为2D转换和3D转换
CSS百分比参照问题
qq_48113035的博客
03-04 289
一、参照父元素宽度的属性 下面例子共同的html和css <style> .box{ width: 400px; height: 200px; background-color: hotpink; /* 解决垂直方向外边距折叠 */ overflow: hidden; } .box1{ width:
当margin-top、padding-top的值是百分比时，分别是如何计算的？
M十九 的 博客
04-28 1449
CSS 百分比参照问题 参照父元素宽度的元素：padding margin width text-indent 参照父元素高度的元素：height 参照父元素属性:font-size line-height 特殊：相对定位的时候，top(bottom)， left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度 ...
css属性 百分比 参照
wyflzq的博客
07-31 451
/*top,height 百分比参照于包含块的高度*/ /*lefe,margin,padding,width 百分比参照于包含块的宽度*/ /*translate(-50%,-50%) 百分比参照于自身的宽高*/ /*background-position 百分比参照于（图片区域-图片的位图像素值）*/...
css用参照物定位住img标签
04-03
可以使用相对定位或绝对定位来定位img标签，需要指定参照物的位置。 相对定位： ```css .parent { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值