盒模型百分数
- 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%
网友评论