css
文章平均质量分 75
css
阿弥陀佛@么么哒
给我一个杠杆,我可以撬动地球
展开
-
css 居中
width: 512px; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; padding: 24px; -webkit-box-sizing: border-box; box-s...原创 2022-01-20 17:58:16 · 270 阅读 · 0 评论 -
详解flex布局
各种页面常见布局+知名网站实例分析+相关阅读推荐 阅前必看:本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局,待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读,还特意做了个锚点目录,一个个标题重写,真心累!(==后来发现掘金对文章的标题经过处理的,锚点不生效,在其他网站没问题的,移动端可以进去github的在线demo阅读)。各位读者如果发现问题或原创 2021-06-15 11:53:03 · 270 阅读 · 0 评论 -
flex布局
网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内...原创 2021-06-15 11:49:40 · 74 阅读 · 0 评论 -
position: -webkit-sticky; /* for Safari */ position: sticky;
<div class="entry-nav"> <div id="entryNav" class="title-nav-ul"><a href="javascript:" class="title-nav-li" title="Chrome杀了个回马枪">Chrome杀了个回马枪</a><a href="javascript:" class="title-nav-li" title="position:stic...原创 2021-06-15 11:42:36 · 1374 阅读 · 0 评论