【CSS】- 尺寸的百分比

WHOVENLY

于 2022-11-17 20:13:20 发布

阅读量208

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/huanan__/article/details/127910581

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

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

2.常见的百分比情况

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

3.元素的参考系

普通元素，浮动元素，相对定位元素的参考系为父元素的内容区域
绝对定位元素的参考系为距离自己最近的开启了定位的祖先元素的padding+内容区域
固定定位的元素参考系为窗口的内容区域

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WHOVENLY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端开源库-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

905

百分比尺寸子元素没有设置定位或定位为relative，则是百分比尺寸是相对于其父元素子元素设置了绝对定位，则百分比尺寸是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 百分比定位：只有设置了定位的（relative,absolute,fixed）的元素才有left,top等属性。子元素relative定位：百分比定位和百分比尺寸都是相对于父元素，无论父元素有没有定位子元素absolute定位：百分比定位和百分比尺寸都是相对于最近的定位了的祖先元素，如果没有则相对于视窗。总结可以按照有

html长度像素值和百分比,CSS 长度

weixin_30744613的博客

06-03

467

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

936

文章目录宽高定位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

励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！

04-27

382

总览1.像素：固定值2.百分比：可以根据父元素的大小进行改变一、长度单位：像素1.屏幕是由一个个像素构成的，我们设置的像素效果，在不同分辨率的屏幕下显示效果并不一样 2.HTML代码： 3.CSS代码： 4.显示效果：二、长度单位：百分比 1.子元素设置了百分比的长度和宽度，这个百分比是按照父元素的长度和宽度来确定的。如果父元素缩小，那么子元素也可以进行缩小，始终和父元素保持一定的百分比。如果是像素就做不到这一点。 2.HTML代码： 3.CSS代码： 4.显示效果： ...

css中涉及到的百分比

Kratial的博客

10-09

3391

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

1092

像素px 像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是这些像素点构成的，但是这些像素点，是不能直接看见的。不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素越小，反之像素越大。 百分比% 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值使用百分比的好处是，当父元素的属性...

CSS的百分比，你知道多少？

C860_zy的专栏

04-18

2948

响应式布局设计最近红得一塌糊涂。不

css中用到百分比的属性

Jiang

08-15

3484

标签： 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

1.边框紧靠变粗，用margin负值，让第二个框压上去 2.鼠标经过边框变色，因为之前压住了，所以有的边框只能显示三边有两种解决方案总结 3.利用浮动压不住文字 4.行内块元素的巧妙运用，给父亲设置text-align：center 里面的元素自动居中对齐 5.强化三角把上宽拉高，只有右边保留颜色，得到一个蓝色这样的直角三角形 6.CSS初始化 6.居中·布局常见布局方法总结-居中布局_weixin_33862041的博客-优快云博客 .

css-背景图设置大小单位可以是百分比，或者px

幸福有多远

04-04

2476

前言：之前只用了background-size的百分比单位，用px单位不会失真，看项目具体情况了css .box { width: 300px; height: 300px; border: 1px solid #ddd; } .imgbox { width: 100%; height: 100...

CSS中的百分比(%)到底是谁的百分比？

最新发布

01-17

### 配置 `postcss-px-to-viewport` 实现 px 到百分比的转换为了实现 CSS 中像素单位到百分比单位的自动转换，可以利用 `postcss-px-to-viewport` 插件并适当调整其配置选项。默认情况下该工具主要用于将 px 转换成 vw 或 vh 单位，但是通过特定参数也可以支持其他类型的相对长度计算。 #### 安装依赖包首先确保项目环境中已经安装了必要的 npm 包： ```bash npm install postcss-px-to-viewport --save-dev ``` #### 创建 PostCSS 配置文件接着，在项目的根目录创建名为 `postcss.config.js` 的配置文件，并加入以下内容来定义如何处理样式表中的尺寸单位： ```javascript module.exports = { plugins: { "postcss-px-to-viewport": { unitToConvert: 'px', // 指定需要被替换的目标单位，默认为'px' viewportWidth: 750, // 设计稿宽度，这里假设使用的是750px的设计图 unitPrecision: 6, // 设置精度保留的小数点位数 propList: ['*'], // 可选属性列表，'*'表示所有数值都将参与转换 selectorBlackList: [],// 黑名单选择器前缀，防止某些特殊类名下的px不被转换 minPixelValue: 1, // 最小值限制，低于此阈值则保持原样不予修改 mediaQuery: false, // 是否允许媒体查询内的px也一并转换成相应比例的形式 replace: true, // 替换模式；false指直接返回原始结果而不做任何更改 exclude: [/node_modules/], // 排除在外无需应用本规则的路径匹配正则表达式数组 landscape: false, // 是否考虑横屏状态（仅适用于vh） portrait: false, // 是否考虑竖屏状态（仅适用于vw），此处设为false因为我们要转% // 关键部分：指定目标单位以及对应的计算逻辑 customMediaQuery: [ '@media (min-width: 320px)', '(orientation:portrait)' ], targetUnit: '%' // 自定义最终输出的目标单位为%，而非默认的vw/vh } } }; ``` 上述配置中特别注意设置了 `targetUnit` 参数为 `%` ，这使得所有的有效像素都会按照父级容器的比例关系转化为相应的百分比率[^1]。此外还提供了几个重要的选项用于控制哪些地方应该执行这种变换操作，比如可以通过 `propList` 来限定只针对特定 CSS 属性生效，或是借助 `selectorBlackList` 和 `exclude` 对象排除一些特殊情况不受影响[^2]。最后需要注意的一点是，当把单位改为百分比时，通常会涉及到更复杂的布局结构分析，因此建议开发者仔细测试不同场景下的显示效果以确保预期行为一致[^3]。