CSS小技巧收藏

FWHeart 发布于2019-08-30 12:44 / 3145人阅读

摘要：居中对齐很多时候我们需要把一个元素在其父级容器里水平垂直居中对齐。这是一个非常不错的习惯，但常常只有字体粗细大小的不同，在这里我们为每个章节加上这样的标注。以下代码在容器内有效。

最后更新于：2016-01-22 17:30

以下是我积累的一些常用的css代码，会不断更新，最新的代码会显示在最前面，同时我也会提供最新更新日期以便查阅。

链接样式

a:link { color: red; }
a:visted { color: purple; }

通过:link给未访问的链接设置样式，通过:visted给已被点击过的链接设置样式。这样能让用户区分他自己点击过的链接。

居中对齐

很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法：

1.在知道子元素宽度与高度的情况下进行居中，采用位置定位：absolute + margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -50px;
}

2.在不知道子元素高与宽的情况下，采用位置定位：absolute + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.采用flexbox进行居中对齐

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

选择某范围内的子元素

选择5-10的子元素

ul li:nth-child(n+5):nth-child(-n+10) {
    background-color: red;
}

演示地址：http://codepen.io/moyu/pen/KVvzbX

最佳适应图片

这段代码非常适用于给文章列表加缩略图的时候用，能最好的避免图片比例不协调的问题，统一排版。你可以随意更改width与height来查看效果。

.thumbnail {
    width: 200px;
    height: 150px;
    background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

演示地址：http://codepen.io/moyu/pen/JGyKGQ

占满全屏

.fullScreen {
    width: 100vw;
    height: 100vh;
}

演示地址：http://lab.liuxinyu.me/fullbg/index.html

自动分章节

文章正文里我们经常采用

这样的标签来分章，分节。这是一个非常不错的习惯，但常常只有字体粗细大小的不同，在这里我们为每个章节加上1,2,3这样的标注。以下代码在.document容器内有效。(其他需要计数的模块也可以用这样的方法)

演示地址：http://codepen.io/moyu/pen/NxvrjX

自适应视频播放器

当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的，而且你在用手机浏览的时候视频播放器还变形了，以下代码自动让播放器按16:9的比例显示并自适应各个设备。

CSS代码：

.media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML代码：

云服务器 GPU云服务器 css技巧小技巧小技巧全集 PowerShell小技巧

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

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

css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0
学习实践 - 收藏集 - 掘金

摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...

mikyou 2019-08-29 12:50 评论0 收藏0