学习制作手机网站1

news/2024/5/8 16:12:41/文章来源:https://blog.csdn.net/weixin_30641999/article/details/99196976

学习制作手机网页

流式布局：

盒子的padding 和margin 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>