你值得收藏的66个实用的css开发技巧之布局技巧
作为一枚前端开发人,写代码就像是我们在写作一样,同样的需要技巧。试想如果你的代码乱七八糟,没有头绪,还冗余,出现大量的无用代码,任何人看了都想对你有一种几天的感觉。所以一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,更容易让人维护,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下自己在前端开发中使用到的一些CSS开发技巧,希望能够帮助你写出耳目一新、容易理解、舒服自然的代码。全文共66个css开发技巧,因为文章有点长,为了减少大家阅读疲劳感,所以我打算将知识点分为五篇文章来实例讲解,当然,最重要的是能够学完之后对大家有用,应用到实战开发中。
目录
既然写文章有这么多的写作技巧,那么我也需要对CSS开发技巧整理一下,起个易记的名字。
- Layout Skill:布局技巧
- Behavior Skill:行为技巧
- Color Skill:色彩技巧
- Figure Skill:图形技巧
- Component Skill:组件技巧
接下来我们先讲Layout Skill:布局技巧
备注
- 代码只作演示用途,不会详细说明语法
- 兼容项点击链接即可查看当前属性的浏览器兼容数据,自行根据项目兼容需求考虑是否使用
- 以下代码全部基于CSS进行书写,没有任何JS代码,没有特殊说明的情况下所有属性和方法都是CSS类型
- 一部分技巧是自己探讨出来的,另一部分技巧是参考各位前端大神们的,都是一个互相学习的工程,大家一起进步
Layout Skill
使用vw定制rem自适应布局
要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制
场景:rem页面布局(不兼容低版本移动端系统)
兼容:vw、calc()
/* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); }
使用:nth-child()选择指定元素
要点:通过:nth-child()筛选指定的元素设置样式
场景:表格着色、边界元素排版(首元素、尾元素、左右两边元素)
兼容::nth-child()
实例代码:
HTML
<div class="bruce flex-ct-x"> <ul class="specified-scope"> <li>10001</li> <li>10002</li> ... <li>10009</li> <li>10010</li> </ul> </div>
CSS
.specified-scope { width: 300px; li { padding: 0 20px; height: 40px; line-height: 40px; color: #fff; &:nth-child(odd) { background-color: $red; } &:nth-child(even) { background-color: $purple; } &:nth-child(n+6):nth-child(-n+10) { background-color: $green; } } }
效果展示:
使用writing-mode排版竖文
要点:通过writing-mode调整文本排版方向
场景:竖行文字、文言文、诗词
兼容:writing-mode
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>情</h3> <p>我见犹怜,<br>爱不释手。<br>雅俗共赏,<br>君子好逑。</p> </div> </div>
CSS
.vertical-text { writing-mode: vertical-rl; h3 { padding-left: 20px; font-weight: bold; font-size: 18px; color: $red; } p { line-height: 30px; color: $purple; } }
效果展示:
使用text-align-last对齐两端文本
要点:通过text-align-last:justify设置文本两端对齐
场景:未知字数中文对齐
兼容:text-align-last
实例代码:
HTML
<div class="bruce flex-ct-x"> <ul class="justify-text"> <li>账号</li> <li>密码</li> <li>电子邮件</li> <li>通讯地址</li> </ul> </div>
CSS
.justify-text { li { margin-top: 5px; padding: 0 20px; width: 100px; height: 40px; background-color: $red; line-height: 40px; text-align-last: justify; color: #fff; &:first-child { margin-top: 0; } } }
效果展示:
使用:not()去除无用属性
要点:通过:not()排除指定元素不使用设置样式
场景:符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)
兼容::not()
实例代码:
HTML
<div class="bruce flex-ct-x"> <ul class="cleared-attr"> <li class="first-line"> <span>A</span> <span>B</span> <span>C</span> <span>D</span> <span>E</span> </li> <li class="second-line"> <span>A</span> <span>B</span> <span>C</span> <span>D</span> <span>E</span> </li> </ul> </div>
CSS
.cleared-attr { li { height: 40px; line-height: 40px; } span { display: inline-block; color: $purple; } .first-line span:not(:last-child)::after { content: ","; } .second-line span:not(:nth-child(-n+3)) { display: none; } }
效果展示:
使用object-fit规定图像尺寸
要点:通过object-fit使图像脱离background-size的约束,使用来标记图像背景尺寸
场景:图片尺寸自适应
兼容:object-fit
实例代码:
<div class="bruce flex-ct-y"> <ul class="image-size"> <li> <h3>Cover</h3> <img src="/static/codepen/ab-1.jpg" class="cover"> </li> <li> <h3>Contain</h3> <img src="/static/codepen/ab-1.jpg" class="contain"> </li> <li> <h3>Fill</h3> <img src="/static/codepen/ab-2.jpg" class="fill"> </li> <li> <h3>ScaleDown</h3> <img src="/static/codepen/ab-2.jpg" class="scale-down"> </li> </ul> </div>
CSS
h1 { line-height: 50px; font-weight: bold; font-size: 30px; color: $red; } .image-size { display: flex; justify-content: space-between; width: 1000px; height: 300px; li { width: 200px; } h3 { height: 40px; line-height: 40px; text-align: center; font-weight: bold; font-size: 16px; } img { width: 100%; height: 260px; background-color: $green; &.cover { object-fit: cover; } &.contain { object-fit: contain; } &.fill { object-fit: fill; } &.scale-down { object-fit: scale-down; } } }
效果展示:
使用overflow-x排版横向列表
要点:通过flexbox或inline-block的形式横向排列元素,对父元素设置overflow-x:auto横向滚动查看
场景:横向滚动列表、元素过多但位置有限的导航栏
兼容:overflow-x
实例代码:
<div class="bruce flex-ct-y"> <div class="horizontal-list flex"> <ul> <li>Alibaba</li> <li>Tencent</li> <li>Baidu</li> <li>Jingdong</li> <li>Ant</li> <li>Netease</li> <li>Meituan</li> <li>ByteDance</li> <li>360</li> <li>Sina</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>Alibaba</li> <li>Tencent</li> <li>Baidu</li> <li>Jingdong</li> <li>Ant</li> <li>Netease</li> <li>Meituan</li> <li>ByteDance</li> <li>360</li> <li>Sina</li> </ul> </div> </div>
CSS
.horizontal-list { overflow: hidden; width: 300px; height: 100px; ul { overflow-x: scroll; cursor: pointer; &::-webkit-scrollbar { height: 10px; } &::-webkit-scrollbar-track { background-color: #f0f0f0; } &::-webkit-scrollbar-thumb { border-radius: 5px; background-color: $red; } } li { overflow: hidden; margin-left: 10px; height: 90px; background-color: $purple; line-height: 90px; text-align: center; font-size: 16px; color: #fff; &:first-child { margin-left: 0; } } } .flex { ul { display: flex; flex-wrap: nowrap; justify-content: space-between; } li { flex-shrink: 0; flex-basis: 90px; } } .inline { margin-top: 10px; height: 102px; ul { overflow-y: hidden; white-space: nowrap; } li { display: inline-block; width: 90px; } }
效果展示:
使用text-overflow控制文本溢出
要点:通过text-overflow:ellipsis对溢出的文本在末端添加…
场景:单行文字溢出、多行文字溢出
兼容:text-overflow、line-clamp、box-orient
实例代码:
HTML
<div class="bruce flex-ct-y"> <p class="single-line sl-ellipsis">CSS非常有趣和搞怪,可以做一些JS也能做的事情</p> <p class="multiple-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> <p class="multiple-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> </div>
CSS
p[class*=-line] { line-height: 30px; font-size: 20px; } .single-line { width: 200px; } .multiple-line { margin-top: 10px; width: 400px; text-align: justify; } .sl-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ } .mls-ellipsis { overflow: hidden; position: relative; max-height: 90px; &::after { position: absolute; right: 0; bottom: 0; padding-left: 40px; background: linear-gradient(to right, transparent, #fff 50%); content: "..."; } }
效果展示:
使用transform描绘1px边框
要点:分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before或::after和transform模拟细腻的1px边框
场景:容器1px边框
兼容:transform
实例代码:
HTML
<div class="bruce flex-ct-y"> <div class="onepx-border normal">1px</div> <div class="onepx-border thin">0.5px</div> </div>
CSS
.onepx-border { margin-top: 10px; width: 200px; height: 80px; cursor: pointer; line-height: 80px; text-align: center; font-weight: bold; font-size: 50px; color: $red; &:first-child { margin-top: 0; } } .normal { border: 1px solid $red; } .thin { position: relative; &::after { position: absolute; left: 0; top: 0; border: 1px solid $red; width: 200%; height: 200%; content: ""; transform: scale(.5); transform-origin: left top; } }
使用transform翻转内容
要点:通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)
场景:内容翻转
兼容:transform
实例代码:
HTML
<div class="bruce flex-ct-x"> <ul class="horizontal-flip"> <li>正常文本</li> <li class="x-axis">水平翻转</li> <li class="y-axis">垂直翻转</li> <li class="reverse">倒序翻转</li> </ul> </div>
CSS
.horizontal-flip { li { position: relative; margin-top: 10px; width: 121px; height: 51px; line-height: 51px; text-align: center; font-weight: bold; font-size: 30px; color: $red; &::before, &::after { position: absolute; background-color: $purple; content: ""; } &:first-child { margin-top: 0; } } } .x-axis { transform: scale3d(1, -1, 1); &::after { left: 0; top: 25px; width: 100%; height: 1px; } } .y-axis { transform: scale3d(-1, 1, 1); &::after { left: 60px; top: 0; width: 1px; height: 100%; } } .reverse { transform: scale3d(-1, -1, 1); &::before { left: 0; top: 25px; width: 100%; height: 1px; } &::after { left: 60px; top: 0; width: 1px; height: 100%; } }
效果展示:
使用letter-spacing排版倒序文本
要点:通过letter-spacing设置负值字体间距将文本倒序
场景:文言文、诗词
兼容:letter-spacing
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="reverse-text">恭喜发财</div> </div>
CSS
.reverse-text { font-weight: bold; font-size: 50px; color: $red; letter-spacing: -100px; // letter-spacing最少是font-size的2倍 }
效果展示:
使用margin-left排版左重右轻列表
要点:使用flexbox横向布局时,最后一个元素通过margin-left:auto实现向右对齐
场景:右侧带图标的导航栏
兼容:margin
实例代码:
HTML
<div class="bruce flex-ct-x"> <ul class="left-list"> <li>Alibaba</li> <li>Tencent</li> <li>Baidu</li> <li>Jingdong</li> <li>Ant</li> <li>Netease</li> </ul> </div>
CSS
.left-list { display: flex; align-items: center; padding: 0 10px; width: 600px; height: 60px; background-color: $green; li { padding: 0 10px; height: 40px; background-color: $orange; line-height: 40px; font-size: 16px; color: #fff; & + li { margin-left: 10px; } &:last-child { margin-left: auto; } } }
效果展示:
结束语
以上就是今天码云笔记为大家整理的你值得收藏的66个实用的css开发技巧第一篇,希望对你有帮助,接下来为大家整理css开发技巧之行为技巧第二篇未完待续。。。
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 你值得收藏的66个实用的css开发技巧之布局技巧