CSS系列之%相对问题

最新推荐文章于 2024-09-02 19:53:00 发布

王不留行qwer

最新推荐文章于 2024-09-02 19:53:00 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34134278/article/details/78823904

本文详细解析了CSS中百分比单位的应用场景与计算方式，包括子元素宽高、内外边距、字体大小及transform属性的百分比计算规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    1、子元素的宽度和高度的%

子元素的百分比高度 

        根据父元素的高度来确定，当父元素的高度为不确定值时，或者说父元素的高度未定义时（默认为0），子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。
子元素的百分比宽度 

        根据父元素的宽度来确定，与高度不同，父元素的宽度未定义时默认继承祖父元素的宽度，也就是100%。

2、margin和padding的%

margin和padding的百分比取值都是相对于父元素内容的宽度 

在border-sizing:content-box（默认）的情况下，父元素内容的宽度等于width;
在border-sizing:border-box的情况下，父元素内容的宽度等于 

width-(paddingLeft+paddingRight+borderLeft+borderRight)

3、font-size的%

相对于父元素字体的大小，浏览器默认16px，如果父元素没有定义， 

100%就是16px

4、transform的%

transform: translateX(-50%); transform: translateY(-50%);
分别对应自身的宽度和高度，可在设置垂直布局中使用。