CSS常用单位

原创已于 2025-09-01 22:32:10 修改 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-09-01 22:31:16 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

百分比（%）单位

1、width 是相对父元素内容宽度百分比取值

内容区域 => content-box 不包含padding和border

2、height 是相对父元素内容高度百分比取值

如果父元素有高度，则相对父元素取值，如果父元素没有值，则设置高度百分比无效

3、margin / padding 取值相对父元素内容宽度

left、top、right、bottom取值都是内容宽度

4、绝对定位下left、top取值相对于父元素内容宽度和高度

5、平移 translate属性x和y取值相对于自身宽度和高度

如下示例可以看出：

父盒子为边框盒，整体宽度500px，高度400px，子盒子宽度为 (500px - 边框40px - 填充40px) / 2 = 210px ，高度同理得出160px；子盒子的上外边距为420px * 10% = 42px，子盒子的下填充为420px * 20% = 84px；

 .container {
      width: 500px;
      height: 400px;
      background-color: red;
      margin: 0 auto;
      overflow: hidden;
      box-sizing: border-box;
      padding: 20px;
      border: 20px solid green;
    }
    .container .child {
      width: 50%;
      height: 50%;
      margin-top: 10%;
      padding-bottom: 20%;
      background-color: blue;
    }