2023-11-06 16:05:27 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >
css奇技淫巧
< / title >
< meta name = "description" content = "" >
< meta name = "keywords" content = "" >
< meta name = "author" content = "Mozzie" >
2023-11-24 16:47:58 +08:00
< link rel = "canonical" href = "https://mozzie.cn/2023/11/06/clpcdqm3h0007cvz3289m71c7/" >
2023-11-06 16:05:27 +08:00
< link rel = "icon" type = "image/svg" href = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>' >
2023-11-21 16:58:32 +08:00
< link rel = "stylesheet" href = "/css/5e0df50f.css" >
2023-11-06 16:05:27 +08:00
< meta name = "generator" content = "Hexo 6.3.0" > < / head >
< body id = "app" >
<!-- 响应式布局按钮 -->
2023-11-11 18:50:08 +08:00
< a class = "side-navigation btn-hover btn-hover-bg tip left" data-tip = "展开" >
2023-11-06 16:05:27 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" >
< g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< rect x = "4" y = "4" width = "16" height = "16" rx = "2" > < / rect >
< path d = "M9 4v16" > < / path >
< / g >
< / svg >
< / a >
< aside >
< div >
< link rel = "stylesheet" href = "/css/5bfc518f.css" >
< div class = "home-bar" >
2023-11-11 18:50:08 +08:00
< a href = "/" class = "tip" data-tip = "首页" >
2023-11-06 16:05:27 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 512 512" >
< path
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
fill="currentColor">< / path >
< / svg >
< span > Mozzie< / span >
< / a >
<!-- 切换主题 -->
2023-11-11 18:50:08 +08:00
< a id = "toggle-theme" class = "tip left" data-tip = "切换主题" >
2023-11-06 16:05:27 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 512 512" >
< path d = "M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill = "currentColor" > < / path >
< path d = "M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill = "currentColor" > < / path >
< path
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
fill="currentColor">< / path >
< path
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
fill="currentColor">< / path >
< path d = "M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill = "currentColor" > < / path >
< path d = "M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill = "currentColor" > < / path >
< path
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
fill="currentColor">< / path >
< path
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
fill="currentColor">< / path >
< path d = "M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill = "currentColor" > < / path >
< / svg >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 512 512" >
< path
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
fill="currentColor">< / path >
< / svg >
< / a >
< / div >
2023-11-06 16:14:34 +08:00
< script src = "/js/ae2a0e7b.js" > < / script >
2023-11-06 16:05:27 +08:00
<!-- search -->
2023-11-08 10:11:56 +08:00
< link rel = "stylesheet" href = "/css/82dd7e5a.css" >
2023-11-06 16:05:27 +08:00
< form class = "search-group" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "currentColor" >
< path d = "M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill = "currentColor" > < / path >
< / g >
< / svg >
2023-11-11 18:50:08 +08:00
< span id = "search-input" > 搜索...< / span >
2023-11-06 16:05:27 +08:00
< div class = "short-key" >
< kbd class = "key-cap" > < span > Ctrl K< / span > < / kbd >
< / div >
< / form >
< script >
window.algolia = {
appId: "5DTW808BZ8",
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
}
window.search = {
2023-11-10 13:55:02 +08:00
enable: "true"
2023-11-06 16:05:27 +08:00
}
< / script >
2023-11-10 13:55:02 +08:00
< script src = "/js/b9c2be9c.js" > < / script >
2023-11-06 16:05:27 +08:00
<!-- navigation -->
< link rel = "stylesheet" href = "/css/3efc6cb5.css" >
< section class = "category-nav scrollbar-obtrusive" >
2023-11-10 13:44:10 +08:00
< ul > < li data-path = "timeline" >
< a href = "/archives" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M12 7v14" > < / path > < path d = "M9 18l3 3l3-3" > < / path > < circle cx = "12" cy = "5" r = "2" > < / circle > < / g > < / svg >
2023-11-11 18:50:08 +08:00
< div class = "ellipsis" > 时间轴< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li data-path = "roadmap" >
< a href = "/roadmap" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z" > < / path > < path d = "M9 14v-2c0-.59.414-1 1-1h5" > < / path > < path d = "M13 9l2 2l-2 2" > < / path > < / g > < / svg >
2023-11-11 18:50:08 +08:00
< div class = "ellipsis" > 路线< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li data-path = "resume" >
< a href = "/resume" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M14 3v4a1 1 0 0 0 1 1h4" > < / path > < path d = "M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5" > < / path > < circle cx = "6" cy = "14" r = "3" > < / circle > < path d = "M4.5 17L3 22l3-1.5L9 22l-1.5-5" > < / path > < / g > < / svg >
2023-11-11 18:50:08 +08:00
< div class = "ellipsis" > 简历< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < / ul >
2023-11-11 18:50:08 +08:00
< p > 分类< / p >
2023-11-10 13:44:10 +08:00
< ul > < li class = "" >
< a href = "/categories/EQ/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z" > < / path > < circle cx = "11.5" cy = "7.5" r = "1" fill = "currentColor" > < / circle > < / g > < / svg >
2023-11-10 13:51:34 +08:00
< div class = "ellipsis" >
< span > EQ< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
< a href = "/categories/Finance/" >
2023-11-10 13:51:34 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "9" > < / circle > < path d = "M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1" > < / path > < path d = "M12 6v2m0 8v2" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > Finance< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "active" >
< a href = "/categories/Front-End/" >
2023-11-10 13:51:34 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M20 4l-2 14.5l-6 2l-6-2L4 4z" > < / path > < path d = "M7.5 8h3v8l-2-1" > < / path > < path d = "M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > Front-End< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
< a href = "/categories/Hexo/" >
2023-11-10 13:51:34 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1" > < / path > < path d = "M8 16h8" > < / path > < path d = "M8.322 12.582l7.956.836" > < / path > < path d = "M8.787 9.168l7.826 1.664" > < / path > < path d = "M10.096 5.764l7.608 2.472" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > Hexo< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
2023-11-21 13:49:17 +08:00
< / li > < li class = "" >
< a href = "/categories/%E6%B1%82%E5%AD%A6%E4%B9%8B%E8%B7%AF/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2" > < / path > < path d = "M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > 求学之路< / span >
< / div >
< / a >
2023-11-11 18:48:29 +08:00
< / li > < li class = "" >
< a href = "/categories/%E8%87%AA%E5%AA%92%E4%BD%93/" >
2023-11-11 18:50:08 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < path d = "M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < / path > < / svg >
2023-11-11 18:48:29 +08:00
< div class = "ellipsis" >
< span > 自媒体< / span >
< / div >
< / a >
2023-11-10 13:44:10 +08:00
< / li > < / ul >
2023-11-06 16:05:27 +08:00
< / section >
< script src = "/js/f8b20eb9.js" > < / script >
<!-- icp -->
< div class = "icp" >
< a target = "_blank" rel = "noopener" href = "http://beian.miit.gov.cn/" > 苏ICP备19008833号-4< / a >
< / div >
< / div >
< / aside >
< main >
2023-11-22 10:25:47 +08:00
< link rel = "stylesheet" href = "/css/3fe07c47.css" >
2023-11-06 16:05:27 +08:00
< div class = "post-container" >
< div class = "content" >
< header >
< link rel = "stylesheet" href = "/css/de5de8fb.css" >
< nav class = "breadcrumb" >
2023-11-11 18:50:08 +08:00
< a href = "/" class = "home tip btn-hover right" data-tip = "首页" >
2023-11-06 16:05:27 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 512 512" >
< path d = "M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill = "currentColor" > < / path >
< / svg >
< / a >
< em >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / em >
< a href = "/categories/Front-End/" >
Front-End
< / a >
< em >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / em >
< span class = "ellipsis" >
css奇技淫巧
< / span >
< / nav >
< script src = "/js/31d6cfe0.js" > < / script >
< / header >
< main class = "scrollbar-obtrusive" >
< div class = "article-container" >
<!-- 文章tags -->
<!-- 渲染文章内容 -->
2023-11-08 13:45:34 +08:00
< article >
< h1 > css奇技淫巧< / h1 >
2023-11-24 16:47:58 +08:00
< p class = "post-info" > 更新: 2023-11-08 09:33:30< / p >
2023-11-08 13:45:34 +08:00
< h1 id = "grid-布局" > < a href = "#grid-布局" class = "headerlink" title = "grid 布局" > < / a > grid 布局< / h1 > < blockquote >
2023-11-06 16:05:27 +08:00
< p > flex 布局操纵的是一维、一行/ 一列， < / p >
< / blockquote >
< p > 设为网格布局以后，容器子元素（项目）的< code > float< / code > 、< code > display: inline-block< / code > 、< code > display: table-cell< / code > 、< code > vertical-align< / code > 和 < code > column-< / code > 等设置都将失效。< / p >
< ul >
< li > grid-template-columns: 定义每一列的列宽< / li >
< li > grid-template-rows: 定义每一行的行高< / li >
< li > grid-row-gap: 行间距< / li >
< li > grid-column-gap: 列间距< / li >
< li > grid-gap: 行列间距合并< / li >
< li > grid-template-areas: 一个区域由单个或多个单元格组成< / li >
< li > grid-auto-flow: 默认值是 row， < / li >
< li > justify-items: < code > 单元格内容< / code > 的水平对齐< / li >
< li > align-items: < code > 单元格内容< / code > 垂直对齐< / li >
< li > place-items: align-items 属性和 justify-items 属性的合并简写形式< / li >
< li > justify-content: < code > 整个内容区域< / code > 水平对齐< / li >
< li > align-content: < code > 整个内容区域< / code > 垂直对齐< / li >
< li > place-content: align-content 属性和 justify-content 属性的合并简写形式< / li >
< / ul >
< blockquote >
< p > 设置的行或者列比较多的时候，可以使用 repeat()这个函数简化重复的值< / p >
< / blockquote >
< h2 id = "repeat" > < a href = "#repeat" class = "headerlink" title = "repeat()" > < / a > repeat()< / h2 > < p > 第一个参数是重复的次数，第二个参数是所要重复的值、也可以是某个模式< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token comment" > /* 重复 3个100px的列 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > 3< span class = "token punctuation" > ,< / span > 100px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > /* 重复这种布局2次 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > 2< span class = "token punctuation" > ,< / span > 100px 20px 80px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > /* 自动填充，直到容器放不下为止 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > auto-fill< span class = "token punctuation" > ,< / span > 100px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "fr" > < a href = "#fr" class = "headerlink" title = "fr" > < / a > fr< / h2 > < p > 方便表示比例关系，网格布局提供了 fr 关键字< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > 1fr 1fr< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
< h2 id = "grid-template-areas" > < a href = "#grid-template-areas" class = "headerlink" title = "grid-template-areas" > < / a > grid-template-areas< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token property" > grid-template-areas< / span > < span class = "token punctuation" > :< / span >
< span class = "token string" > "header header header"< / span >
< span class = "token string" > "main main sidebar"< / span >
< span class = "token string" > "footer footer footer"< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "item-定位" > < a href = "#item-定位" class = "headerlink" title = "item 定位" > < / a > item 定位< / h2 > < p > < img src = "/img/grid_1.png" alt = "grid_1" > < / p >
2023-11-06 16:05:27 +08:00
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token comment" > /* 1号项目就是从第二根垂直网格线开始第四根结束 */< / span >
< span class = "token selector" > .item1< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > grid-column-start< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > ;< / span >
< span class = "token property" > grid-column-end< / span > < span class = "token punctuation" > :< / span > 4< span class = "token punctuation" > ;< / span >
< span class = "token property" > background< / span > < span class = "token punctuation" > :< / span > red< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "硬件加速-IE9" > < a href = "#硬件加速-IE9" class = "headerlink" title = "硬件加速(IE9+)" > < / a > 硬件加速(IE9+)< / h1 > < blockquote >
< p > 移动端开启,吃内存、增加耗电< / p >
< / blockquote >
< p > < code > animation< / code > 、< code > transform< / code > 、< code > transition< / code > 不会自动开启< code > GPU< / code > 加速，利用< code > transform: translateZ(0)< / code > 就可以开启< code > 3D变换< / code > ，出发硬件加速< / p >
< p > 场景：< code > webKit内核< / code > 偶尔页面闪烁：< code > transform: translate3d(0, 0, 0);< / code > < / p >
< h1 id = "控制台打印-shield-徽章" > < a href = "#控制台打印-shield-徽章" class = "headerlink" title = "控制台打印 shield 徽章" > < / a > 控制台打印 shield 徽章< / h1 > < pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span >
< span class = "token string" > "%c"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'mozzie.com'"< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span >
< span class = "token string" > "%cv"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'2.0.0'"< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span >
< span class = "token string" > "%c\r\n"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'了解更多:https://www.mozzie.com'"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "color: #fff; background: #5281FA; font-size: 12px;border-radius:2px 0 0 2px;padding:3px 6px;"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "border-radius:0 2px 2px 0;padding:3px 6px;color:#333;background:#EBEBEB"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "margin-top:10px;"< / span >
< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "css-判断-input-是否为空" > < a href = "#css-判断-input-是否为空" class = "headerlink" title = "css 判断 input 是否为空" > < / a > css 判断 input 是否为空< / h1 > < p > < code > :placeholder-shown< / code > ：占位符是否显示的伪类，配合 < code > :not()< / code > （不是必须，反过来也可以）< / p >
< pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > input< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo-input< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > type< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > placeholder< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > name< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > label< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo-label< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Name< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > label< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #demo< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 90%< span class = "token punctuation" > ;< / span >
< span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 450px< span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 100%< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 60px< span class = "token punctuation" > ;< / span >
< span class = "token property" > line-height< / span > < span class = "token punctuation" > :< / span > 60px< span class = "token punctuation" > ;< / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 20px< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > 1px solid #ffa500< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input::placeholder< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input:focus + label,
#demo-input:not(:placeholder-shown) + label< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 12px< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-label< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 22px< span class = "token punctuation" > ;< / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #ffa500< span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > translateY< / span > < span class = "token punctuation" > (< / span > -50%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > transition< / span > < span class = "token punctuation" > :< / span > all 0.3s< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token comment" > /*
* Default
*/< / span >
< span class = "token selector" > body< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 100vh< span class = "token punctuation" > ;< / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > flex< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > body div< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > margin< / span > < span class = "token punctuation" > :< / span > auto< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > body div input< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > border< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > outline< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "居中" > < a href = "#居中" class = "headerlink" title = "居中" > < / a > 居中< / h1 > < h2 id = "transform-大法" > < a href = "#transform-大法" class = "headerlink" title = "transform 大法" > < / a > transform 大法< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #wrapper< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #box< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > translate< / span > < span class = "token punctuation" > (< / span > -50%< span class = "token punctuation" > ,< / span > -50%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "0000-大法" > < a href = "#0000-大法" class = "headerlink" title = "0000 大法" > < / a > 0000 大法< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #wrapper< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #box< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > right< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > bottom< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "如何让-img-垂直居中" > < a href = "#如何让-img-垂直居中" class = "headerlink" title = "如何让 img 垂直居中" > < / a > 如何让 img 垂直居中< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > imgWrapper< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > xxx.png< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .imgWrapper< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > table-cell< span class = "token punctuation" > ;< / span >
< span class = "token property" > text-align< / span > < span class = "token punctuation" > :< / span > center< span class = "token punctuation" > ;< / span >
< span class = "token property" > vertical-align< / span > < span class = "token punctuation" > :< / span > middle< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "ul-下-li-居中" > < a href = "#ul-下-li-居中" class = "headerlink" title = "ul 下 li 居中" > < / a > ul 下 li 居中< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token comment" > < !--外层包个div/section block元素 -->< / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > clearfix< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token punctuation" > >< / span > < / span > 1< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token punctuation" > >< / span > < / span > 2< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > div< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > text-align< / span > < span class = "token punctuation" > :< / span > center
< span class = "token punctuation" > } < / span >
< span class = "token selector" > ul< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > inline-block
< span class = "token punctuation" > } < / span >
< span class = "token selector" > li< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > inline
< span class = "token property" > float< / span > < span class = "token punctuation" > :< / span > left
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "js-随机渐变背景" > < a href = "#js-随机渐变背景" class = "headerlink" title = "js 随机渐变背景" > < / a > js 随机渐变背景< / h1 > < pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token keyword" > function< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > min< span class = "token punctuation" > ,< / span > max< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token keyword" > return< / span > min < span class = "token operator" > +< / span > Math< span class = "token punctuation" > .< / span > < span class = "token function" > floor< / span > < span class = "token punctuation" > (< / span > Math< span class = "token punctuation" > .< / span > < span class = "token function" > random< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > *< / span > < span class = "token punctuation" > (< / span > max < span class = "token operator" > -< / span > min< span class = "token punctuation" > )< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token keyword" > function< / span > < span class = "token function" > setRandomBg< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > el< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > var< / span > left < span class = "token operator" > =< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 255< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > bottom < span class = "token operator" > =< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 255< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > css < span class = "token operator" > =< / span > < span class = "token punctuation" > [< / span >
< span class = "token string" > "linear-gradient(to left bottom,hsl("< / span > < span class = "token punctuation" > ,< / span >
left< span class = "token punctuation" > ,< / span >
< span class = "token string" > ", 100%, 85%) 0%,hsl("< / span > < span class = "token punctuation" > ,< / span >
bottom< span class = "token punctuation" > ,< / span >
< span class = "token string" > ", 100%, 85%) 100%)"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token punctuation" > ]< / span > < span class = "token punctuation" > ;< / span >
el< span class = "token punctuation" > .< / span > style< span class = "token punctuation" > .< / span > background < span class = "token operator" > =< / span > css< span class = "token punctuation" > .< / span > < span class = "token function" > join< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ""< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "css-三角形" > < a href = "#css-三角形" class = "headerlink" title = "css 三角形" > < / a > css 三角形< / h1 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > span< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-top< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-left< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-right< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > 40px solid #ff0000< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "1px-神迹" > < a href = "#1px-神迹" class = "headerlink" title = "1px 神迹" > < / a > 1px 神迹< / h1 > < h2 id = "pc-端最优解" > < a href = "#pc-端最优解" class = "headerlink" title = "pc 端最优解" > < / a > pc 端最优解< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 1px< span class = "token punctuation" > ;< / span > < span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span > < span class = "token property" > background< / span > < span class = "token punctuation" > :< / span > red< / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "移动端-媒体查询-transform" > < a href = "#移动端-媒体查询-transform" class = "headerlink" title = "移动端 - 媒体查询 + transform" > < / a > 移动端 - 媒体查询 + transform< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > .border-bottom::after< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > -webkit-transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "移动端-媒体查询-伪类" > < a href = "#移动端-媒体查询-伪类" class = "headerlink" title = "移动端 - 媒体查询 + 伪类" > < / a > 移动端 - 媒体查询 + 伪类< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > content< / span > < span class = "token punctuation" > :< / span > < span class = "token string" > ''< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 1px< span class = "token punctuation" > ;< / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 100%
< span class = "token property" > background-color< / span > < span class = "token punctuation" > :< / span > #000< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform-origin< / span > < span class = "token punctuation" > :< / span > 50% 0%< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 3< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.33< span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "横竖屏适配" > < a href = "#横竖屏适配" class = "headerlink" title = "横竖屏适配" > < / a > 横竖屏适配< / h1 > < p > js 检测< / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "resize"< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > =>< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 180< / span > < span class = "token operator" > ||< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 正常方向或屏幕旋转180度< / span >
console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "竖屏"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 90< / span > < span class = "token operator" > ||< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token operator" > -< / span > < span class = "token number" > 90< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度< / span >
console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "横屏"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > css 检测< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > orientation< / span > < span class = "token punctuation" > :< / span > portrait< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > /*竖屏...*/< / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > orientation< / span > < span class = "token punctuation" > :< / span > landscape< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > /*横屏...*/< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "像素" > < a href = "#像素" class = "headerlink" title = "像素" > < / a > 像素< / h1 > < ul >
< li > 物理像素: 物理设备真实的像素< / li >
< li > 独立像素: 平时开发写的 px< / li >
< li > 设备像素比(DPR): = 物理像素 / 设备独立像素< / li >
< / ul >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // 获取 DPR< / span >
window< span class = "token punctuation" > .< / span > devicePixelRatio< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 也可以使用媒体查询< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "srcset" > < a href = "#srcset" class = "headerlink" title = "srcset" > < / a > srcset< / h1 > < p > 使用 img 标签的 < code > srcset< / code > 属性，浏览器会自动根据像素密度匹配最佳显示图片：< / p >
< pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > conardLi_1x.png< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > srcset< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > conardLi_2x.png 2x, conardLi_3x.png 3x< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "字体小于-12px" > < a href = "#字体小于-12px" class = "headerlink" title = "字体小于 12px" > < / a > 字体小于 12px< / h1 > < p > css3 的 < code > transform< / code > 属性，设置值为 < code > scale(x, y)< / code > 定义 2D 缩放转换< / p >
2023-11-06 16:05:27 +08:00
< h1 id = "css-清浮动" > < a href = "#css-清浮动" class = "headerlink" title = "css 清浮动" > < / a > css 清浮动< / h1 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .clearfix::after< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > content< / span > < span class = "token punctuation" > :< / span > < span class = "token string" > ""< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > block< span class = "token punctuation" > ;< / span >
< span class = "token property" > clear< / span > < span class = "token punctuation" > :< / span > both< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "ellipsis" > < a href = "#ellipsis" class = "headerlink" title = "ellipsis" > < / a > ellipsis< / h1 > < h2 id = "单行" > < a href = "#单行" class = "headerlink" title = "单行" > < / a > 单行< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .ellipsis< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span >
< span class = "token property" > text-overflow< / span > < span class = "token punctuation" > :< / span > ellipsis< span class = "token punctuation" > ;< / span >
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > nowrap< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "多行" > < a href = "#多行" class = "headerlink" title = "多行" > < / a > 多行< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .ellipsis< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > -webkit-box< span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-box-orient< / span > < span class = "token punctuation" > :< / span > vertical< span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-line-clamp< / span > < span class = "token punctuation" > :< / span > 3< span class = "token punctuation" > ;< / span > // 最多显示几行
< span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "页面导入样式时，使用-link-和-import" > < a href = "#页面导入样式时，使用-link-和-import" class = "headerlink" title = "页面导入样式时，使用 link 和 @import" > < / a > 页面导入样式时，使用 link 和 @import< / h1 > < blockquote >
2023-11-06 16:05:27 +08:00
< p > 你可能不信， < / p >
< / blockquote >
< ul >
< li > link: 与< code > dom< / code > 异步加载< / li >
< li > @import: 先加载< code > dom< / code > < / li >
< / ul >
2023-11-08 09:34:00 +08:00
< h1 id = "em-rem-换算" > < a href = "#em-rem-换算" class = "headerlink" title = "em | rem 换算" > < / a > em | rem 换算< / h1 > < p > 相对于HTML根元素 < code > font-size< / code > 来确定的，浏览器的默认字体高是 < code > 16px< / code > ，因此:< / p >
2023-11-06 16:05:27 +08:00
< ul >
< li > 16px = 1em< / li >
< li > 12px = .75em< / li >
< li > 10px = .625em< / li >
< / ul >
2023-11-08 09:34:00 +08:00
< p > 简化 rem 到 px 的换算，因为每个 rem 单位都是 10px 的倍数< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > html< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 62.5%< span class = "token punctuation" > ;< / span > < span class = "token comment" > /* 这会将默认的 16px 缩小为 10px */< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 也可以使用 js 检测设置< / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // set 1rem = viewWidth / 10< / span >
< span class = "token keyword" > function< / span > < span class = "token function" > setRemUnit< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > var< / span > docEl < span class = "token operator" > =< / span > document< span class = "token punctuation" > .< / span > documentElement< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > rem < span class = "token operator" > =< / span > docEl< span class = "token punctuation" > .< / span > clientWidth < span class = "token operator" > /< / span > < span class = "token number" > 10< / span > < span class = "token punctuation" > ;< / span >
docEl< span class = "token punctuation" > .< / span > style< span class = "token punctuation" > .< / span > fontSize < span class = "token operator" > =< / span > rem < span class = "token operator" > +< / span > < span class = "token string" > "px"< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "resize"< / span > < span class = "token punctuation" > ,< / span > setRemUnit< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "pageShow"< / span > < span class = "token punctuation" > ,< / span > < span class = "token keyword" > function< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > e< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > e< span class = "token punctuation" > .< / span > persisted< span class = "token punctuation" > )< / span > < span class = "token function" > setRemUnit< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2023-11-08 09:34:00 +08:00
< h1 id = "less-常用" > < a href = "#less-常用" class = "headerlink" title = "less 常用" > < / a > less 常用< / h1 > < h2 id = "变量" > < a href = "#变量" class = "headerlink" title = "变量" > < / a > 变量< / h2 > < p > LESS 中的变量为完全的 < code > 常量< / code > ，所以只能定义一次< / p >
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @nice-blue< span class = "token punctuation" > :< / span > < / span > #5B83AD< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @light-blue< span class = "token punctuation" > :< / span > < / span > < span class = "token variable" > @nice-blue< / span > < span class = "token operator" > +< / span > #111< span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > #header< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @light-blue< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 输出< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > #header< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #6c94be< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "混合" > < a href = "#混合" class = "headerlink" title = "混合" > < / a > 混合< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .bordered< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > border-top< / span > < span class = "token punctuation" > :< / span > dotted 1px black< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > solid 2px black< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 使用< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > #menu a< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #111< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .bordered< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
< span class = "token selector" > .post a< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > red< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .bordered< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 带参< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .border-radius (< span class = "token variable" > @radius< / span > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -moz-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > #header {< br > .border-radius(4px);< br > }< / p >
< p > < code > @arguments< / code > 变量，包含了所有传递进来的参数. 如果你不想单独处理每一个参数< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .box-shadow (< span class = "token variable" > @x< / span > : 0, < span class = "token variable" > @y< / span > : 0, < span class = "token variable" > @blur< / span > : 1px, < span class = "token variable" > @color< / span > : #000)< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -moz-box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
.< span class = "token function" > box-shadow< / span > < span class = "token punctuation" > (< / span > 2px< span class = "token punctuation" > ,< / span > 5px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 无参< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .wrap ()< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > text-wrap< / span > < span class = "token punctuation" > :< / span > wrap< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > pre< span class = "token operator" > -< / span > wrap< span class = "token punctuation" > ;< / span >
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > < span class = "token operator" > -< / span > moz< span class = "token operator" > -< / span > pre< span class = "token operator" > -< / span > wrap< span class = "token punctuation" > ;< / span >
< span class = "token property" > word-wrap< / span > < span class = "token punctuation" > :< / span > break< span class = "token operator" > -< / span > word< span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
< span class = "token selector" > pre< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .wrap< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "lighten-和-darken" > < a href = "#lighten-和-darken" class = "headerlink" title = "lighten 和 darken" > < / a > lighten 和 darken< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @color-base< span class = "token punctuation" > :< / span > < / span > #3bafda< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @color-hover< span class = "token punctuation" > :< / span > < / span > lighten < span class = "token punctuation" > (< / span > < span class = "token variable" > @color-primary< / span > < span class = "token punctuation" > ,< / span > 10%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token variable" > @color-focus< span class = "token punctuation" > :< / span > < / span > darken < span class = "token punctuation" > (< / span > < span class = "token variable" > @color-primary< / span > < span class = "token punctuation" > ,< / span > 10%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "contrast" > < a href = "#contrast" class = "headerlink" title = "contrast" > < / a > contrast< / h2 > < p > 选择两种颜色中哪一种颜色与另一种颜色形成最大对比。< / p >
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > p< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > a< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > contrast< / span > < span class = "token punctuation" > (< / span > #bbbbbb< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token comment" > //output: black< / span >
< span class = "token property" > b< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > contrast< / span > < span class = "token punctuation" > (< / span > #222222< span class = "token punctuation" > ,< / span > #101010< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token comment" > //output: white< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2023-11-08 09:34:00 +08:00
< h2 id = "JavaScript-表达式" > < a href = "#JavaScript-表达式" class = "headerlink" title = "JavaScript 表达式" > < / a > JavaScript 表达式< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @var< span class = "token punctuation" > :< / span > < / span > ` < span class = "token string" > "hello"< / span > .< span class = "token function" > toUpperCase< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span > < span class = "token string" > "!"< / span > `< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @height< span class = "token punctuation" > :< / span > < / span > `document.body.clientHeight`< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2023-11-08 09:34:00 +08:00
< h2 id = "amp-父选择器" > < a href = "#amp-父选择器" class = "headerlink" title = "& 父选择器" > < / a > & 父选择器< / h2 > < p > < code > & < / code > 只能代表父元素，不能代表父亲的父辈元素，施加改性类或伪类< / p >
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > a< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > blue< span class = "token punctuation" > ;< / span >
< span class = "token selector" > & :hover< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > green< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "重复父类名" > < a href = "#重复父类名" class = "headerlink" title = "重复父类名" > < / a > 重复父类名< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .button< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > & -ok< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "ok.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > & -cancel< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "cancel.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > & -custom< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "custom.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 13:45:34 +08:00
< / article >
2023-11-06 16:05:27 +08:00
2023-11-21 16:58:32 +08:00
< link rel = "stylesheet" href = "/css/727b3e4f.css" >
2023-11-06 16:05:27 +08:00
< div class = "copyright" >
2023-11-24 16:47:58 +08:00
< a target = "_blank" href = "https://mozzie.cn/2023/11/06/clpcdqm3h0007cvz3289m71c7/" >
2023-11-06 16:05:27 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" >
< g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" > < / path >
< path d = "M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" > < / path >
< path d = "M3 6v13" > < / path >
< path d = "M12 6v13" > < / path >
< path d = "M21 6v13" > < / path >
< / g >
< / svg >
< span > css奇技淫巧< / span >
< / a >
< ul >
< li >
2023-11-11 18:50:08 +08:00
< span > 作者< / span >
2023-11-06 16:05:27 +08:00
< p > Mozzie< / p >
< / li >
< li >
2023-11-11 18:50:08 +08:00
< span > 发布于< / span >
2023-11-24 16:47:58 +08:00
< p > 2023-11-06< / p >
2023-11-06 16:05:27 +08:00
< / li >
< li >
2023-11-11 18:50:08 +08:00
< span > 许可< / span >
2023-11-06 16:05:27 +08:00
< p > < a target = "_blank" rel = "noopener" href = "https://creativecommons.org/licenses/by-nc-sa/4.0/" > CC BY-NC-SA 4.0< / a > < / p >
< / li >
< / ul >
< / div >
< script src = "/js/31d6cfe0.js" > < / script >
<!-- 评论 -->
< div id = "vcomments" > < / div >
< / div >
< / main >
< / div >
< div class = "meta-container" >
< div class = "toc-wrapper content-dialog" >
< p class = "catalog" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" >
< g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M4 6h16" > < / path >
< path d = "M4 12h16" > < / path >
< path d = "M4 18h12" > < / path >
< / g >
< / svg >
2023-11-11 18:50:08 +08:00
< span > 目录< / span >
2023-11-06 16:05:27 +08:00
< / p >
<!-- 文章toc -->
2023-11-08 09:34:00 +08:00
< ol class = "toc" > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#grid-%E5%B8%83%E5%B1%80" > < span class = "toc-number" > 1.< / span > < span class = "toc-text" > grid 布局< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#repeat" > < span class = "toc-number" > 1.1.< / span > < span class = "toc-text" > repeat()< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#fr" > < span class = "toc-number" > 1.2.< / span > < span class = "toc-text" > fr< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#grid-template-areas" > < span class = "toc-number" > 1.3.< / span > < span class = "toc-text" > grid-template-areas< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#item-%E5%AE%9A%E4%BD%8D" > < span class = "toc-number" > 1.4.< / span > < span class = "toc-text" > item 定位< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F-IE9" > < span class = "toc-number" > 2.< / span > < span class = "toc-text" > 硬件加速(IE9+)< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%89%93%E5%8D%B0-shield-%E5%BE%BD%E7%AB%A0" > < span class = "toc-number" > 3.< / span > < span class = "toc-text" > 控制台打印 shield 徽章< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#css-%E5%88%A4%E6%96%AD-input-%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA" > < span class = "toc-number" > 4.< / span > < span class = "toc-text" > css 判断 input 是否为空< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.< / span > < span class = "toc-text" > 居中< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#transform-%E5%A4%A7%E6%B3%95" > < span class = "toc-number" > 5.1.< / span > < span class = "toc-text" > transform 大法< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#0000-%E5%A4%A7%E6%B3%95" > < span class = "toc-number" > 5.2.< / span > < span class = "toc-text" > 0000 大法< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E5%A6%82%E4%BD%95%E8%AE%A9-img-%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.3.< / span > < span class = "toc-text" > 如何让 img 垂直居中< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#ul-%E4%B8%8B-li-%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.4.< / span > < span class = "toc-text" > ul 下 li 居中< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#js-%E9%9A%8F%E6%9C%BA%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AF" > < span class = "toc-number" > 6.< / span > < span class = "toc-text" > js 随机渐变背景< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#css-%E4%B8%89%E8%A7%92%E5%BD%A2" > < span class = "toc-number" > 7.< / span > < span class = "toc-text" > css 三角形< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#1px-%E7%A5%9E%E8%BF%B9" > < span class = "toc-number" > 8.< / span > < span class = "toc-text" > 1px 神迹< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#pc-%E7%AB%AF%E6%9C%80%E4%BC%98%E8%A7%A3" > < span class = "toc-number" > 8.1.< / span > < span class = "toc-text" > pc 端最优解< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-transform" > < span class = "toc-number" > 8.2.< / span > < span class = "toc-text" > 移动端 - 媒体查询 + transform< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-%E4%BC%AA%E7%B1%BB" > < span class = "toc-number" > 8.3.< / span > < span class = "toc-text" > 移动端 - 媒体查询 + 伪类< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E6%A8%AA%E7%AB%96%E5%B1%8F%E9%80%82%E9%85%8D" > < span class = "toc-number" > 9.< / span > < span class = "toc-text" > 横竖屏适配< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E5%83%8F%E7%B4%A0" > < span class = "toc-number" > 10.< / span > < span class = "toc-t
2023-11-06 16:05:27 +08:00
< / div >
< / div >
< / div >
< script >
2023-11-08 10:11:56 +08:00
window.page = {
use: ''
}
2023-11-06 16:05:27 +08:00
window.katex = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
}
window.mermaid = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-15 10:21:41 +08:00
theme: "",
2023-11-06 16:05:27 +08:00
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
}
window.valine = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
avatar: 'monsterid',
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
serverURLs: '//tismit6u.api.lncldglobal.com'
};
< / script >
2023-11-21 16:58:32 +08:00
< script src = "/js/e8ca3347.js" > < / script >
2023-11-06 16:05:27 +08:00
< / main >
< / body >
< script >
window.i18n = {
2023-11-11 18:50:08 +08:00
"tip-collapse": "折叠",
"tip-expand": "展开",
"text-select": "选择",
"text-move": "移动",
"text-esc": "关闭",
"tip-status-done": "完成",
"tip-status-doing": "进行中",
"tip-status-todo": "待办",
"tip-status-other": "废弃",
"tip-status-default": "默认",
"tip-roadmap-today": "定位今天",
"text-search": "搜索...",
"text-today": "今天",
2023-11-06 16:05:27 +08:00
// month
2023-11-11 18:50:08 +08:00
"January": "一月",
"February": "二月",
"March": "三月",
"April": "四月",
"May": "五月",
"June": "六月",
"July": "七月",
"August": "八月",
"September": "九月",
"October": "十月",
"November": "十一月",
"December": "十二月",
2023-11-06 16:05:27 +08:00
}
< / script >
2023-11-06 16:14:34 +08:00
< script src = "/js/58c91c4e.js" > < / script >
2023-11-06 16:05:27 +08:00
< / html >
