放大屏幕,背景图不变

background: url(x.png) no-repeat 0 0;
background-image: -webkit-image-set(url(logo_db.png) 1x, url(2x.png) 2x); //-moz-image-set -o- -ms-其它浏览器兼容

鼠标移入背景加阴影移动(小米)

background: rgba(253, 253, 253, 0.06);
-webkit-box-shadow: 0 2px 27px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 27px rgba(0, 0, 0, 0.2);
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0);

渐变透明背景

background: linear-gradient(to bottom, #0C0A46, 50%, #23115F);

H5去除记住密码黄色背景(手机端)

<input type="email" name="email" autocomplete="off" /><br />

height和width单位:vh 和 vw

IE10+ 和现代浏览器都支持这两个单位。

vw Viewport宽度, 1vw 等于viewport宽度的1%
vh Viewport高度, 1vh 等于viewport高的的1%
vw和vh会随着viewport变化自动变化,再也不用js控制全屏了。 甚至有些人丧心病狂的字体大小都用vw和vh控制,来达到字体和viewport大小同步的效果

table里面内容等宽

table{
table-layout: fixed;
}

初始化box-sizing

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

margin重叠解决方案

1、父级元素bfc
2、父级元素给一个padding
3、父级元素给一个border
4、子元素前面加任意一个空的内联元素,(例如:span、nbsp等等)

文本显示优化

html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
上面代码可以让字体在我们的设备中最优显示!

在nth-child中使用负数

//nth-child中使用负数,可以选择小于等于某个数的值,例如:
li:nth-child(-n+4){background:red}
//小于等于4的li,显示为红色!

给空连接使用属性选择符

a[href^="http"]:empty::before {
content: attr(href);
}
//我们还可以给空a标签添加属性

使用Flexbox摆脱各种Margin Hacks

.list {
display: flex;
justify-content: space-between;
} .list .person {
flex-basis: 23%;
}
//实现侧栏时,我们不再需要各种nth-、first-和last-child等设置margin,可以使用Flexbox轻松实现均匀分布

任意元素垂直居中

html, body {
height: 100%;
margin:;
} body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}

CSS3选择器 :not()的应用技巧

/* 我们平时在书写导航栏分割线的时候,最后一个标签是没有分割线的 */
/* 先给所有添加右侧边框 */
.nav li {
border-right: 1px solid #666;
}
/* 再去除最后一个边框 */
.nav li:last-child {
border-right: none;
} /* 运用:not()之后如下书写 */
.nav li:not(:last-child) {
border-right: 1px solid #666;
} /* 还可以用~波浪选择器来实现 */
.nav li:first-child ~ li {
border-left: 1px solid #666;
} /* 我们在用逗号分隔的列表,最后一个让他没有逗号 */
ul > li:not(:last-child)::after {
content: ",";
}

媒介查询判断iPhone4 和 iPhone5

/* iPhone4媒介 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ } /* iPhone5媒介 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){ }

CSS常用技术总结!~~的更多相关文章

  1. div,css常用技术

    1,<div></div>一张图作为背景的用法: 必须指定width,height,background属性 .smallCircle{ margin-top: 25px;   ...

  2. CSS常用技术

    1.处理图片底部 5px 间距 <style> body {background: #2d97db;} .imgBox { background: #fff; font-size: 0; ...

  3. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  4. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  5. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  6. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  7. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. 必知干货:Web前端应用十种常用技术你全都知道吗?

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

  9. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

随机推荐

  1. 1.uniq去重命令讲解

    uniq命令: 常见参数: -c,--count *****      在每行旁边显示改行重复出现的次数 -d,--repeated        仅显示重复出现的行,2次或2次以上的行,默认的去重包 ...

  2. Would Your Work Habits Change if You Were Paid by the Job?

    原文地址:http://success-sys.com/2016/09/26/would-your-work-habits-change-if-you-were-paid-by-the-job/ A ...

  3. 烂泥:ubuntu 14.04搭建OpenVPN服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司分部需要连接公司内部的服务器,但是该服务器只允许公司内部的网络访问. 为了解决这个问题,打算使用VPN.对于VPN以前使用最多的是PPTP这个解决方案 ...

  4. [收藏] javascript keycode大全

    做了一段的小练习,没往上发了~ 继续补下js的基础知识 ------------------------------------------------------------------------ ...

  5. kettle中变量的设置和使用介绍

    有没有能统一管理一个参数,然后让所有的transformation和job都可以读到呢? 答案是有 1.首先,打开.kettle\kettle.properties(个人主机是:C:\Users\fo ...

  6. <转>MySQL性能调优的10个方法

    文章原地址:http://mp.weixin.qq.com/s/oRXJRz_Y5drmIrcbxSKOcw 1. 选择合适的存储引擎: InnoDB 除非你的数据表使用来做只读或者全文检索 (相信现 ...

  7. NHibernate常见问题及解决方法

    NHibernate常见问题及解决方法 曾经学过NHibernate的,但是自从工作到现在快一年了却从未用到过,近来要巩固一下却发现忘记了许多,一个"in expected: <end ...

  8. FineUI(专业版)v3.0.0 发布,手机、平板和桌面全支持!

    FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面!       自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...

  9. Android开发之应用程序的安装

    这里介绍的是用XUtils下载apk文件,然后进行安装. 首先用HttpUtils下载文件(记得获取SD卡的读写权限和联网的权限): /** * 下载Apk */ private void downL ...

  10. Equal Sides Of An Array

    参考:http://stackoverflow.com/questions/34584416/nested-loops-with-arrays You are going to be given an ...