CSS

背景 有一天 PM 跟我说，你看下这个 Popover 。为什么它的箭头没有阴影？ 我瞅了一眼 CSS： .tooltip { position: relative; box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 4px 6px; display: inline-block; margin: 4px; background: #fff; } .tooltip::after { content: ""; position: absolute; width: 0; height: 0; left: 50%; margin-left: -3px; bottom: -12px; border: 6px solid black; border-color: #fff transparent transparent transparent; } 没毛病，我又没给箭头加阴影。如果箭头要有阴影，需要为箭头加一些额外的样式： .tooltip::after { transform: rotate(-45deg); border-color: transparent transparent #fff #fff; transform-origin: 0 0; box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0....

flex: 1 有什么作用？ 先来看一个简单的例子。 <div class="container"> <div class="menu"></div> <div class="main"></div> </div> .container { display: flex; width: 300px; height: 200px; border: 1px solid red; } .menu { flex: 0 0 100px; background-color: gray; } .main { flex: 1; background-color: darkseagreen; } 效果截图： 以上效果可以点击这里查看：传送门 从代码效果可以看出 .main 元素的宽占据了父元素除 .menu 元素外的剩余宽度。 flex: 1 的实际渲染属性 打开 Chrome 控制台可以看到： flex: 1 实际上代表三个属性： flex-grow: 1 flex-shrink: 1 flex-basis: 0% MDN 上关于 flex: 1 这种 One value 的情况。...