随笔分类 - CSS3
摘要：Those css properties will promot to a new layer
阅读全文
摘要：We only want to access <li>One</li> B: '+' sinbling selector, if we don't have second uland replaced with a li, then it is targeting this li; which is
阅读全文
摘要：font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; auto The font display strategy is defined
阅读全文
摘要：So higher rank css will override lower rank css rules. Inline styles will override any other css rules. h1:not(.small-text) // 0011 - :not is not coun
阅读全文
摘要：Layout: This step invovles determining the geometry of the page. The browser calculates where each element will be on the screen, considering factors
阅读全文
摘要：.card { width: min(700px, 90%, 70vw); // take the one currently is the min height: max(300px, 90%, 40vh); // take the one currently is the max font-si
阅读全文
摘要：Refer to https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4 he lvh, svh, and dvh units in CSS are used to specify heights relative to the vie
阅读全文
摘要：<style> @media print { .no-print { display: none !important; } } </style> <div class="overlay--container no-print" >...</div>
阅读全文
摘要：The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Use the container-type property a value of size, inline-size, or normal. These
阅读全文
摘要：Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind that generates your styles on-demand as you author your templates, instead of ge
阅读全文
摘要：Z-index cannot be added to static position DOM element. All the DOM element by default is static position. So if you have to add z-index, you can add
阅读全文
摘要：Install npm install tailwaindcss postcss-cli autoperfixer Config a empty tailwind config file npx tailwind init Conig postcss module.exports = { plugi
阅读全文
摘要：Install Purgecss to remove unused CSS npm install @fullhuman/postcss-purgecss --save-dev Edit postcss.config.js: module.exports = { plugins: [ require
阅读全文
摘要：A strange bug that one toastr showing on the screen... it should happen that when I click the toastr, it should be dismissed. But it doesn't.... I was
阅读全文
摘要：Ref: http://blogs.quovantis.com/browser-specific-hacks-for-frontend-developers/ Internet Explorer Css hacks :root .selector { Property: Value\9; color
阅读全文
摘要：From to HTML: <header class="header item"> <em><strong>LOGO</strong></em> <a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="https
阅读全文
摘要：html: <body class="container"> <header class="header item"> header </header> <nav class="nav item">nav</nav> <div id="app" class="content item"> conte
阅读全文
摘要：1. Grid: by default showing content in Y axis (column), Flex: by default showing content in X axis. Exp: If you want to style a header.. you can use f
阅读全文
摘要：For example, a checkbox mark, if we show / hide by: transform: scale(0); by default it shows up from center, we want it from "bottom left", we can do:
阅读全文
浙公网安备 33010602011771号