【CSS】- 尺寸的百分比

于 2022-11-17 20:13:20 发布
阅读量177 收藏
点赞数
分类专栏： CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanan__/article/details/127910581
版权

1.百分比
百分比是一个相对单位，其相对于元素的参考系，绝大部分可以书写尺寸的地方，都可以书写百分比。

2.常见的百分比情况

css属性百分比相对于
width参考系的宽度
height参考系的高度
padding参考系的宽度
border参考系的宽度
margin参考系的宽度

3.元素的参考系

  • 普通元素，浮动元素，相对定位元素的参考系为父元素的内容区域
  • 绝对定位元素的参考系为距离自己最近的开启了定位的祖先元素的padding+内容区域
  • 固定定位的元素参考系为窗口的内容区域
WHOVENLY
关注
专栏目录
前端开源库-postcss-px-to-viewport
08-29
其中，`postcss-px-to-viewport` 是一个非常实用的前端开源工具，它允许我们将传统的像素单位（px）自动转换为基于视口的单位（vw、vh、vmin、vmax），以适应各种屏幕尺寸，从而实现更加灵活的布局。 首先，我们...
react-native-css-modules：使用CSS，PostCSS，Sass，Less或Stylus样式化React Native组件
02-04
在React Native中，通过`react-native-css-modules`，开发者可以使用CSS变量来统一管理颜色、尺寸等样式属性，提高代码的灵活性和可维护性。 **视口单位（Viewport Units）** 视口单位如vw（视口宽度的百分比）、vh...
css百分比定位和百分比尺寸
qq_26879821的博客
08-12 860
百分比尺寸 子元素没有设置定位或定位为relative，则是百分比尺寸是相对于其父元素 子元素设置了绝对定位，则百分比尺寸是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 百分比定位： 只有设置了定位的（relative,absolute,fixed）的元素才有left,top等属性。 子元素relative定位：百分比定位和百分比尺寸都是相对于父元素，无论父元素有没有定位 子元素absolute定位：百分比定位和百分比尺寸都是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 总结 可以按照有
html长度像素值和百分比,CSS 长度
weixin_30744613的博客
06-03 413
CSS 长度许多CSS属性要求您指定长度，例如width属性，font-size属性。以下代码在属性中设置测量单位HTML>p{background:grey;color:white;width:5cm;font-size:20pt;}thisisatest.要指定长度，请将数字和单元标识符连接在一起。在上面的代码中，width属性为5cm。 字体大小为20pt。CSS定义...
CSS中的那些百分比
youhebuke225的博客
02-27 874
文章目录宽高定位translate https://www.runoob.com/w3cnote/css-percentage-calculation.html 宽高 定位 translate 在translate中使用的百分比，他是根据元素自身的大小来进行计算的 <html lang="en"> <head> <title>Document</title> <style> body{
CSS第二章：1.长度单位：像素、百分比、em、rem
要思考，要努力
04-27 345
总览1.像素：固定值2.百分比：可以根据父元素的大小进行改变一、长度单位：像素1.屏幕是由一个个像素构成的，我们设置的像素效果，在不同分辨率的屏幕下显示效果并不一样 2.HTML代码： 3.CSS代码： 4.显示效果： 二、长度单位：百分比 1.子元素设置了百分比的长度和宽度，这个百分比是按照 父元素的 长度和宽度 来确定的。 如果父元素缩小，那么子元素也可以进行缩小，始终和父元素保持一定的百分比。如果是像素就做不到这一点。 2.HTML代码： 3.CSS代码： 4.显示效果： ...
css中涉及到的百分比
Kratial的博客
10-09 3279
css中涉及到的百分比
前端开源库-postcss-px-to-viewport.zip
10-05
视口单位是一种相对单位，vw代表视口宽度的百分比，vh代表视口高度的百分比。这样的转换对于创建响应式网站至关重要，因为它确保元素的大小会根据用户设备的视口大小动态调整，从而提供更好的移动端体验。 **响应式...
CSS-高度css-height.docx
03-11
这个值可以是具体的数值，如像素（px）、百分比（%）、相对单位（em）或其他CSS长度单位。 ### 常见单位 1. **像素（px）**：这是最常用的单位，一个像素代表显示器上最小的独立显示单元。例如，`height: 20px;`将...
前端开源库-postcss-viewport-units
08-29
PostCSS是一个用于转换CSS的工具，它允许开发者通过自定义插件扩展CSS语法，增强CSS的功能。 在使用`postcss-viewport-units`时，首先需要安装这个库，通常可以通过npm（Node.js包管理器）进行安装： ```bash npm ...
CSS-长度单位【px像素】【%百分比】【em】的区别？
海天与晨钟
11-13 1034
像素px 像素是我们在网页中使用的最多的一个单位， 一个像素就相当于我们屏幕中的一个小点， 我们的屏幕实际上就是这些像素点构成的， 但是这些像素点，是不能直接看见的。 不同显示器一个像素的大小也不相同， 显示效果越好越清晰，像素越小，反之像素越大。 百分比% 也可以将单位设置为一个百分比的形式， 这样浏览器将会根据其父元素的样式来计算该值 使用百分比的好处是， 当父元素的属性...
CSS的百分比，你知道多少？
C860_zy的专栏
04-18 2919
响应式布局设计最近红得一塌糊涂。不
css中用到百分比的属性
Jiang
08-15 3442
标签： CSS的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下W3C的CSS2.1标准，在此整理下： 百分比单位 乘以包含块的宽度margin，padding，left，right，text-indent，width，max-width，min-width 乘以包含块的高度top，bottom，height，max-height，min-height 关于包...
常见的布局技巧
qq_46636351的博客
04-05 30
1.边框紧靠变粗，用margin负值，让第二个框压上去 2.鼠标经过边框变色，因为之前压住了，所以有的边框只能显示三边 有两种解决方案 总结 3.利用浮动压不住文字 4.行内块元素的巧妙运用，给父亲设置text-align：center 里面的元素自动居中对齐 5.强化三角 把上宽拉高，只有右边保留颜色，得到一个蓝色这样的直角三角形 6.CSS初始化 6.居中·布局 常见布局方法总结-居中布局_weixin_33862041的博客-CSDN博客 .
css-背景图设置大小单位可以是百分比，或者px
幸福有多远
04-04 2436
前言：之前只用了background-size的百分比单位，用px单位不会失真，看项目具体情况了css .box { width: 300px; height: 300px; border: 1px solid #ddd; } .imgbox { width: 100%; height: 100...
CSS中的百分比(%)到底是谁的百分比？
热门推荐
feng
09-22 2万+
在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢？1、有人说是相对于父元素的百分比，但是这么说有时候却会出问题
CSS百分比单位总结
izwell的博客
09-07 2082
CSS中的很多地方都是可以使用百分比单位的，之前一直理所当然的认为百分比就是相对于容器的宽高设定的，后来在自己实现垂直居中的多种写法时，才意识到这个问题，遂收集资料进行整理。 相对于容器的宽度的 相对于content-box宽度 width | max-width | min-width | margin | padding | grid-template-columns ...
关于css中百分比的问题
m0_47531829的博客
05-22 429
还记得去年秋招的时候，我遇到一个及其刁蛮的面试官，各种装×，本来不想面了，到最后问了我一个css中的百分比问题，让我说一下定位，移动(transform/tranlate)，以及margin中的百分比都是相对于谁的，定位和移动我知道，但是margin却没使用过百分比，很少使用吧。于是，我直接傻傻的回答了margin没有百分比。后来我也没怎么review这段面试，但是这段面试却让我非常印象深刻，秋招面了这么多公司，见了这么多面试官，就这一个令我非常非常无语。不过话说，我在今天根据b站up主----极梦小屋的视
纯Css实现Div高度根据自适应宽度（百分比）调整
weixin_30487201的博客
03-03 5246
在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。 要实现...
vue2使用postcss-px-to-viewport
最新发布
09-03
`postcss-px-to-viewport` 插件允许你在 CSS 中使用相对单位如 `vw` 和 `vh`，并将像素值（px）自动转换为视口宽度和高度的百分比，这样可以使得布局更适应不同屏幕尺寸。 在 Vue 项目中集成这个插件的一般步骤如下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值