1.id选择器
#id1{
backgroud-color:
}
<div id="id1">1</div>
2.类选择器
.c1{
backgroud-color:
}
<div class="c1">1</div>
3.标签选择器
div{
backgroud-color:
}
<div>1</div>
4.层级选择器
div div{#div下的div
backgroud-color:
}
<div>
<div>1</div>
</div>
5.组合选择器
.c1,.c2,.3{
backgroud-color:
}
<div class=“c1”>1</div>
<div class=“c2”>2</div>
<div class=“c3”>3</div>
6.属性选择器
.c1[type="text]{
backgroud-color:
}
<input type="text" />
<input type="password"/>
7.属性 7.1边框
border{
1px solid #ff6600 #dotted
}
7.2.float
{
float:left;
float:right;
clear:both;#清除浮动
}
7.3.display
{
#块级标签和行内标签切换
display:inline;#转为行内
display:block;#转为块级
#行内标签无法设置宽度和高度,margin,padding
display:inline-block;
display:none;#标签消失
}
7.4.padding margin
{
margin:外边距
padding:内边距
}
7.5.text-align
#文字对齐
{
text-align:center;
}
7.6 height,width,line-height
{
height:100px;
width:20%;
line-height:20px;
}
7.7.font
{
font-size:20px;
font-weight:700;
}
8.定义整体宽度
body{
width:980px;
margin:0 auto;
}
9.css重用
<style>
.c{
重用
}
.c1{
独有
}
.c2{
独有
}
<div class="c c1"></div>#应用c和c1的样式
<div class="c c2"></div>#应用c和c2的样式
</style>
10.自适应media
@media (min-width: 992px){
}
11.position 11.1.position:fixed;固定模块
{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
}
11.2.position:absolute;#绝对定位
{
position:absolute；
}
11.3.position：relative+absolute
<div style="position：relative">
<div style="position：absolute">11</div>#可以控制内部div相对于上层div移动
</div>
11.4.z-index控制显示层级,越大越往上
{
<div style="position：relative;z-index:2"></div>
}
12.opaciy透明度
{
opacity:0.3;
}
13.overflow内容超出隐藏或呈现滚动条
{
overflow:hidden;
overflow:auto
}
14.:hover用于鼠标悬浮后样式改变 15.background-img，background-repeat，background-position-x,background-position-y使用
#使用了postion，background，display属性
<div style="position:relative;height:35px;width:400px;">
<input type="text" style="height: 35px;width: 340px;padding-right: 60px" />
<span style="position:absolute;right:-15px;top:-10px;background-image: url(11.png);background-size:100px 60px;display: inline-block; width: 100px;height: 60px;"></span>
</div>
