12 个 CSS 高级技巧汇总 12 CSS Protips

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看100 回复回复4 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 100|回复: 4
收起左侧

12 个 CSS 高级技巧汇总 12 CSS Protips

[复制链接]
h5lover 发表于 2016-10-19 14:46:07 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

下面这些CSS高级技巧,一般人我可不告诉他哦。

  • 使用 :not() 在菜单上应用/取消应用边框
  • 给body添加行高
  • 所有一切都垂直居中
  • 逗号分隔的列表
  • 使用负的 nth-child 选择项目
  • 对图标使用SVG
  • 优化显示文本
  • 对纯CSS滑块使用 max-height
  • 继承 box-sizing
  • 表格单元格等宽
  • 用Flexbox摆脱外边距的各种hack
  • 使用属性选择器用于空链接


12 个 CSS 高级技巧汇总 12 CSS Protips

12 个 CSS 高级技巧汇总 12 CSS Protips - 敏捷大拇指 - 12 个 CSS 高级技巧汇总 12 CSS Protips


A collection of tips to help take your CSS skills pro.

For other great lists check out @sindresorhus's curated list of awesome lists.





1、使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

[CSS] 纯文本查看 复制代码
/* add border */
.nav li {
  border-right: 1px solid #666;
}


……然后再除去最后一个元素……

[CSS] 纯文本查看 复制代码
//* remove border */

.nav li:last-child {
  border-right: none;
}


……可以直接使用 :not() 伪类来应用元素:

[CSS] 纯文本查看 复制代码
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}


这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

[CSS] 纯文本查看 复制代码
..nav li:first-child ~ li {

  border-left: 1px solid #666;
}





2、给 body添加行高

你不需要分别添加 line-height 到每个 <p>,<h*>等。只要添加到 body 即可:

[CSS] 纯文本查看 复制代码
body {
  line-height: 1;
}


这样文本元素就可以很容易地从 body 继承。




3、所有一切都垂直居中

[CSS] 纯文本查看 复制代码
要将所有元素垂直居中,太简单了:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}


看,是不是很简单。

注:在IE11中要小心flexbox。




4、逗号分隔的列表

让HTML列表项看上去像一个真正的,用逗号分隔的列表:

[CSS] 纯文本查看 复制代码
ul > li:not(:last-child)::after {
  content: ",";
}


对最后一个列表项使用 :not() 伪类。




5、使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

[CSS] 纯文本查看 复制代码
li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}


就是这么容易。




6、对图标使用SVG

我们没有理由不对图标使用SVG:

[CSS] 纯文本查看 复制代码
.logo {
  background: url("logo.svg");
}


SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。




7、优化显示文本

有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:

[CSS] 纯文本查看 复制代码
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。




8、对纯CSS滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块:

[CSS] 纯文本查看 复制代码
.slider ul {
  max-height: 0;
  overlow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}





9、继承 box-sizing

让 box-sizing 继承 html:

[CSS] 纯文本查看 复制代码
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。




10、表格单元格等宽

表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:

[CSS] 纯文本查看 复制代码
.calendar {
  table-layout: fixed;
}





11、用Flexbox摆脱外边距的各种hack

当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:

[CSS] 纯文本查看 复制代码
.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}


现在,列表分隔符就会在均匀间隔的位置出现。




12、使用属性选择器用于空链接

当 <a> 元素没有文本值,但 href 属性有链接的时候显示链接:

[CSS] 纯文本查看 复制代码
a[href^="http"]:empty::before {
  content: attr(href);
}


相当方便。




支持

这些高级技巧在Chrome、Firefox、Safari、Edge的当前版本,以及IE11中都能有效工作。




原文:12 CSS Protips
译者:码农网 – 小峰

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 多谢贡献内容,内容太详实啦!.

查看全部评分

本帖被以下淘专辑推荐:

美人虞 发表于 2016-10-19 19:59:08 | 显示全部楼层
原文中不只这12个
智能科技 发表于 2016-10-19 23:50:22 | 显示全部楼层
Use rem for Global Sizing; Use em for Local Sizing
瑶池 发表于 2016-10-21 00:50:03 | 显示全部楼层
本帖最后由 瑶池 于 2016-10-21 01:07 编辑
美人虞 发表于 2016-10-19 19:59
原文中不只这12个

我找到了全部的中文翻译内容,一会贴出来。

https://github.com/AllThingsSmit ... /translations/zh-CN

