1、父元素Flex布局，子元素都再是块级元素

父级display:flex之后，子元素会变成 “inline-flex”，表现为非块级元素，不具有主动换行的特性，所以 div 默认的块级元素特征会丢失，手动加上 width:100% 就好了。

例子：

<style>
    .parent{
        background-color:yellow;
        display: flex;
        width: 100%;
        height: 400px;
       
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: green;
    }
</style>
<body>
<div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>

left和right本是块级元素，但是如果被父元素（Flex布局）包裹起来，就不会主动换行。

2、CSS优先级

越具体，优先级越高

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="segmentfault.com"]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

内联样式优先级大于以上所有选择器

important比内联样式优先级更高

内部样式和外部样式的优先级相同，谁靠后，谁优先级高。后面会覆盖前面的。

CSS笔记汇总

1、父元素Flex布局，子元素都再是块级元素

2、CSS优先级