gpt4 book ai didi

CSS 页面布局

转载 作者:行者123 更新时间:2023-11-28 10:50:23 25 4
gpt4 key购买 nike

下面是代码。当我试图将 margin:50px 添加到内框时,外框也从顶部移动 50px。我认为只有内框应该从顶部移动 50px。但它给出了不同的结果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}

div, p {
margin: 0;
padding:0;
}

html {
background: #ccc;
}

.outer {
width: 600px;
margin: 0 auto;
background: #9CF;
}

.box{
background: #B7D19C;
width: 400px;
padding: 50px;
border: 2px solid black;
}

p {
background: #EEA458;
height: 100%;
}

/*add styles here*/

</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
</div>
</div>
</body>
</html>

最佳答案

尝试将 overflow:hidden; 属性添加到 div 外部

.outer{
overflow:hidden;
}

关于CSS 页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22820793/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com