本文探讨了CSS布局中绝对单位（如px）与百分比单位的应用。当最外层元素使用px单位时，内容不会随浏览器窗口大小变化，但允许通过滚轮缩放。而改为百分比布局后，内容会根据浏览器尺寸动态调整，不响应滚轮缩放。了解这两种布局方式对于响应式设计至关重要。
最外层元素使用px等绝对长度布局，网页内容随ctrl+滚轮缩放，不随浏览器页面大小改变
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 50px;
height: 50px;
background: #888;
}
.midder {
width: 50%;
height: 50%;
background-color: aliceblue;
}
.inner{
width: 50%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
</script>
<div class="outer">
<div class="midder">
<div class="inner">hello</div>
</div>
</div>
</body>
效果：
最外层元素使用%百分比相对长度布局，网页内容随浏览器页面大小改变，不随ctrl+滚轮缩放
仅最外层元素样式改为用百分比表示
.outer {
width: 100%;
height: 100%;
background: #888;
}
效果
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