瑶池 发表于 2016-10-21 00:50:21 | 显示全部楼层
本帖最后由 瑶池 于 2016-10-21 01:06 编辑





CSS 专业的技巧
Awesome

提示的收集,以帮助提升你的CSS技巧。

对于其他大名单退房 @sindresorhus 的策展的名单 真棒名单





目录

  • 专业的技巧
  • 支持情况
  • 贡献准则





专业的技巧

  • 使用CSS复位
  • 继承 box-sizing
  • 使用 :not() 选择器来决定表单是否显示边框
  • 为 body 元素添加行高
  • 垂直居中任何元素
  • 逗号分隔的列表
  • 使用负的 nth-child 来选择元素
  • 使用 SVG 图标
  • 使用 “形似猫头鹰” 的选择器
  • 使用 max-height 来建立纯 CSS 的滑块
  • 创造格子等宽的表格
  • 利用 Flexbox 去除多余的外边距
  • 利用属性选择器来选择空链接
  • 给 “预设” 链接定义样式
  • 一致的垂直节奏
  • 内在比例盒
  • 为破碎图象定义样式
  • 用 rem 来调整全局大小;用 em 来调整局部大小
  • 隐藏没有静音、自动播放的影片
  • 使用选择器 :root 来控制字体弹性
  • 将font-size关于表单元素为更好的移动体验





1、使用CSS复位

CSS重置帮助实施用干净的石板为造型元素在不同的浏览器风格的一致性。您可以使用CSS复位库像Normalize等,也可以使用一个更简化的复位方法:

[CSS] 纯文本查看 复制代码
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


现在的元素将被剥离利润率和填充和box-sizing,您可以管理与CSS盒模型布局。

演示 Demo

注意:如果按照“继承 box-sizing”尖下面你可能会选择不包含在你的CSS复位box-sizing财产。




2、继承 box-sizing

从 html 元素继承 box-sizing 就好:

[CSS] 纯文本查看 复制代码
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


如此在插件或其它组件里改变 box-sizing 变得简单。




3、使用 :not() 选择器来决定表单是否显示边框

与其加上边框……

[CSS] 纯文本查看 复制代码
/* 添加边框 */
.nav li {
  border-right: 1px solid #666;
}


……然后去掉最后一个元素的边框……

[CSS] 纯文本查看 复制代码
/* 去掉边框 */
.nav li:last-child {
  border-right: none;
}


……不如使用 :not() 伪类来达成同样的效果:

[CSS] 纯文本查看 复制代码
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}


当然,也可以使用 .nav li + li 或者 .nav li:first-child ~ li 来达成,但是 :not() 选择器的方式更清晰明了,一目了然。

演示 Demo




4、为 body 元素添加行高

不必为每一个 <p>,<h*>,等元素逐一添加 line-height,为 body 元素添加就好了:

[CSS] 纯文本查看 复制代码
body {
  line-height: 1.5;
}


文本元素可以很自然地继承 body 的样式。

演示 Demo




5、垂直居中任何元素

这不是黑魔法,真的可以垂直居中任何元素:

[CSS] 纯文本查看 复制代码
html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}


这还不够?垂直方向,水平方向……任何元素,任何时间,任何地方?CSS-Tricks 有篇好文 讲到了各种居中的技巧。

注意: IE11 对 flexbox 的支持有点 bug

演示 Demo




6、逗号分隔的列表

列表的每项都由逗号分隔:

[CSS] 纯文本查看 复制代码
ul > li:not(:last-child)::after {
  content: ",";
}


使用了 :not() 伪类,因此最后一项没加逗号。

注意:这一技巧对于无障碍,屏幕阅读器而言并不理想,需要注意。




7、使用负的 nth-child 来选择元素

使用负的 nth-child 可以选择 1 至 n 个元素。

[CSS] 纯文本查看 复制代码
li {
  display: none;
}

/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}


或许你已经掌握了“如何使用 :not()”,试下这个:

[CSS] 纯文本查看 复制代码
/* 选择第 1 至第 3 个元素并显示出来 */
li:not(:nth-child(-n+3)) {
  display: none;
}


就是这么简单。

演示 Demo




8、使用 SVG 图标

没有理由不使用 SVG 图标:

[CSS] 纯文本查看 复制代码
.logo {
  background: url("logo.svg");
}


