- 避免子元素覆盖父元素的圆角
可在父元素中增加overflow: hidden;
.panel {
position: relative;
width: 100%;
margin-bottom: 20rpx;
background: var(--panel-background);
border-radius: var(--panel-radius);
overflow: hidden;
}
10 Modern CSS layout
1-Line Layouts (1linelayouts.glitch.me)
Super Centered 子元素居中
place-items: center
.ex1 .parent {
display: grid;
place-items: center;
}
自动换行
flex: 0 1 <baseWidth>
.ex2 .parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ex2 .box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}
Sidebar Says 侧边栏
grid-template-columns: minmax(<min>, <max>) ...
.ex3 .parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
Header Main Footer
grid-template-rows: auto 1fr auto
.ex4 .parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
RAM (Repeat, Auto, Minmax)
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
有时候我们想完成响应式布局，给定一个元素的最小的宽度，然后该元素可以根据窗口的大小来显示该元素加宽和变窄，在小于设定的最小宽度时换行。
也适用于金刚位这种场景，左右顶边，指定最小宽度，自动换行（换行后靠左显示）。比flex更加简单灵活。
.ex7 .parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
display和visibility的区别
- 空间占据
- display: none; 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
- visibility:hidden; 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
- 子元素继承
- display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
- visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
- opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
- 事件绑定
- display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
- visibility:hidden 元素上绑定的事件也无法触发；
- opacity: 0元素上面绑定的事件是可以触发的。
- 过渡动画
- transition对于display 肯定是无效的；
- transition对于visibility 也是无效的；
- transition对于opacity 是有效。
字体大小不同底部对齐
display: flex;
align-items: baseline; // 文字的基线对齐
