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);

}

}