css相关属性汇总
1、插入图片和背景图片
<img src=""/> 更改大小用width,height;更改位置：margin,padding
<div style="background-image:url('')"></div> 更改大小：background-size；更改位置：background-position
2、清除内外边距
*{margin：0；padding：0；} /*行内元素只有左右外边距，没有上下外边距*/
3、外边距合并
相邻块元素垂直外边距合并：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下边的元素有上
外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和，而是两者之中较大者，这种现象称之为外
边距塌陷。解决方案：避免此情况出现。
嵌套块元素垂直外边距的合并：对于两个嵌套关系的块元素，如果过父元素没有上内边距及边框，则父元素的上边距会与子
元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。解决方案：
可以为父元素定义1px的上边框或上内边距；可以为父元素添加：overflow:hidden;
4、padding不影响盒子大小的情况
如果一个盒子 没有给定宽度、高度 或者 继承父亲的宽度、高度，则padding不会影响本盒子大小。
6、块级元素、行内元素、行内块元素的特点
-块级元素特点：
（1）总是从新行开始
（2）高度、行高、外边距以及内边距都可控
（3）宽度默认100%
（4）可以容纳内联元素和其他块级元素
-行内元素特点：
（1）和相邻行内元素在一行上
（2）高、宽无效，但是水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素
-行内块元素特点：
（1）和相邻行内元素（行内块）在同一行上，但之间会有空白缝隙
（2）默认宽度就是它本身内容的宽度
（3）高度、行高、外边距及内边距可控
7、标签模式转换
块转行内：display:inline;
行内转块：display：block;
块、行内转为行内块：display：inline-block;
8、属性选择器
E[attr*=val] 属性值里包含val字符并在任意位置
E[attr^=val] 属性值里包含val字符并在开始位置
E[attr$=val] 属性值里包含val字符并在结束位置
9、伪类选择器
E::first-letter 文本中第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式（单击拖拉鼠标）
E::before 在元素内部的开始位置插入 content:""
E::after 在元素内部的结束位置插入 content:""
10、background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background-attachment:scroll|fixed;图片随滚动条滚动
background-repeat:round|space;自动适应容器|以相同间距平铺且充满整个容器或某个方向
11、table表格边框合并
table {
border-collapse:collapse;
}
12、圆角边框
border-radius:左上 右上 右下 左下；（顺时针方向）
13、外边距水平居中对齐
div {width：200px; margin:0 auto;}
（1）块级元素 （2）必须指定width
14、css3盒模型
1、box-sizing:content-box; 盒子大小=width+padding+border;系统默认
2、box-sizing:border-box; 盒子大小=width；padding不会撑开盒子
15、盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影
水平阴影和垂直阴影必填；默认外阴影outset，内阴影inset;
16、浮动float
浮动可实现文字环绕效果；浮动元素总是会找离它最近的父级元素对齐，但是不会超出内边距范围。
浮动脱离标准流，不占位置，会影响其他标准流。
为浮动元素增加标准流父元素，防止下方元素上移。
5、清除浮动
（1）在浮动盒子后添加空盒子，添加属性 clear:both;
（2）给浮动盒子的父级元素添加overflow：hidden|auto|scroll;
（3）after伪元素，给浮动盒子的父元素加 class="clearfix"
.clearfix:after{
content:".";/*content内容不为空*/
display:block;
height:0;
visibility:hidden;/*隐藏content内容*/
clear:both;
}
.clearfix{
*zoom:1;/*ie 6 7 才执行，清除浮动*/
}
（4）双伪元素清除浮动（推荐）
.clearfix:before，.clearfix:after{
content:"";/*content内容可以为空*/
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;/*ie 6 7 才执行，清除浮动*/
}
*****************************************************************************************************************************************************************
1、轮廓线(位于边框border外围，例如input元素) outline:outline-width||outline-style||outline-color;
取消轮廓线-outline:0|none;
2、防止拖拽(textarea)文本域
resize:none;
3、行内块元素（图片、表单）和文字垂直对齐
vertical-align:top|middle|baseline（默认）|bottom; 对块元素无效,只针对行内元素或者行内块元素，“通常用来
控制图片/表单文字的对齐”
4、去除图片底侧空白缝隙
图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐，行内块元素底部会有一个空白缝隙。
解决方法：（1）display：block;转换为块级元素
（2）vertical-align:middle|top;
5、溢出文字隐藏
（1）work-break（主要处理英文）:normal|break-all（允许单词拆分显示）|keep-all（不允许单词拆分显示，半角空格
和连字符“-”除外）
（2）white-space:normal|nowrap(强制不换行);
（3）text-overflow:clip（不使用省略标记...,直接裁剪）|ellipsis（显示省略标记...）;
必须和white-space：nowrap;overflow:hidden;一起使用才有效果
6、元素隐藏、显示
display:none|block; 隐藏元素，不再保留位置。
visibility：hidden|visible; 隐藏元素，保留位置。
*position：fixed; 必须有内容撑开，否则写宽高
*z-index:正数|负数|0； 只有相对定位、绝对定位、固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可
指定此属性。
*定位模式转换：float 和 position:absolute|fixed; 不设置width,盒子有模式转换的情况,即转化为行内块。不必单独
加display:block;
*********************************************************************************************************************************************************************************************************************
滑动门技术（微信导航栏应用）
为了使各种特殊形状的背景能够自适应元素中文本内容的大小,运用精灵技术和padding
<a href="#" />
<span>导航栏内容</span>
</a>
*a设置背景左侧，padding撑开盒子宽度；span设置背景右侧，padding撑开盒子宽度，剩下由文字继续撑开宽度。
a{
display:inline-block;
height:33px;//不设置宽度
background:url(images/01.jpg) no-repeat;
padding-left:15px;
}
a span {
display:inline-block;
height:33px;//不设置宽度
background:url(images/01.jpg) no-repeat right;
padding-right:15px;
}
**************************************************************************************************
CSS过渡效果
【transition:属性 花费时间 运动曲线（ease\ease-in等）何时开始；】
div{
width:100px;
height:100px;
background-color:red;
transition:width 0.6s ease 0s,height 0.3s ease-in 1s;
transition:all 0.3s;
}
div:hover{
width:300px;
height:300px;
}
**************************************************************************************************************
*背景渐变（兼容问题严重）
background:-webkit-linear-gradient(渐变起始位置，起始颜色，结束颜色);
background:-webkit-linear-gradient(渐变起始位置，颜色 位置，颜色 位置，...);
位置：left top %
*transform-style 3d空间一个重要属性
transform-style ：flat（默认2d）|perserve-3d（所有子元素在3d空间中呈现）;
父元素 { transform-style ：perserve-3d ；perspective:1000px;（透视效果）}
子元素 { transform:rotateY(60deg) translateZ(400px); }
