CSS 开发常用

height:100px; 高度 width:100px
list-style:none 取消样式 一般给ul 因为性能优化 不建议给li设置 因为li是继承ul的属性
cursor: pointer;（wait 沙漏）  鼠标移动元素上改变指针样式
text-decoration:none 超链接无下划线（属性underline 鼠标悬浮显示下划线）
 
visibility:hidden;   隐藏元素 会留下占用位置
display:none;         隐藏元素 不会留下占用位置
opacity:0.1;         背景透明度 它的子元素也很透明度所影响 透明的颜色会和下一层所一样
background: rgba(0,0,0,0.4) 背景透明度且不影响子元素
box-sizing:border-box;         (作用:设置边框或者边距内容增多都不会改变盒子的大小变化)
placeholder="请输入用户名";    input的属性 作用表示不输入文本框会有默认提示的内容
readonly="readonly"            input 属性  让给输入框的值设置只读状态

<center> 标签对其包围的文本进行水平居中处理。
height:auto 自适应
<meta charset="UTF-8">  设置网页的编码格式

颜色属性; transparent 透明色

加权重：例如 这样.test就会有优先顺序
.test{
 color:red !important; 
}

有时候i行类元素出现底部有间距时候，可以尝试父元素加font-size:0; 因为行类都继承了父类...
图片文字等inline元素默许是和父级元素的baseline对齐的，而baseline又和父级底边有必定间隔（这个间隔和 font-size，font-family 相关），
所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。而且不光li，其他的block元素中包括img也会有这个景象。
iiqqq0.com

-------------------《字体》
white-space: nowrap;
overflow: hidden;  溢出裁剪  作用:1.可以清除浮动 2.可让超出标签的内容除掉 3.可以不让外盒子设置外边距不会顶下来
text-overflow: ellipsis;/* 超出内容显示为省略号 ......*/

white-space: nowrap;/*文本不进行换行*/
font-family:"微软雅黑"; 字体样式
font-weight:bold  字体粗细
font-size:10px;    字体大小
text-align:center; (上 下 左 右 中): 字体对齐那方(div中的图片也可当文本处理）是容器里的内容居中不是本身 (水平居中)
vertical-align:top; 
line-height:10px 行高（一般div和文本的行高一样就可以实现垂直居中）   （垂直居中）
text-shadow:1px 1px 5px   字体阴影（参数：水平多少度 垂直多少度 阴影多少像素）最后面还可以加颜
vertical-align:middle; 图片文本居中对齐

-------------------《图片》 
1.在网页中单独设置图片高度或者宽度时 默认会等比拉伸 好处不会让图片变形
2.如何在网页图片超过了div的宽度 那么就不能用外边距和图片居中方式 得用父类div中加text-align: center; 图片中加入margin:0 -100%;

filter: blur(6px); 过滤  应用场景 背景图片下显示头像。 背景过滤可以突出头像清晰度 一般配合hsla
background: hsla(0,0%,80%,.45); 背景调色
background-image:url();背景图片
background-repeat:repeat;图片平铺（默认）
background-repeat:no-repeat;图片不平铺
background-repeat:no-x;  水平方平铺
background-position:水平 高度...(参数还可以填像素PX默认第一位为>和上)-(<left 上top >right 下bottom 中center)
background-size:cover; 背景图片的设置大小尺寸
background-attachment:fixed;  背景图片不会别滑动页面所覆盖
background-color:rgba(0,0,0,.5); 颜色透明度（参数越小越不透明） 黑色透明

background：red 于 background-color：red区别
前者会是浏览器多余的查询并渲染、
后者直接查找渲染。
ul>li 利于SEO

-------------------《转行块级元素》
display:inline-block;  转行内块级元素
display:block;           转行内元素
box-shadow:水平 垂直 模糊度; 盒子阴影
--伸缩布局  让div有间隔，唯一作用：节省代码
display:flex;
justfy-content:space-between;

-------------------《边框属性》
border-radius:50%; 把边框边角度边50.就是圆圈了
border:宽度 样式 颜色   （清除边框样式可指定那边清除：border:none（清除全部））
注意点:连写边框格式中颜色可省略，默认黑色
      :连写边框格式中颜色不可省略，
      ;连写边框格式中k宽度可省略
border-top:10px solid red  
border-right:....(等等)
（第二种连写方式）
border-width:上 右 下 左
border-style:上 右 下 左
border-color:上 右 下 左
注意点:三个属性取值方式是按顺时针来的赋值
      :如果又一边不填则按照对边方的属性取值

-------------------《内边距》--边框也内容的距离
padding-left:10px;     注意点:取值方式和边框属性类似
padding-(上 右 下 左):10px;
padding:1px 1px 1px 1px;(上 右 下 左)
-------------------《外边距》--标签与标签的距离
非连续方式：margin-top:1px;(上 右 下 左)
连续方式: margin:1px 1px 1px 1px;(上 右 下 左)
注意点:外边距在垂直方向上布局不会叠加。出现合并现象。谁的距离远就听谁的
margin:0 auto; 水平方向居中，垂直无效 属性为:display:inline 时无效

-------------------《浮动》
1.浮动不区分大小写 2.设置浮动之后行内标签都可以设置宽高属性 3.浮动中不会有居中，只能自父容器的左边或者右边
注意点:浮动元素字那行，就在那好的左或者右边浮动，而不是最顶端浮动
float:left; float:right;
clear:both 清除浮动

-------------------《定位》
position:relative   相对定位（相对自己以前的位置进行调整）
position:absolute   绝定定位（相对于祖先元素为定位流的元素最近的网页首屏来定位 脱离标准流）
                      会忽略祖先元素为定位流的元素的内边距

固定定位和绝对定位居中的方法:写上left:50%，在margin-left:父元素宽度的一半

position:fixed;        固定定位（脱离标准流。不过因为滑动条而改变位置）
z-index:1;     显示级别（值越小越容易被覆盖）

-------------------《CSS3新增属性》
标签名:hover{}   指针停浮子该标签上的属性设置
过渡属性 （三要素：1.必须有变化 2.变化的属性 3.变化得时间）
transition-property:(要过渡的属性：宽 高 ....)  过渡的属性可以放多个用逗号隔开
transition-duration:5s; 过渡的时间 过渡的时间可以放多个用逗号隔开
连续方式:transtiton:(比如;width 5s linear 0s)过渡属性 过渡时间长度 运动速度 延迟时间;可省略后面2个参数
transform:rotate(45deg)    默认Z轴旋转45度 想为那个转就rotate加一个大写（Z Y X）
transform:translate(100px 20px)/ranslateY/X(px)scale(倍数) 平移 参数:水平方 垂直方
transform:scale(2,2)         缩放 参数:水平方 垂直方（参数1倍不变 ）
transform-origin:水平 垂直    指定发生改变的坐标
perspective:500px   透视属性 想透视谁就在谁的父元素加上这个属性

-------------------《伪类选择器》
标签名:nth-child(1){}   现在什么的第几个元素参数放元素的位置号(括号里可以放even 和 odd)
-------------------《动画》
@keyframes 动画名 {动画属性 } 创建动画

   
return ![-1,] ?  '不是IE6/7/8'  : '是IE6/7/8'