学习制作手机网站1

学习制作手机网页

流式布局:

    盒子的paddingmargin width都要使使用 百分比来定义

百分比

如果一个盒子没有父元素,那么它的宽度默认就是相对于浏览器的宽度

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Document</title>
 5     <style>
 6     .box{
 7         /*相对于浏览器的宽度*/
 8         width:50%;height:100px;
 9     }
10     </style>
11 </head>
12 <body>
13     <div class="box"></div>
14 </body>
15 </html>

如果有父元素,那么子元素的百分比就是相对于父元素(width)的宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     .main{
 8         width:800px;
 9         height:300px;
10     }
11     .box{
12         /*相对于父元素width的宽度*/
13         width:50%; /*400px*/
14     }
15     </style>
16 </head>
17 <body>
18 <div class="main">
19     <div class="box"></div>
20 </div>
21     
22 </body>
23 </html>

如果设置了padding 的百分比,那么百分比也是相对于父元素的width。这是个很奇怪的现象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     .main{
 8         width:800px;
 9         height:300px;
10         background: blue;
11     }
12     .box{
13         /*相对于main的width*/
14         width:50%; /*400px*/
15         height:30%;
16         padding-top:20%;/*相对于main的width*/
17         background: orange;
18     }
19     </style>
20 </head>
21 <body>
22 <div class="main">
23     <div class="box">dddd</div>
24 </div>
25     
26 </body>
27 </html>

技术分享

可以看到padding-top 是160px 也就是800*20%=160px

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。