SVG 在所有分辨率下都可以良好缩放,IE9+ 及其它所有浏览器都支持,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。

注意: 针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:

[CSS] 纯文本查看 复制代码
.no-svg .icon-only:after {
  content: attr(aria-label);
}





9、使用 “形似猫头鹰” 的选择器

这个名字可能比较陌生,不过全局选择器 (*) 和 相邻兄弟选择器 (+) 一起使用,效果非凡:

[CSS] 纯文本查看 复制代码
* + * {
  margin-top: 1.5em;
}


在此示例中,遵循其他元素的文档流中的所有元素将都接收上边距 margin-top: 1.5em 的样式。

更多 “形似猫头鹰” 的选择器,可参考 A List Apart 上面 Heydon Pickering 的文章

演示 Demo




10、使用 max-height 来建立纯 CSS 的滑块

max-height 与 overflow hidden 一起来建立纯 CSS 的滑块:

[CSS] 纯文本查看 复制代码
.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}


移入滑块元素时增大它的 max-height 的值,便可以显示溢出部分。




11、创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽:

[CSS] 纯文本查看 复制代码
.calendar {
  table-layout: fixed;
}


无痛的 table 布局。

演示 Demo




12、利用 Flexbox 去除多余的外边距

与其使用 nth-, first-, 和 last-child 去除列之间多余的间隙,不如使用 flexbox 的 space-between 属性:

[CSS] 纯文本查看 复制代码
.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}


列之间的间隙相等,并且首尾没有多余的间隙。




13、利用属性选择器来选择空链接

当 <a> 元素没有文本内容,但是有 href 属性的时候,可以显示它的 href 链接:

[CSS] 纯文本查看 复制代码
a[href^="http"]:empty::before {
  content: attr(href);
}


相当简便。

演示 Demo




14、给 “预设” 链接定义样式

给 “预设” 链接定义样式:

[CSS] 纯文本查看 复制代码
a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}


通过 CMS 系统插入的链接,通常没有 class 属性,以上样式可以甄别它们,而且不会影响其它样式。




15、一致的垂直节奏

通用选择器 (*) 跟元素一起使用,可以保持一致的垂直节奏:

[CSS] 纯文本查看 复制代码
.intro > * {
  margin-bottom: 1.25rem;
}


一致的垂直节奏可以提供视觉美感,增强内容的可读性。




16、内在比例盒

要创建具有内在比一个盒子,所有你需要做的就是应用顶部或底部填充,从一个div:

[CSS] 纯文本查看 复制代码
.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;  
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


使用20%的填充使得框等于其宽度的20%的高度。不管视口的宽度,子元素的div将保持其宽高比(100%/ 20%= 5:1)。

演示 Demo




17、为破碎图象定义样式

只要一点CSS就可以美化破碎的图象:

[CSS] 纯文本查看 复制代码
img {  
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}


以添加伪元素的法则来显示使用者信息和虚线图像URL的引用:

[CSS] 纯文本查看 复制代码
img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}


了解更多关于这类样式的技巧 Ire Aderinokun原帖




18、用 rem 来调整全局大小;用 em 来调整局部大小

在根设置基本字体大小后 (html { font-size: 100%; }), 请设置为文本元素的字体大小 em:

[CSS] 纯文本查看 复制代码
h2 { 
  font-size: 2em;
}

p {
  font-size: 1em;
}


然后设置字体大小的模块 rem:

[CSS] 纯文本查看 复制代码
article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}


现在,每个模块变得条块分割,更容易、灵活的样式,以便于维护。




19、隐藏没有静音、自动播放的影片

这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音,则不显示视频:

[CSS] 纯文本查看 复制代码
video[autoplay]:not([muted]) {
  display: none;
}


再次,我們趁著使用的 :not() 偽類。




20、使用选择器:root来控制字体弹性

在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度,使用 :root :

[CSS] 纯文本查看 复制代码
:root {
  font-size: calc(1vw + 1vh + .5vmin);
}


现在,您可以利用基于计算的值root em单位:root:

[CSS] 纯文本查看 复制代码
body {
  font: 1em/1.6 sans-serif;
}


演示 Demo




21、将font-size关于表单元素为更好的移动体验

为了避免在HTML表单元素缩放移动浏览器(Safari浏览器的iOS,et AL。)当一个<选择>下拉被窃听,加上字体size的选择规则:

[CSS] 纯文本查看 复制代码
input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}





支持情况

这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表