DIV+CSS – 爱梦小屋

link加载css media属性作用

第一个声明阻塞渲染，适用于所有情况。
第二个声明同样阻塞渲染：“all”是默认类型，如果您不指定任何类型，则隐式设置为“all”。因此，第一个声明和第二个声明实际上是等效的。
第三个声明具有动态媒体查询，将在网页加载时计算。根据网页加载时设备的方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。
最后一个声明只在打印网页时应用，因此网页首次在浏览器中加载时，它不会阻塞渲染。

最后，请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。无论哪一种情况，浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。

css data- 属性引用

html
    h11
css
    a::before {
            content: attr(data-heading);
            }

解决按钮点击蓝色边框 outline:none;

button{outline:none;}

css3长度单位根em（rem）恐惧em的连锁反应吗？这里从根部获取的em满足你的布局需求

css头部配置

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } 
body { font-size: 1.4rem;/*1.4 × 10px = 14px */ }
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } 
p {  font-size:14px; font-size:1.4rem;}/*IE8及之前版本的IE浏览器使用14像素*/

【css公用】 css实现元素翻转与旋转

翻转

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}

旋转（比较懒，没验证请诸位百度）

iconfont提高可读性

原文地址：知乎-若愚

css

@font-face {
  font-family: "hello";
  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
.icon-qq:before { font-family:"hello";content: "\e600"; } 

作者：若愚
链接：https://zhuanlan.zhihu.com/p/22724856
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【CSS公用库】xbtn v1.0 按钮

xbtn v1.0

/*example:
*<button class="xbtn-sm xbtn-trans-radius-success">提交</button>
*/
/*===========================================xbtn
*作者：Janing
*日期：2016-9-18
*/
/*===========================================大小*/
[class*="xbtn"]{
	height:30px;
	line-height:30px;
	min-width:80px;
	padding:0 5px;
	border:1px solid transparent;
	transition: all 0.2s ease-in-out 0s;
}
[class*="xbtn"][class*="sm"]{
	height:25px;
	line-height:25px;
	min-width:30px;
}

/*===========================================主题颜色*/
[class*="xbtn"][class*="-success"]{
	background:#04be02;
	color:#04be02;
	border-color:#04be02;
}
[class*="xbtn"][class*="-primary"]{
	background:blue;
	color:blue;
	border-color:blue;
}
[class*="xbtn"][class*="-danger"]{
	background:#FF6D6E;
	color:#FF6D6E;
	border-color:#FF6D6E;
}
[class*="xbtn"][class*="-warming"]{
	background:#FF9466;
	color:#FF9466;
	border-color:#FF9466;
}
[class*="xbtn"][class*="-info"]{
	background:#00d5ec;
	color:#00d5ec;
	border-color:#00d5ec;
}
[class*="xbtn"][class*="-white"]{
	background:#fff;
	color:#1B1E25;
	border-color:rgba(0,0,0,.2);
}
[class*="xbtn"]:hover{
	opacity: .8;
}
/*===========================================形状*/
[class*="xbtn"].xbtn-success,[class*="xbtn"].xbtn-info,[class*="xbtn"].xbtn-danger,[class*="xbtn"].xbtn-primary,[class*="xbtn"].xbtn-warming{
	color:#fff;
}
[class*="xbtn"][class*="-trans"]{
	background:transparent;
}
[class*="xbtn"][class*="-radius"]{
	border-radius:5px;
}
[class*="xbtn"][class*="-line"]{
	background:transparent;
	border-width: 0;
}
[class*="xbtn"][class*="-line"]:hover{
	border-bottom:1px solid;
	opacity: 1;
}

【CSS公用库】改变滚动条样式

改变滚动条样式

/*===========================================滚动条样式*/
::-webkit-scrollbar {
		  width: 10px;
		  height:10px;
	} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
		  background-color: #eee;
	} /* 滚动条的滑轨背景颜色 */

	::-webkit-scrollbar-thumb {
		  background-color: #666; 
	} /* 滑块颜色 */

	::-webkit-scrollbar-button {
		  display:none;
	} /* 滑轨两头的监听按钮颜色 */

	::-webkit-scrollbar-corner {
		  background-color: #eee;
	} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

生效浏览器：chrome 不生效浏览器：Firefox 未测试浏览器：edge/IE系

【CSS公用库】删除input type=”number” 的小箭头

/*===========================================去掉小箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}
input[type="number"]{-moz-appearance:textfield;}

生效浏览器：chrome?未测试浏览器：Firefox/edge/IE系

css动画 animation-timing-function 缓动效果取值

/*
*/

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内