CSS中属性百分比的基准点

  • 基于包含块
    以下的关于包含块(含块)的概念,不能简单地理解成是父元素。

    如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 不是static的父元素,比如为absolute,relative,或者 fixed 的父元素。而对于固定定位的元素,它的包含块是视口(viewport)。

  • 基于包含块的宽度(width,min-width,max-width,margin,padding,left,right,text-indent)
    百分比是基于包含块的宽度的属性:width,min-width,max-width,margin,padding,left,right,text-indent

  • 基于包含块的高度(height,max-height,min-height,top,bottom)
    百分比是基于包含块的高度的属性:height,max-height,min-height,top,bottom

  • 基于元素的字体大小(line-height )
    line-height 的百分比基于该元素本身的字体大小

  • 基于元素的行高(vertical-align)
    vertical-align 的百分比基于元素的行高 line-height

    (vertical-align 主要是设置行内元素的属性,该属性值设置行内元素相对于该元素所在的基线的垂直对齐位置。如果该行内元素是表格的单元格的话,该属性设置的是单元格内的内容的垂直方向的对齐位置)

  • font-size 的百分比
    字体大小font-size 中的百分比是基于该元素所继承的字体大小的,也就是父元素的字体大小。

发布了82 篇原创文章 · 获赞 0 · 访问量 1993

猜你喜欢

转载自blog.csdn.net/weixin_43655631/article/details/104034130