CSS部分属性解析

学习前端的一些知识总离不开html、css和js，今天我们就来了解一下css中的一些属性及其用法。

首先了解的是边框，我们可以设置边框粗细，边框的样式，边框的颜色以及是否显示边框。

/*边框粗细*/border-width: 2px;/*边框样式 dashed(虚线) soild（实线）*/border-style:dotted ;/*边框颜色可使用rgb,rgba（a为透明度）,颜色的英文名以及16进制表示颜色*/border-color:#4AABE2 ;/*边框设置为弧度可用百分比和像素(px)*/border-radius: 50%;/*边框四边的样式可单独设置*/border-top: 0;border-right:0;
border-left-color:rgb(51,51,51);
/*常用的设置边框的格式(粗细,样式,颜色)*/border:5px solid rgb(1, 216, 103);
/*也可设置边框是否有阴影*/box-shadow: 0 0 50px rgba(0,0,0,1);
设置背景常用的设置背景颜色，背景图片。
/*设置背景颜色*/background-color: #4AABE2;/*设置背景图片*/background-image: url(img/wall.jpg);/*设置图片是否平铺*/background-repeat: no-repeat;/*设置图片的位置*/background-position: right bottom;/*常用下面的写法代替上面那三句*/background: url(img/wall.jpg) no-repeat;
字体有以下的样式：
.box{background-color: #f00;width:500px;height:300px;/*文本缩进*/text-indent:32px;/*字符间距*/letter-spacing: 10px;/*字体高度在设置文本垂直居中时使用较多*/line-height: 50px;/*字体颜色*/color:#fff;/*字体大小*/font-size:28px;/*字体风格*/font-style: italic;/*字体的粗细*/font-weight: bold;/*字体格式*/font-family: 'myfont';}/*伪类选择器，选中首个字符*/
.box:first-letter{font-size:25pt;text-shadow: 2px 2px 5px rgba(0,0,0,1);}/*自定义字体*/@font-face{font-family: 'myfont';/*自定义字体名称*/src: url('font/FZLTXHJW.TTF'); /*字体所在路径*/}
相对定位:相对定位遵循文档流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 
绝对定位:绝对定位会使得当前元素脱离文档流，可以通过top,left,right,bottom控制元素在容器中的指定位置，如果未给父容器指定定位方式，则当前元素可以
脱离父容器的范围
一般使用定位用position：属性
position:absolute;
z-index: 3;/*设置层叠顺序，值越大，位于越上层（前提必须定位）*/
当我们开发是最好将外补白（margin）和内补白（padding）重新设置也就是
*{padding: 0;margin: 0;}
列表样式重置
ul,ol,dl{list-style:none;}
在某个标签上设置出发效果使用hover，如：li:hover
触发时鼠标的样式改变用cursor，如：cursor:pointer;
如果需要给内边距，又不想让容器改变大小则可以使用box-sizing ，如：box-sizing:border-box
超出当前容器范围的元素隐藏使用overflow，如：overflow: hidden;
透明度设置：opacity: 0.5;

脱离正常的文档流，元素会按照浮动方式(left,right,none)排列：float:left;
弹性盒子：display: flex;
设置当前属性优先级最高:border-radius: 0 !important;
CSS优先级
!important>ID>Class>元素选择器>兄弟>
过度变化：transition:all 1s linear;
动画效果：animation: rotates .5s infinite linear;
/*自定义动画*/
@keyframes rotates{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}