学习制作手机网页
流式布局：
盒子的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>
可以看到padding-top 是160px 也就是800*20%=160px
时间： 2024-12-21 13:55:07