如何使每个html/css成为一个单独的块？_Html_Css

如何使每个html/css成为一个单独的块？

html css

如何使每个html/css成为一个单独的块？,html,css,Html,Css,我试着在左边、中间和右边各有一个框，但是它都是用css连接到主体的。我不确定我做错了什么，因为我是新手，这是我第一次尝试从头开始创建自己的代码，而不是复制我找到的代码。谢谢大家! HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="portfolio.css"> <div class="container&qu

我试着在左边、中间和右边各有一个框，但是它都是用css连接到主体的。我不确定我做错了什么，因为我是新手，这是我第一次尝试从头开始创建自己的代码，而不是复制我找到的代码。谢谢大家!

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="portfolio.css">


<div class="container">
    <div class="header"></div>
    <div class="top-container"></div>
    <div class="mid-container"></div> 
    <div class="bottom-container"></div>
    </div>

    </body>


CSS:

body{
    background-color: darkolivegreen;
    display:flex;
    justify-content: flex-end;

}

.top-container{
    display: flex;
    border-style: solid;
    background-color:white;
    margin:5px;
    width:200px;
    height:200px;

}
.mid-container{
    display:flex;
    border-style:solid;
    background-color: teal;
    margin:5px;
    width:100px;
    height:100px;

}

.bottom-container{
     display:flex;
    justify-items: flex-end;
    border-style: solid;
    background-color: thistle;
    margin:5px;
    height: 200px;
    width:200px;
}

HTML：
CSS:
身体{
背景色：暗绿色；
显示器：flex；
证明内容：柔性端；
}
.顶部容器{
显示器：flex；
边框样式：实心；
背景色：白色；
保证金：5px；
宽度：200px；
高度：200px；
}
.中型货柜{
显示器：flex；
边框样式：实心；
背景色：青色；
保证金：5px；
宽度：100px；
高度：100px；
}
.底部容器{
显示器：flex；
证明项目：柔性端；
边框样式：实心；
背景颜色：蓟；
保证金：5px；
高度：200px；
宽度：200px；
}

我会将

.header

拉到

.container

之外（并使其成为语义

header

元素），因为它只会干扰您使用

flexbox

试图完成的任务。使用

flex

父对象上的

justify content:space-between

，将三个子对象放置在左侧、中间和右侧区域

从，关于

证明内容：之间的空格

：

平均分配物品。第一项与起点齐平，最后一项与终点齐平

使用

flexbox

，以及

grid

，需要记住的一件事是，通常在父元素中设置这些类型的定位规则，子元素会按照要求执行

.container{
显示器：flex；
证明内容：之间的空间；
}
/*
为了演示，将所有直接子级设置为
有一个像素的红色边框
*/
.容器>*{
边框：1px纯红；
}


一
二
三

您不需要添加

显示：flex在每个框中

您只需添加display:flex，调整内容：柔性端和其他框添加右边距：自动第一个和第二个框。


这是密码。如果对你不起作用，请告诉我


身体{
背景色：暗绿色；
}
.集装箱{
显示器：flex；
证明内容：柔性端；
}
.顶部容器{
边框样式：实心；
背景色：白色；
保证金：5px；
宽度：200px；
高度：200px；
右边距：自动；
}
.中型货柜{
边框样式：实心；
证明内容：中心；
背景色：青色；
保证金：5px；
宽度：100px；
高度：100px；
右边距：自动；
}
.底部容器{
边框样式：实心；
背景颜色：蓟；
保证金：5px；
高度：200px；
宽度：200px；
}