gpt4 book ai didi

html - 解释在一个盒子中居中一个盒子和调整窗口大小

转载 作者:行者123 更新时间:2023-11-28 14:32:08 24 4
gpt4 key购买 nike

我是网页设计的新手,有一个关于居中和高度的问题,希望有人能回答。

我正在尝试使用 CSS 将一个框居中放置在一个框中。我以前在另一个页面上使用过 CSS 代码片段(“这部分”评论之间的部分,见下文)并假设我必须将它放在#outer #inner{ 部分下,因为内框是我想要居中的部分.这没有用,所以我随机将它放在#outer 部分并且它起作用了。我不确定为什么,希望有人能向我解释原因:)

此外,目前我的页面上有一张背景图片和 2 个框,当我缩小页面时,所有内容也会缩小。我认为这是因为一切都是百分比。当我最小化屏幕时,我将如何做到这一点,一切都留在原地并出现滚动条?我很难在这个网站上找到另一个类似的问题。

请尽可能回答,我们将不胜感激!非常感谢:)

html{
height: 97%;
}
body{
background-image: url("Pic.png");
background-size: cover;
height: 100%;
}

#outer{
border-style: solid;
border-color: green;
height: 99%;
width: 40%;

/*THIS PART: START*/
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
/*THIS PART: END*/

}

#outer #inner{
position: relative;
background-color: red;

height: 30%;
width: 50%;

/*Why doesn't the code from above in #outer go here?*/
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
</head>

<body>
<div id = "outer">
<h1>Outer</h1>
<div id = "inner">
<h1>Inner</h1>
</div>
</div>
</body>
</html>

最佳答案

  • 要开始使用Flexbox 模型,您需要先定义一个 flex 容器。

  • flex-wrap 属性指定 flex 元素
    应该换行还是不换行。

注意:应用于容器的属性会应用于其元素的 View 。

供引用: https://www.w3schools.com/css/css3_flexbox.asp

对于收缩问题的情况,使用px或vh/vw

供引用:https://www.youtube.com/watch?v=__KNqdpqji0

关于html - 解释在一个盒子中居中一个盒子和调整窗口大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54059280/

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