为什么使用flex的样式标签也获得“样式”？

 <style> 
      * { 
       display: flex; 
       justify-content:center; 
       align-items:center; 
      } 
    </style>

我得到这个输出中

这是为什么？

[我不是在寻找解决方案，我要问为什么我使用的时候得到这个输出的原因“显示：弯曲”只（不使用其他CSS道具时）

你能在拨弄提供此或在这里添加HTML代码。 –

哈哈，它只是一行代码。我认为我们不需要jsfiddle ... –

只需创建一个html文件并在其上放置代码即可。 JSFiddle你不能添加样式标签 –

请删除*签收前CSS属性。如果你想在所有应用样式属性，你必须使用 <style>

<style> 
    body *{ display: flex; 
      justify-content:center; 
      align-items:center; } 

</style>

，如果你在.css文件中添加CSS类和属性，你可以使用

*{ display: flex; justify-content:center; align-items:center;}

2015-07-28 11:13:15

它是用来说，所有的HTML元素都需要这种风格..但是发生了什么，即使风格元素有它 –

由于头部和风格的默认从不显示当您使用此代码创建html页面时

<style> 
    * { 
     display: flex; 
     justify-content:center; 
     align-items:center; 
    } 
</style>

浏览器会生成以下DOM结构

既然你已经定义了样式的所有元素（通过明星选择），那么这条规则也适用于head和style元素，因此出现与你定义的风格

为了防止这种行为，你可以只适用于body及其后代，如果这是你的目标，例如

<style> 
    body, body * { 
     display: flex; 
     justify-content:center; 
     align-items:center; 
    } 
</style>

，或者只是为了除head

<style> 
    :not(head) { 
     display: flex; 
     justify-content:center; 
     align-items:center; 
    } 
</style>

2015-07-28 11:14:19 fcalderan

尝试 * {color：red} 或甚至样式{display：flex} –

@ElheniMokhles我不明白：如果你涂上红色，由于上述原因，你会看到红色。你想要什么呢？ – fcalderan

不，那不是结果，检查它 –

的*所有元素选择所有元素，包括html，head，style，body和所有其它的标签...不知何故，似乎有问题。看到这个demo。

解决办法是只针对身体内的所有元素：

body * { 
    display: flex; 
    justify-content:center; 
    align-items:center; 
}

2015-07-28 11:16:03 LinkinTED

为什么使用style {dispaly：flex}我们没有相同的东西？ –

我不明白你的意思... – LinkinTED

尝试使用相同的代码，但代替“*”使用“风格” 我们会执行相同的声音，对吧？ –

回答