html - flex显示属性和块显示属性的区别
问题描述
flex 和 block 显示属性有什么区别?
<!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>
.flex{
display: flex;
background-color: red;
height: 200px;
}
.block{
height: 200px;
background-color: rgb(51, 170, 120);
display: block;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit <p class="flex">Hello</p> adipisicing elit. Alias velit optio, quod tenetur omnis, in voluptas corporis voluptatem quaerat iure reprehenderit quasi accusamus sed dignissimos odio ex ipsam dolor consequatur.</div>
<div>Lorem ipsum dolor sit <p class="block">Hello</p> adipisicing elit. Alias velit optio, quod tenetur omnis, in voluptas corporis voluptatem quaerat iure reprehenderit quasi accusamus sed dignissimos odio ex ipsam dolor consequatur.</div>
</body>
</html>
在此代码中,两者的工作方式相同。任何人都可以帮助我吗?:(
解决方案
乍一看,它们看起来很相似,但它们并不相似……关键是可以display: flex
访问该flexbox model
功能。要检查这一点,您可以向.flex
类选择器添加两个属性:align-items: center;
和justify-content: center;
display block
“该元素生成一个块元素框,在正常流程中生成元素前后的换行符。” MDNdisplay flex
“该元素的行为类似于块元素,并根据flexbox 模型布置其内容。” MDN