html5 - css的百分比margin,padding为什么不是相对于父元素的？

Question

    <section>
      <h2>123</h2>
    </section>

    section {
      overflow: hidden;
      height: 300px;
      width: 100%;
      position: relative;
      background: #ccc;
    }
    h2 {
        margin-top: 10%;
        margin-left: 10%;
        padding-top: 10%;
        padding-left: 10%;
    }

我才知道margin,padding的百分比竟然是相对与父元素的宽度来进行计算了，这样就很不方便了，那么有谁知道，如何设置padding，margin 才能让它相对于父元素的宽和高分别计算呢？

http://codepen.io/snakebang/pen/BzREZr

Answer 1

假设inner把padding–top设为60%，那它的高度就等于上内边距，等于自身宽度的60%(因为它是block，宽度和父级宽度相等)，position设为relative。

把section元素的position设为absolute，宽高都是100%。那么它内部的元素内边距和外边距的百分比虽然相对于父级section的宽度，但因为section宽高比已知，可以换算出来。

假设我们要实现的h2元素margin-left是父级宽度的10%，margin-top是父级高度的10%。

代码如下：

<p class="container">
  <p class="inner">
      <section>
          <h2>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
            <span>19</span>
            <span>20</span>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
            <span>25</span>
            <span>26</span>
            <span>27</span>
            <span>28</span>
            <span>29</span>
            <span>30</span>
            <span>31</span>
            <span>32</span>
            <span>33</span>
            <span>34</span>
            <span>35</span>
            <span>36</span>
            <span>37</span>
            <span>38</span>
            <span>39</span>
            <span>40</span>
            <span>41</span>
            <span>42</span>
            <span>43</span>
            <span>44</span>
            <span>45</span>
            <span>46</span>
            <span>47</span>
            <span>48</span>
            <span>49</span>
            <span>50</span>
            <span>51</span>
            <span>52</span>
            <span>53</span>
            <span>54</span>
            <span>55</span>
            <span>56</span>
            <span>57</span>
            <span>58</span>
            <span>59</span>
            <span>60</span>
            <span>61</span>
            <span>62</span>
            <span>63</span>
            <span>64</span>
          </h2>
      </section>
  </p>
</p>

*{
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}
.container{
    width:500px;
}
.inner{
    position:relative;
    padding-top:60%;
    background:#EEE;
}
section{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
h2{
  width:80%;
  height:80%;
  margin:0;
  margin-top:6%;//因为高度是宽度的60%，所以高度的10%就是宽度的6%
  margin-left:10%;
  background:#09C;
}
span{
  display:block;
  float:left;
  width:50px;
  height:30px;
  border:1px solid #09C;
  color:#FFF;
  background:#333;
  font-size:14px;
  text-align:center;
  line-height:30px;
}

结果：

中间那块区域（64个格子组成的长方形）的margin-top是高度的10%，margin-left是宽度的10%；

Answer 2

如果是百分比的话，你的问题无解

1。建议采取响应式方式处理，通过@media处理，小于或大于一定宽度的，设置一个固定值，超过另一个宽度的，再设置另一个固定值

2。通过js处理，resize后js计算padding，margin的值，并设置为行间样式

3。rem，相对于根节点的字体大小来设置padding，margin的值