本文通过一个HTML示例介绍了水平布局的基本原理，包括元素的margin、border、padding和width如何影响元素的水平位置。同时，文章详细讨论了过度约束的概念，当元素的水平尺寸总和不等于父元素内容区宽度时，浏览器如何自动调整这些值以满足等式。重点讲解了在过度约束情况下，如何通过设置auto来调整width和margin，实现元素的居中或其他布局效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 面试题：简单跟我说一说什么是过度约束，如何调整 -->
<style>
.outer {
width: 600px;
height: 200px;
border: 10px red solid;
}
.inner {
width:100px;
height: 100px;
background-color: #bfa;
/* padding: 0 20px; */
border: 10px solid green;
/* margin-left:auto;
margin-right: auto; */
margin: 0 auto;
最低0.47元/天 解锁文章
扫一扫
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
