a知识点笔记

/*通配符初始化标签*/
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;/*去除下划线*/

}

html,body{
	width: 100%
	height:100%;
	background-color: #f4f4f4;
	color: 3c3c3c;
	overflow-x: hidden;/*去除横向滚动条*/
}	

/*容器宽度自适应*/
.wrapper{
	width: 100%;
	height: 100%;
}

.wrapper .top-nav-wrap .top-nav ul li /*特定路径下的li*/

/*鼠标覆盖状态*/
.wrapper .top-nav-wrap .top-nav a:hover{
	color: #f40;
}


.wrapper .top-nav-wrap .top-nav .bg-pic{
	display: inline-block;/*转换成行级块元素,div可水平排列,a、span定以后方可定义宽高.属于文本元素，支持父级text-align:center*/
	text-align:center;/*内部文本居中*/
	width: 6px; /*背景图片尺寸*/
	height: 6px;  /*背景图片尺寸*/
	background-image: url(img/xsj.png);
	background-size: 100% 100%; /*背景图片所占宽度为100%*/
	vertical-align:middle; /*中间对齐*/
	vertical-align: top;/*基于上基准线对齐*/
	vertical-align: -1px;/*自由移动*/
}

.wrapper .search-wrap .search-con .logo-box{
	position: relative;/*基于自己或者父级挪动10像素，好像是*/
	position: relative;  /*基于自己,常作为基准参照物,定位后保留原来位置*/
	position: absolute;  /*基于最近的有定位元素的父级,定位后不保留原位置*/
	position: fixed;     /*基于浏览器,悬浮在屏幕，基于屏幕边缘，原位置让出来*/

}

/*居中的弹框*/
.theme-popover {
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 660px;
    height: 360px;
    margin: -180px 0 0 -330px;
    border-radius: 5px;
    border: solid 2px #666;
    background-color: #fff;
    display: none;
    box-shadow: 0 0 10px #666;
}


.wrapper .search-wrap .search-con .search-box{
	
}

.aaa{
	cursor: pointer; /*不是a标签的状态下鼠标覆盖变成小手*/
}

/*定义li里边的这个class=select*/
.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li.select{ 
	color: #fff;
	font-weight: 700;
	background-color: #f40;
	background:linear-gradient(to right,#ff9000 0,#ff5000 100%); /*从最左边的0过渡到最右边颜色*/
}

/*下边要基于父级定位的时候先设置父级元素为 position: relative; */
.bigdiv {
	position: relative;
}

/*然后要定位的小div设置 position: absolute;*/
.littlediv {
	position: absolute;
	top: 0px;
	right: 0px;
}


.aaaa{
	background:linear-gradient(to right,#ff9000 0,#ff5000 100%); /*从最左边的0过渡到最右边颜色*/
	overflow: hidden; /*给div设置了圆角，加上超出隐藏，div下的button也就会变成圆角*/
	border:none;/*去除button默认存在的描边*/
	cursor: pointer;/*button的鼠标覆盖变成了小手*/
}

.sharch-inp input{
	height: 24px;
	width: 427px;
	padding: 6px 16px;
	border:none;
	outline: 0;/*点击后无边框*/
	text-indent: 15px; /*文字首行缩进*/
}

aaa{
	width: 100%
	padding:0 8px;
	box-sizing: border-box;/*宽度超出，转换为ie模式下的盒模型*/
	text-align: center;/*文字居中，设置在了包裹a标签的li标签中*/
}


/*用after伪类清除浮动*/
.aaa:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


/*为兼容IE6,IE7，因为ie6,ie7不能用after伪类。加上下面代码*/

.clearfix{zoom:1}



/*居中展示*/
/*假如div的宽度为200px，那么居中的方式为左浮动50%，然后再margin-left为-100px就可以了。*/
.aaa:after{
width:200px;
position:absolute;
left：50%；
margin-left:-100px;
}


 <td rowspan="3" style="vertical-align: middle; position: relative;" width="130px;">
 <img src="img/avatars/a.jpg">
 <span style="position: absolute; top:164px; left: 89px; padding: 0px 5px; 
 background-color: #1276e6; border-radius: 9px; color: #fff; cursor:pointer; ">修改</span>
 </td>

.dddd{
	vertical-align: -3px;  这个可以调解上下对齐
	vertical-align: middle;
	定义img居中对齐 <p class="text">很棒<img src="024.gif" style="width: 22px;"></p>
}

/*搜索乱数假文可以得到英文或者中文的胡编文字*/


/*颜色+透明度*/
.aaa{
background-color: rgba(153,174,188,.9)
}


  .indextab th, .indextab td {
    padding: 0.75rem;

}

.aaa{
 	display: none
 	/*隐藏状态下不占据空间*/
 }
 
 /*输入框不可编辑*/
 <input type="text" readonly="readonly">


插入背景图片居中不重复
 .aaa{
 	background-image: url("图片文件地址");
 	 background-repeat:no-repeat;
 	 background-position:center center;
 }