资讯专栏INFORMATION COLUMN

css百分比问题——`top`、`left`、'translate'的百分比参照谁?

wall2flower / 2972人阅读

摘要:比如属性的方法他们的百分比都是相较谁而言的比如属性的方法,他们的百分比都是相较谁而言的是基于父元素的的参数坐标和坐标位置参数,如果是百分比会以本身的长宽做参考如果是百分比,会以本身的长宽做参考的时候的时候把设置成的时候的左

比如 toplefttransform属性的translate方法,他们的百分比都是相较谁而言的?

topleft是基于父元素的:

.parent {
    position: relative;
    background-color: rgb(243, 225, 225);
    height: 100px;
    width: 240px;
}

.child {
    text-align: center;
    width: 100px;
    background-color: cornflowerblue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

translate的参数:left(x 坐标) 和 top(y 坐标) 位置参数 ,

如果是百分比,会以本身的长宽做参考

top:0; left:0的时候:

left设置成 50% 的时候,div.child的左、上距离就是div.parent的宽度的一半;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2175.html

相关文章

  • css魔幻属性跟进篇

    摘要:中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么,可以理解为内联元素没有盒模型,其高度由内容决定。 白话:即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后,这是自己写的第四篇CSS相关的文章,文章绝大部分是自己工作总结得来,另一部分是平日sf回答的与面试中向面试官交流学到的,都是一...

    oogh 评论0 收藏0
  • 关于CSS知识

    摘要:高度默认是没有的,但是可以设置。居中设置上下间隔是水平居中。可以根据需求单独的设置上下左右的外边距。此属性是用来声明元素的显示级别的。利用定位可以写出关于任何网页界面的简单分块,利用之前学习的相关知识可以实现部分功能。这两天在学习关于HTML的知识,今天学习到CSS的知识,将自己所收获的知识点归纳一下: 首先,   CSS声明学习:                 1、在head标签中使用s...

    ysl_unh 评论0 收藏0
  • 页面制作HTML+CSS基础乱炖

    摘要:标签大集合语义化标签页面内锚点我跳跳到这里来可用于回到顶部功能。表格中表示行,和表示列。当超出时会自动换行。属性清除浮动通用方案实际上是添加了一个看不见的点号。 1. 里的 一定要放在第一行 ,如果放在了下面可能会有问题。 2.标签大集合 showImg(https://segmentfault.com/img/bVMaUw?w=1366&h=767); 3.HTML5语义化标签...

    ruicbAndroid 评论0 收藏0
  • 页面制作HTML+CSS基础乱炖

    摘要:标签大集合语义化标签页面内锚点我跳跳到这里来可用于回到顶部功能。表格中表示行,和表示列。当超出时会自动换行。属性清除浮动通用方案实际上是添加了一个看不见的点号。 1. 里的 一定要放在第一行 ,如果放在了下面可能会有问题。 2.标签大集合 showImg(https://segmentfault.com/img/bVMaUw?w=1366&h=767); 3.HTML5语义化标签...

    ityouknow 评论0 收藏0
  • 手把手教你打造一个纯CSS图标库

    摘要:方案由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到,一堆图标的雪碧图,修改维护会相当麻烦现在比较好的方案是使用引入图片,小图直接转换成插入中。 来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?...

    ad6623 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<