放大屏幕,背景图不变

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. NFS网络共享服务部署

    10.3 NFS服务端部署环境准备 10.3.1 NFS服务部署服务器准备 服务器系统 角色 IP Centos6.7 x86_64 NFS服务器端(NFS-server) 192.168.1.14 ...

  2. php类中的魔术方法

    1.构造函数 析构函数class pt{ function __construct($data) { echo "pt is start ..."; $this->pr($d ...

  3. [笔记]ubuntu安装flashplayer

    为firefox安装: 下载tar.gz压缩包:http://get.adobe.com/cn/flashplayer/ 解压:tar -xvxf install_flash_player_11_li ...

  4. ubuntu系统安装初始化脚本

    ubuntu系统安装初始化脚本 经常安装卸载ubuntu,每次系统安装完成后要安装好多软件,一个个命令输很麻烦浪费时间,一个sh文件全搞定! 1. flashplayer下载:点击这里 2. Auda ...

  5. USACO . Your Ride Is Here

    Your Ride Is Here It is a well-known fact that behind every good comet is a UFO. These UFOs often co ...

  6. 机器学习之sklearn——聚类

    生成数据集方法:sklearn.datasets.make_blobs(n_samples,n_featurs,centers)可以生成数据集,n_samples表示个数,n_features表示特征 ...

  7. Multiply Strings

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  8. 使用CocoaPods被卡住:Updating local specs repositories

    使用cocoapods 更新第三库,一直停留在.Updating local specs repositories 后来查发现pod install  被墙了,请大家换成pod install --v ...

  9. MySQL种种

    mysql中You can't specify target table for update in FROM clause错误--http://blog.csdn.net/priestmoon/ar ...

  10. .net的一致性哈希实现

    最近在项目的微服务架构推进过程中,一个新的服务需要动态伸缩的弹性部署,所有容器化示例组成一个大的工作集群,以分布式处理的方式来完成一项工作,在集群中所有节点的任务分配过程中,由于集群工作节点需要动态增 ...