<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
假设inner把padding–top设为60%,那它的高度就等于上内边距,等于自身宽度的60%(因为它是block,宽度和父级宽度相等),position设为relative。
把section元素的position设为absolute,宽高都是100%。那么它内部的元素内边距和外边距的百分比虽然相对于父级section的宽度,但因为section宽高比已知,可以换算出来。
假设我们要实现的h2元素margin-left是父级宽度的10%,margin-top是父级高度的10%。
代码如下:
<div class="container">
<div 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>
</div>
</div>
*{
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%;
如果是百分比的话,你的问题无解
1。建议采取响应式方式处理,通过@media
处理,小于或大于一定宽度的,设置一个固定值,超过另一个宽度的,再设置另一个固定值
2。通过js处理,resize
后js计算padding
,margin
的值,并设置为行间样式
3。rem
,相对于根节点的字体大小来设置padding
,margin
的值