CSS3实战之一些常用Tips

joywek 发布于2019-08-28 18:19 / 1270人阅读

摘要：本文为部分翻译文章，主要内容来自于，笔者自身也添加了一些自己的小的。设置自动居中任何一个元素的自动居中可以使用属性使用逗号分割列表使用负的属性选择元素使用作为使用作为图标可以达到自动缩放的效果。

本文为部分翻译文章，主要内容来自于：css-protips，笔者自身也添加了一些自己的小的Tips。

使用:not()属性为导航添加或者去除边框

传统的方法是首先为每个li标签添加标签：

/* add border */
.nav li {
  border-right: 1px solid #666;
}

然后用last-child伪属性作用于最后一个元素上：

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

代替的方法应该是使用not伪类去设置仅作用于部分元素的属性：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

为body添加line-height属性

往往需要为p、h*这类标签多带带的添加行高属性等，作为替代的是可以将它添加到body属性中，即：

body {
  line-height: 1;
}

通过这种方式文本类的元素可以自动继承该属性。

设置自动居中

任何一个元素的自动居中可以使用flex属性：

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

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

使用逗号分割列表

ul > li:not(:last-child)::after {
  content: ",";
}

使用负的nth-child属性选择元素

li {
  display: none;
}

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

使用SVG作为Icon

.logo {
  background: url("logo.svg");
}

使用SVG作为图标可以达到自动缩放的效果。

文本显示的优化

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

使用max-height在单纯的CSS滑块上

.slider ul {
  max-height: 0;
  overlow: hidden;
}

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

继承box-sizing属性

html {
  box-sizing: border-box;
}

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

设置Table元素等宽

.calendar {
  table-layout: fixed;
}

使用Flexbox作为Margin Hacks

.list {
  display: flex;
  justify-content: space-between;
}

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

为空的Links添加默认内容

a[href^="http"]:empty::before {
  content: attr(href);
}

防止iOS设备上的元素不可点击

在iOS设备中，有时候Click事件会失效，需要设置一个专门的cursor属性：

cursor:pointer

不过需要注意的是，这个属性不可设置在Android设备上，如果设置在Android设备上，点击的时候会出现一片蓝色的背景。

防止iOS设备上输入失焦

在iOS设备中，有时候如果弹出了键盘会导致输入框失焦，即键盘上的内容无法显示在输入框内，需要进行以下覆盖：

* {
  -webkit-user-select: none; /* prevent copy paste */
}

变为

input[type="text"] {
    -webkit-user-select: text;
}

GPU服务器海外云主机 linux的一些常用命令 tips tips1 小tips层 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111173.html

HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0