全国服务热线:4008-888-888

技术知识

css position特性为absolute时其百分值的测算

当position为absolue情况下,其有关特性的百分比为相对性它参照的元素(包括块)来开展测算并开展部位3D渲染的 。

最先大家务必了解:

1、[百分比的参考][1]:

依据包括块测算百分值(1)元素的margin/padding/left/right/width参考包括块的width来测算;(2)要测算 height /top 及 bottom 中的百分值,是根据包括块的 height 的值。假如包括块的 height 值会依据它的內容转变,并且包括块的 position 特性的值被授予 relative 或 static ,那末,这些值的测算值为 0。

2、[明确包括块][2]:

明确1个元素的包括块的全过程彻底依靠于这个元素的 position 特性:

(1)假如 position 特性为 static 或 relative ,包括块便是由它的近期的“先祖块元素”(例如说inline-block, block 或 list-item元素)或文件格式化左右文(例如说 a table container, flex container, grid container, or the block container itself)的內容区的边沿(content)构成的。

(2)假如 position 特性为 absolute ,包括块便是由它的近期的 position 的值并不是 static (也便是值为fixed, absolute, relative 或 sticky)先祖元素的内边距区的边沿(padding-left + content + padding-right)构成。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
     body {
  color: orange;
}
div {

  position: absolute; 
  /*box-sizing: border-box; /*加box-sizing: border-box;时的content=(width-border-padding);未加时的width=content*/*/
  width: 400px;
  border: 5px solid orange;
  padding: 50px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute; /* 包括块为近期的先祖元素(将会是块也将会并不是块元素)的内边距边沿(padding-left + content + padding-right)构成;
  width: 50%;   /* == (50+400+50)px * 50% = 250px */
  height: 25%;  /* == (50+160+50)px * 25% = 65px */
  margin: 5%;   /* == (50+400+50)px * 5% = 25px */
  border: 5px solid orange;
  padding: 5%;  /* == (50+400+50)px * 5% = 25px */
  background: pink;
  color: green;
}
/*p {
   /* 包括块为近期的先祖块元素(只能是块元素)或文件格式化左右文的內容区的边沿(content)构成;
  width: 50%;   /* == 400px * 50% = 200px */
  height: 25%;  /* == 160px * 25% = 40px */
  margin: 5%;   /* == 400px * 5% = 20px */
  border: 5px solid orange;
  padding: 5%;  /* == 400px * 5% = 20px */
  background: pink;
  color: green;
}*/
    
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph!</p>
    </div>
</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服