css技巧收集
1. 使用 :not()
为导航添加/取消边框
传统的方法为导航栏添加边框:
/* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; }
用css的:not()实现:
.nav li:not(:last-child) { border-right: 1px solid #666; }
减少了很多代码实现了相同的功能。
2. 垂直居中(任何元素)
html, body { height: 100%; margin: 0; } /*要设置垂直居中的元素*/ element { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
3. 使用负的 nth-child
选取元素
使用负的 nth-child
在 1 到 n 之间选择元素:
li { display: none; }
/* 使用负的 nth-child
在 1 到 n 之间的元素,选择第1到3个元素就是nth-child(-n+3) */
li:nth-child(-n+3) {
display: block;
}使用 :not()来做:
li:not(:nth-child(-n+3)) { display: none; }
4. 使用 Flexbox 来避免 Margin Hacks
在做多列布局的时候,可以通过 Flexbox 的 space-between
属性来避免nth-
、first-
、 last-child
等 hacks:
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
这样,列之间的空白就会被均匀的填满。
css技巧收集的更多相关文章
- 最常用的CSS技巧收集笔记
1.重置浏览器的字体大小 重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...
- CSS技巧收集——巧用滤镜
最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二 ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 最全的CSS浏览器兼容问题【CSS技巧 】
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- (转) 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- DelphiXE2 DataSnap开发技巧收集
DelphiXE2 DataSnap开发技巧收集 作者: 2012-08-07 09:12:52 分类:Delphi 标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
随机推荐
- C# 利用占位符替换word中的字符串和添加图片
利用占位符替换word中的字符串和添加图片 ///<summary> /// 替换word模板文件内容,包括表格中内容 /// 调用如下:WordStr ...
- 荣品四核4412开发板的USB摄像头问题
RP4412开发板是荣品电子研发的一款三星四核Exynos4412评估板开发板,支持WIFI+LAN上网.蓝牙4.0.4G上网.500万自动对焦摄像头.GPS.网卡.音频,1080P HDMI音视频同 ...
- asp.net MVC之 自定义过滤器(Filter) - shuaixf
一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration :缓存的时间, 以 ...
- iOS常用方法
1.磁盘总空间大小 + (CGFloat)diskOfAllSizeMBytes { CGFloat size = 0.0; NSError *error; NSDiction ...
- layout内容整理
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- python网络编程【二】(使用UDP)
UDP通信几乎不使用文件对象,因为他们往往不能为数据如何发送和接受提供足够的控制.下面是一个基本的UPD客户端: #!/usr/bin/env python import socket,sys hos ...
- JSP内置对象---用户登录页面(get和post)
Login.jsp 页面: <%@ page language="java" import="java.util.*" contentType=" ...
- 基于H5的移动端开发,window.location.href在IOS系统无法触发问题
最近负责公司的微信公众号开发项目,基于H5进行开发,某些页面window.location.href在Android机上能正常运行而IOS系统上无法运行,导致无法重定向到指定页面,查了好久终于找到方法 ...
- 支付宝集成后报错ALI38173
原因: 支付时传的参数不正确. 出现这个错误, 说明支付功能已经集成成功, 前后台核对下参数就能找到原因了.
- linux查看系统命令
[root@server ~] # uname –a # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@server ~] # hea ...