美文网首页css
2019-07-05 CSS中各个百分比值是相对哪个计算?

2019-07-05 CSS中各个百分比值是相对哪个计算?

作者: 李华峰0722 | 来源:发表于2019-07-05 23:01 被阅读0次

CSS中各个百分比值是相对哪个计算?

例如设置子元素 width:50%

<div class="father">
 <div class="son"></div>
</div>
.son{
  width:50%;
}

.son的

width是相对于父元素的content区域的宽度值计算
height 是相对于父元素的content区域的高度值计算
padding-left,padding-right,padding-top,padding-bottom是相对于父元素的content区域的宽度值计算
margin-left,margin-right,margin-top,margin-bottom是相对于父元素的content区域的宽度值计算


对于position:absolute的元素,计算值有些特殊
例如设置子元素 left:50%;

<div class="father">
 <div class="son"></div>
</div>
.son{
  position:absolute;
  left:50%;
}

.son的
left值或者right值是相对于包含块的宽度计算的
top值或者bottom值是相对于包含块的高度计算的


对于position:relative的元素,计算值和宽高计算规则相同
例如设置子元素 left:50%;

<div class="father">
 <div class="son"></div>
</div>
.son{
  position:relative;
  left:50%;
}

left值或者right值是相对于父元素的宽度计算的
top值或者bottom值是相对于父元素的高度计算的

相关文章

网友评论

    本文标题:2019-07-05 CSS中各个百分比值是相对哪个计算?

    本文链接:https://www.haomeiwen.com/subject/qsgyhctx.html