CSS3 filter(滤镜)

用于背景图片模糊处理，实现高斯模糊效果
filter: blur(5px);
有种毛玻璃壁纸的感觉
filter定义的10种效果分别是：blur、opacity、grayscale、sepia、saturate、hue-rotate、invert、brightness、contrast、drop-shadow。
备注：浏览器渲染不一样，所呈现效果也不一样。更有的浏览器不支持。

css 中 >. 的用法

.sidebar-content>.menubar>h5 {

color: #fff;
font-weight: 700;
margin: 5px 0;

}
.sidebar-content>.menubar>h5:before {

content: '#';
color: #fb23b9;
margin-right: 5px;

}

css中“>”是:
　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。

　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

css的#和.的区别

#开头的表示的id选择器

.开头的表示的是类名选择器

类名选择器的优先级要低于id选择器

但是通常我们不使用id选择器，id通常是为JS而预留的

.开头的表示的是类名class选择器

#开头的表示的id选择器

类名选择器的优先级要低于id选择器
但是通常我们不使用id选择器，id通常是为JS而预留的

如何判断url链接是否有效？
如何判断url资源是否为空？

<img src="图片文件路径" onerror="imgError(this);" /> 
onerror="this.src='../img/none.png'"

使用onclick事件 直接给控件 添加 链接

onclick="window.open(\'http://time.is/\')"

二种新窗口打开的区别：

window.open("URL",'top'); 只是表示打开这个页面，并不是打开并刷新页面；
window.location.href="URL"; 表示重新定向到新页面，同时刷新打开的这个页面；

伪类书写顺序

a:link
a:visited
a:hover
a:active

通过css样式 鼠标悬停 绑定显示另外一个控件

.cate_unit:hover .display_more_btn {
    display: block;  /*鼠标悬停分类列表 显示可见更多按钮*/
}

input 输入框标签 placeholder文字居中

input::-ms-input-placeholder{
        text-align: center;
}
input::-webkit-input-placeholder{
        text-align: center;
}

:nth-child(1)或者first-child
设置第一个元素 样式

重要样式 ： 不透明度 opacity 与分层 z-index

box-sizing: border-box;

width: fit-content 宽度 根据内容自适应

伪元素before 使用

/* .chat-list .bdy::before {
    content: url(./img/bdy-vcard.jpg);
} */

设置一个比1px更细的边框
<div style="width:calc(100% - 55px);border-top: 1px solid #CCCCCC;transform: scaleY(0.2);margin-left: 55px;"></div>

弹性布局
display: flex

输入框input的 提供建议值
input list属性

背景图 对齐方式
background-position
设置拉伸

尺寸
background-size
设置缩放

是否重复
background-repeat
设置平铺

适配ie样式 条件注释

<!--[if IE]>
   　　 只能被 IE 识别;
<![endif]-->

示例

<!--[if IE]>
<style type="text/css">
.iecss1 {
    margin-left: -12px;
}
</style>
<![endif]-->

但是 条件注释 不再支持ie10以上的ie版本
改用 新的方法

<style type="text/css">
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.iecss1 {
    margin-left: -12px !important;
}
}
</style>

取消烦人的 聚焦边框

input,button,select,textarea{
outline:none
}

或者 -webkit-apperance:normal;

文本从右往左布局
float:right
derection:rtl
dir="rtl"

text-decoration文本修饰(下划线,上划线,删除线，闪烁文本)

绝对布局 层叠顺序 z-index的最大值
2147483647 实则是 32位操作系统下的int最大值
mysql数据库 int(10)的最大值
2的31次方（2147483648） 减 1

旋转90度

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

光标颜色设置
caret-color: #00FF00;
设置为透明 隐藏
caret-color: transparent;

文字 间距
letter-spacing:1px;

网页字体设置
font family 本地字体

示例：
css下

@font-face {
font-family: "consolas";
src: url("font/CONSOLA.ttf");
}

需要使用的元素里添加上
font-family: 'consolas';

文本宽度
width:fill-available表示撑满可用空间

相邻兄弟选择器

使用+加号 连接 另一元素后的元素，且二者有相同父元素
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符 ，两个元素名之间 可以存在空格

子元素选择器

子选择器使用了大于号（子结合符）
示例：div>p 两个元素名之间 同样可以存在空格
与后代元素选择器 的区别 子元素只包含一层父子关系，即为 嵌套层次只能有一层

a元素hover状态 改变b元素样式

情况一：b是a子孙元素
#a:hover #b{}

情况二：a和b是子元素
#a:hover > #b{}

情况三：a和b是兄弟关系且相邻
#a:hover + #b{}

情况四：a和b是兄弟
#a:hover ~ #b{}

取消 下拉列表select 默认 箭头样式

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

绝对定位position:absolute；实现居中对齐
left: 50%; //起始是在body中，横向距左50%的位置
top:50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
transform:translate(-50%,-50%); //水平、垂直都居中,也可以写成下面的方式

!important 增加样式的权重,优先级