CSS--盒模型和定位的百分数计算

盒模型百分数
  • width、margin-left\right\top\bottom、padding-left/right/top/bottom的参照物是【父元素】的width。
  • height的参照物是【父元素】的height
绝对定位百分比
  • 定位起点是【定位包含块】的padding-box

  • top \ left 的百分比计算的相对值,也是分别以padding-box的宽高为参照物。

    • top以height为参照物,left以width为参照物。
    • 例:当设置top:100% ; left:100% 时,绝对定位元素在最近的【定位包含块】的右下角,与右下角的边框重合一个小方块。
  • 计算得出的偏移距离,是绝对定位的相应方向的边框外侧,与定位包含块的相应边框内侧的距离。

  • 例:利用绝对定位可以实现定宽、定高块元素的垂直居中:
    .inner{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    }

  • 还有一种上述的变化版也可以实现垂直居中:
    .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

这是因为translate()使用百分比时,是以这个元素自身的宽度和高度为基准来进行换算和移动的。
  • 最后一种垂直居中的黑科技:FlexBox
    .outer{
    width: 600px;
    height: 600px;
    display: flex;
    }
    .inner{
    width: 300px;
    height: 300px;
    margin: auto;
    }
也就是说,只要父盒子的display是flex,那么只需要在子盒子上设置margin:auto,就能立刻实现垂直居中。
相对定位百分比
  • 定位起点是【直接父元素】的padding-box
  • 百分比计算是【直接父元素】的padding-box,top相对于height,left相对于width
  • 利用relative同样可以实现在父元素中的垂直居中:
    .outer{
    width: 500px;
    height: 300px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
    }
fixed定位百分比
  • 定位起点是【页面视口】
  • 百分比计算是【页面视口】相应部分的宽高。
  • 对于fixed定位而言,必须要结合top left等具体位置的设定才能确定起始位置,否则该元素还停留在原来的位置,则默认top和left隐式设置为能使其停留在原位的值,此时若设置宽高为100%,并不能使其充满屏幕,而是从左上的起始点向右和向下100%充满其余的位置,所以若要用fixed定位充满屏幕,必须同时设置top\left:0,以及宽高100%
绝对定位元素是指绝对定位或者固定定位(fixed或absolute)
总结各种继承:
  • 相对于父元素宽度( width )的:
    [max/min-]width、left、right、padding、margin 等;

  • 相对于父元素高度( height )的:
    [max/min-]height、top、bottom 等;

  • 相对于继承字号的:
    font-size 等;

  • 相对于自身字号的:
    line-height 等;

  • 相对于自身宽高的:
    border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等;

  • 特殊算法的:
    background-position(方向长度 / 该方向除背景图之外部分总长度 * 100)、
    filter 系列函数等;

top left bottom right z-index只对 fixed relative absolute元素有效,对static元素无效
实际使用实例:由于padding-top取父元素的width,以及绝对定位元素的起点坐标是相对于父元素的padding-box而言,所以可以在未知屏幕宽度的情况下,设置一个宽充满屏幕,而高与宽相等的容器:
    .image-header
      position: relative
      width: 100%
      height: 0
      padding-top: 100%
      img
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,452评论 1 88
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 159评论 0 1
  • 一、简介 一个盒子包括:外边距margin,内边距padding,边框border,内容content。 盒子模型...
    白小九阅读 68评论 0 0
  • css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属...
    Zd_silent阅读 57评论 0 1
  • 招聘者不能一直站在云端,以上帝视角去俯视求职者 1 你在设计招聘页面时,你在想什么? 案例之一: 某科技型公司客户...
    袁语阅读 1,305评论 8 15