我写了以下代码,参考链接。(参考文章是日文的,我只是想说明一下我是作为参考使用的,所以看不了参考文章也没关系)
我编写了代码来制作如下所示的正方形,但我不知道为什么display: flex
需要这种技术。
display: flex
使其工作的规范是什么?
CSS 代码:
.squareBasedOnWidth {
display: flex;
}
.squareBasedOnWidth:before{
content: "";
display: block;
width: 0;
height: 0;
padding-bottom: 100%;
}
HTML代码:
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth"></div>
</div>
我读了你的回复并对此感到疑惑,所以我试了一下。您评论中的代码确实有效,但是当我从头开始尝试时,它不起作用。
与flex
:
<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth {
display: flex;
}
.squareBasedOnWidth:before{
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth"></div>
</div>
</body>
</html>
没有flex
:
<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth:before{
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth"></div>
</div>
</body>
</html>
哦,我懂。
我只是删除flex
并添加block
到squareBasedOnWidth:befor
,对吗?
<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth:before{
display: block;
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth"></div>
</div>
</body>
</html>
然而,当元素被放置在里面时,运动似乎发生了变化。
flex
, 和内部元素。<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth {
display: flex;
}
.squareBasedOnWidth:before{
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth">
Foo <!-- inside element -->
</div>
</div>
</body>
</html>
flex
和添加block
,以及内部元素。<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth:before{
display: block;
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth">
Foo <!-- inside element -->
</div>
</div>
</body>
</html>
如果我指定block
而不是flex
,我将不会得到高度。指定填充的元素只是突出。
这是为什么?为什么会flex
得到高度?
<!DOCTYPE html>
<html>
<head>
<style>
.squareBasedOnWidth {
display: block; /* replace to block */
}
.squareBasedOnWidth:before{
content: "";
width: 0;
height: 0;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth">
Foo <!-- inside element -->
</div>
</div>
</body>
</html>
然而,当元素被放置在里面时,运动似乎发生了变化。
使用
display: flex;
.squareBasedOnWidth {
display: flex;
}
.squareBasedOnWidth:before {
background-color: yellow;
content: "1";
width: 10px;
height: 0;
padding-bottom: 100%;
}
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth">
2
</div>
</div>
你的伪元素变成了一个弹性项目。默认情况下,Flex 项目从左到右对齐。“squareBasedOnWidth”中的内容在您成为伪元素之后呈现为第二列。因为您将伪元素的宽度设置为 0,所以“sqaureBasedOnWidth” div 中的所有内容都呈现在左上角。
将其设置为
display: block
“sqaureBasedOnWidth”中的所有内容都呈现在高度为 100% 的伪元素下方。您不再保持纵横比,因为您的盒子现在是 100% +“sqaureBasedOnWidth”内内容的高度。
.squareBasedOnWidth:before {
background-color: yellow;
display: block;
content: "";
width: 100%;
height: 0;
padding-bottom: 100%;
}
<div style="width: 100px; background-color: green;">
<div class="squareBasedOnWidth">
block element
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句