最近在学习制作移动端页面时,遇到了一个平时没想过的问题,就是当我们在给一个盒子设置样式时,不设置width而设置max-width,会发生什么?盒子会有宽度吗?我们看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { max- 540px; min- 320px; margin: 0 auto; background:#f2f2f2;
}
</style>
</head>
<body>
123
</body>
</html>
再看一下控制台
我们看到这个上面会有宽度,也许这样你还看不出来,我们再跟着这上面的代码再接着来。
上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { max- 540px; min- 320px; margin: 0 auto; background: #f2f2f2; } div{ 50%; background-color: red; } } </style> </head> <body> <div>这是body的孩子div</div> </body> </html>
再看控制台
我们可以看到,这里的宽度就是max-width的一半,说明上面那个body盒子宽度就为max-width,
所以到这里我就总结了一下,当没设置width而设置max-width时,盒子宽度为max-width。
如有错误,麻烦指出