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控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
随机推荐
- linux几种快速清空文件内容的方法
linux几种快速清空文件内容的方法 几种快速清空文件内容的方法: $ : > filename #其中的 : 是一个占位符, 不产生任何输出. $ > filename $ echo & ...
- Ubuntu Server 设置PPTP客户端连接
安装PPTP客户端 apt-get install pptp-linux 设置连接账号信息 sudo vim /etc/ppp/chap-secrets 其中$login_name是登录名:$pass ...
- UI内侧错题
此题考察的是JQuery UI下的menu插件的使用,ui-menu表示菜单的外层容器,如果菜单包含图标,该元素会另外带一个 ui-menu-icons class.故A B选项错误.ui-menu- ...
- AC日记——蓬莱山辉夜 codevs 2830
2830 蓬莱山辉夜 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 在幻想乡中,蓬莱山辉夜是月球 ...
- python_接口开发
一.GET和POST请求from flask import Flask,jsonifydata = { 'name':'Jerry', 'sex':'男', 'age':'18'}app = Flas ...
- CodeBlocks及LCM应用
以下是在开发过程中遇到的一些细节点: 1)called after throwing an instance of std::bad_alloc 此问题是由于publish(data),当中data赋 ...
- redis 学习笔记(7)-cluster 客户端(jedis)代码示例
上节学习了cluster的搭建及redis-cli终端下如何操作,但是更常用的场景是在程序代码里对cluster读写,这需要redis-client对cluster模式的支持,目前spring-dat ...
- [LeetCode] Find All Numbers Disappeared in an Array 找出数组中所有消失的数字
Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...
- sublimetext3中保存代码片段
在日常的开发工作中,不断重复上一次敲过的代码,有时确实感到伐木累."蓝瘦"(难受)."香菇"(想哭),大概表达的也是这样的心境吧!:grinning: 所以,在 ...
- bzoj2243
2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6753 Solved: 2496[Submit][Status ...