CSS 常见问题

常见问题#

display: table 不支持 max-height 和 overflow#

  • 建议使用 flex 模拟 table
    • thead 和 tbody 可能不同步
      • overflow-x: hidden 确保两个同步
    • width: 100% 可能显示不完整 - 滚动出的内容背景不完整
      • max-content 显示完整
      • 如果 width 不够会导致右侧滚动条看不到
  • CSS3 display:table, overflow-y:scroll doesn't work

父节点 min-heigh, 子节点百分比 heigh 无效#

  • Fix
    1. parent 添加 height:1px;
    2. parent flex flex-col, child flex-1
    3. 如果 parent 的 min-heigh 是数值而非百分比，child 使用 min-height: inherit; 也可以
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body { height: 100%; margin: 0; } #parent { min-height: 100%; background: pink; } #child { height: 100%;
background: aqua; }
<!-- language: lang-html -->
<div id="parent">
<div id="child">
Hello World!
</div>
</div>
<!-- end snippet -->

默认字体#

font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Helvetica, sans-serif;

字体单位如何选择#

<meta name="viewport" content="width=device-width, initial-scale=1" />
let rem = 14;
if (width > 768) {
rem = 45;
} else if (width > 414) {
rem = 26;
} else if (width > 375) {
rem = 18;
} else if (width > 320) {
rem = 16;
}
html {
font-size: 16px;
@media screen and (min-width: 900px) {
font-size: 18px;
}
@media screen and (min-width: 1200px) {
font-size: 20px;
}
}

Scroll Snap#

https://web.dev/snap-after-layout/

https://caniuse.com/#feat=css-snappoints https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

https://codepen.io/argyleink/pen/RwPWqKe

@supports (scroll-snap-type: y mandatory) {
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
}

webkit-scrollbar#

Edit this page