样式继承：
就是父类的颜色如果变了，子类下的div（或者其他属性）会继承父类的。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
color: red;
} p{
color: green;
} ul li a{
color: RGB(200,122,111);
}
</style> <body> <div class="c1">
DIV1
<div class="c2">DIV2</div>
<p>PPP</p>
<a href="">click</a>
</div> <ul>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">2222</a></li>
<li><a href="">222</a></li>
</ul>
</body>
</html>
line-height:高度
文本行高，通俗地讲，文字高度加上文字上下的空白区域的高度（基于字体的高度）50%等于总高度
verticle-align属性：
设置元素内容的垂直对其方式，只对行内元素有效，对块级元素无效。
当文字和图片同时存在一行时，是利用底线来对其的，这样的话会造成对不齐的现象。
这时候需要在修改img的属性，在style里边调整：
img{
vertical-align:middle;(这里的middle也可以改为其他对齐方式)
}
也可以调像素，改为多少px就行。
其他的一些属性：
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
背景属性：
background-color（背景颜色）
background-image（背景图片）
background-repeat（填充方式：不填充，填充等）
background-position（定位位置） background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;（距离左边多少，距离上面多少）
简写
改变数字前面的标示符可以利用list-style:~~~;来改变
Display属性：可以把一个块级标签设置成内联标签
一共有这么几个属性：
none （常用，部分隐藏，部分显示，none的部分隐藏）
block（设置成块级，然后长宽高有效）
inline（设置成内联，设置的长宽高无效）
inline-block
css布局关键点：如何能够在一行显示多个可以调节长宽的元素。
一个标签即兼具了块级设备可以调长宽的属性，又具备了内联标签在一行显示的特性。
代码示例：
<style>
/*.c1{*/
/*display: inline;*/
/*width: 200px;*/
/*height: 200px;*/
/*background-color: green;*/ /*}*/ /*span{*/
/*width: 200px;*/
/*height: 200px;*/
/*background-color: wheat;*/
/*display: block;*/
/*}*/ .c1{
width: 200px;
height: 200px;
background-color: wheat;
display: inline-block;
} .c2{
width: 200px;
height: 200px;
background-color: goldenrod;
display: inline-block; } .c3{
width: 200px;
height: 200px;
background-color: green;
display: inline-block; } span{
margin-left: -4px;
} .Myhide{
display: none;
}
/*===========================*/ .box{
border:1px solid red;
}
.ico,.egon{
display: inline-block;
} .box:hover img{
display: block;
} </style> </head>
<body> <!--<div class="c1">DIV</div>--> <!--<span>SPAN</span>--> <span class="c1 Myhide"></span>
<span class="c2"></span>
<span class="c3"></span> <div class="box">
<div class="text">hkjfdashfkas</div>
<div class="text">
<div class="ico">???????????????</div>
<div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div>
</div>
</div> </body>
图片一开始隐藏的，悬浮左边显示右边。
<style>
.box{
border:1px solid red;
}
.ico,.egon{
display: inline-block;
}
.box:hover img{
display: block;
}
</style>
<div class="box">
<div class="text">hkjfdashfkas</div>
<div class="text">
<div class="ico">???????????????</div>
<div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div>
</div>
</div>
清除浮动：
浮动元素上一个是浮动元素，紧贴着上一个。
上一个不是浮动元素，就在他的下面。
<style>
body{
margin: ;
}
.c1{
width: 100px;
height: 170px;
background-color: #53868B;
float: left;
clear: left;
}
.c2{
width: 200px;
height: 70px;
background-color: cornflowerblue;
float: left;
clear: both;
}
.c3{
width: 300px;
height: 120px;
background-color: darkmagenta;
float: left;
}
.c4{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<!--<div class="c4"></div>-->
</body>
clear: both;
clear: left;
clear: right;
Position定位：
position之fix定位：做一个一直在某个位置的按钮（例如返回顶部）
代码：
<style>
.c1{ width: %;
height: 2000px;
background-color: wheat;
}
.returnTop{
width: 120px;
height: 40px;
background-color: gray;
color: white;
text-align: center;
line-height: 40px;
position: fixed;
right: 20px;
bottom: 20px ;
}
</style> </head>
<body> <div class="c1"></div> <div class="returnTop">返回顶部</div> </body>
清除浮动的应用：
float父级塌陷：
设置的子级元素不跟父级一样，然后就会出现高度不一样的情况（或其他情况）。
<style>
*{
margin: 0;
}
.header{
width: 100%;
/*height: 80px;*/ background-color: #53868B;
} .header .item1,.header .item2{
width: 60px;
height: 80px;
background-color: goldenrod;
float: left;
} .item2{
background-color: green!important;
} .header .item3{
width: 60px;
height: 50px;
background-color: goldenrod;
float: right;
}
.content{
width: 100%;
height: 300px;
background-color: darkmagenta;
} .clearfix:after{
content: "";
display: block;
clear: both;
} </style> </head>
<body> <div class="header clearfix">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div> </div> <div class="content"></div> </body>
relative与absolute定位：
fixed：完全脱离文档流，参照物是可视窗口，可以设置top,left,right,bottom
relative:不脱离文档流，参照物是自己原本的位置，可以设置top,left,right,bottom
absolute：完全脱离文档流，参照物已定位的父级标签，可以设置top,left,right,bottom
一般，
（1）给某些元素进行定位，设置absolute；
（2）改定位标签的父元素设置定位；
<style>
body{
margin: ;
}
.c1{
width: 200px;
height: 200px;
background-color: #53868B;
}
.c2{
width: 200px;
height:200px;
background-color: cornflowerblue;
position: absolute;
top:200px;
left: 200px;
}
.c3{
width: 200px;
height: 200px;
background-color: darkmagenta;
}
.box{
position: relative;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="box"><div class="c2"></div></div>
<div class="c3"></div>
京东轮播图布局：
14