CSS常用技术总结!~~
放大屏幕,背景图不变
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常用技术总结!~~的更多相关文章
- div,css常用技术
1,<div></div>一张图作为背景的用法: 必须指定width,height,background属性 .smallCircle{ margin-top: 25px; ...
- CSS常用技术
1.处理图片底部 5px 间距 <style> body {background: #2d97db;} .imgBox { background: #fff; font-size: 0; ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 必知干货:Web前端应用十种常用技术你全都知道吗?
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
随机推荐
- 1.uniq去重命令讲解
uniq命令: 常见参数: -c,--count ***** 在每行旁边显示改行重复出现的次数 -d,--repeated 仅显示重复出现的行,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 ...
- 烂泥:ubuntu 14.04搭建OpenVPN服务器
本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司分部需要连接公司内部的服务器,但是该服务器只允许公司内部的网络访问. 为了解决这个问题,打算使用VPN.对于VPN以前使用最多的是PPTP这个解决方案 ...
- [收藏] javascript keycode大全
做了一段的小练习,没往上发了~ 继续补下js的基础知识 ------------------------------------------------------------------------ ...
- kettle中变量的设置和使用介绍
有没有能统一管理一个参数,然后让所有的transformation和job都可以读到呢? 答案是有 1.首先,打开.kettle\kettle.properties(个人主机是:C:\Users\fo ...
- <转>MySQL性能调优的10个方法
文章原地址:http://mp.weixin.qq.com/s/oRXJRz_Y5drmIrcbxSKOcw 1. 选择合适的存储引擎: InnoDB 除非你的数据表使用来做只读或者全文检索 (相信现 ...
- NHibernate常见问题及解决方法
NHibernate常见问题及解决方法 曾经学过NHibernate的,但是自从工作到现在快一年了却从未用到过,近来要巩固一下却发现忘记了许多,一个"in expected: <end ...
- FineUI(专业版)v3.0.0 发布,手机、平板和桌面全支持!
FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面! 自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...
- Android开发之应用程序的安装
这里介绍的是用XUtils下载apk文件,然后进行安装. 首先用HttpUtils下载文件(记得获取SD卡的读写权限和联网的权限): /** * 下载Apk */ private void downL ...
- Equal Sides Of An Array
参考:http://stackoverflow.com/questions/34584416/nested-loops-with-arrays You are going to be given an ...