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控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
随机推荐
- NFS网络共享服务部署
10.3 NFS服务端部署环境准备 10.3.1 NFS服务部署服务器准备 服务器系统 角色 IP Centos6.7 x86_64 NFS服务器端(NFS-server) 192.168.1.14 ...
- php类中的魔术方法
1.构造函数 析构函数class pt{ function __construct($data) { echo "pt is start ..."; $this->pr($d ...
- [笔记]ubuntu安装flashplayer
为firefox安装: 下载tar.gz压缩包:http://get.adobe.com/cn/flashplayer/ 解压:tar -xvxf install_flash_player_11_li ...
- ubuntu系统安装初始化脚本
ubuntu系统安装初始化脚本 经常安装卸载ubuntu,每次系统安装完成后要安装好多软件,一个个命令输很麻烦浪费时间,一个sh文件全搞定! 1. flashplayer下载:点击这里 2. Auda ...
- 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 ...
- 机器学习之sklearn——聚类
生成数据集方法:sklearn.datasets.make_blobs(n_samples,n_featurs,centers)可以生成数据集,n_samples表示个数,n_features表示特征 ...
- Multiply Strings
Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...
- 使用CocoaPods被卡住:Updating local specs repositories
使用cocoapods 更新第三库,一直停留在.Updating local specs repositories 后来查发现pod install 被墙了,请大家换成pod install --v ...
- MySQL种种
mysql中You can't specify target table for update in FROM clause错误--http://blog.csdn.net/priestmoon/ar ...
- .net的一致性哈希实现
最近在项目的微服务架构推进过程中,一个新的服务需要动态伸缩的弹性部署,所有容器化示例组成一个大的工作集群,以分布式处理的方式来完成一项工作,在集群中所有节点的任务分配过程中,由于集群工作节点需要动态增 ...