css3(2)

1. 表格样式<caption></caption>表格标题：
<table><caption>年度收入2016-2017</caption>
<tr><th></th></tr><tr><td></td></tr></table>
   属性：caption-side:bottom;
   表格边框：border:solid 1px red;
   边框重叠：border-collspse:collapse;
2. cursor:pointer;鼠标放上去之后显示小手。
3. list-style-type:circle;
   list-style-type:square;
   list-style-image:url(“ ”); 前面的做法不太方便控制图片的方位。
   ul{
   list-style-type:none;
   list-style-image:url(“../img/1.png”);
   }
   我们可以这样：
   li{
   background-image:url(“./img/1/png”);
   background-repeat:no-repeat;
   padding-left:20px;
   background-position:0px 3px;
   }<ul type=”square”;><li>12</li><li>45</li></ul>
不用css的话可以用type属性。
4. 浮动
   块元素特点：
   a .块元素是单独占满一行(占满文档流)
   b .块元素的内容默认显示在块的左上角。
   常见块标签：
   <table></table> <p></p> <div></div>
<ul><li></li></ul> <ol></ol> <dl></dl>
<dt></dt> <dd></dd> h1-h6
   样式会受到左边或右边浮动的影响:
   clear:left; 清除影响在他左边的块的浮动。
   clear:both; 清除影响在他左边右边块的浮动
   解决盒子坍塌问题：
   我想给container一个高度自适应，这时候出现了盒子坍塌

  <div id="header">头部</div>
  <div id="container">
    <div id="mleft"></div>
    <div id="mright"></div>
    <div style="clear:both;"></div>
  </div>
  <div id="footer"></div>
  加一个div清除浮动对下面块的影响。

1. 行内元素
   a .不单独占满一行。
   b .设置height,width不起作用。
   常见行内元素：
   a,i,img,input,label,textarea,span,strong。
2. 行内元素和块元素可以相互转化
   display:block;
   display:inline;
   display:inline-block;
   margin:0px auto; 居中
3. 盒子模型-边框，内间距，外间距。
   内间距：
   padding:10px;上下左右**撑开**10px
   padding:10px 20px; 上下，左右
   padding:10px 5px 2px; 上，左右，下
   padding:1px 3px 5px 7px; 上，右，下，左
   div{
   width:100px;
   height:100px;
   border:solid 2px red;
   padding:10px;
   box-sizing:border-box;
   }上下左右都撑开了10px,
   box-sizing:border-box使得盒子的宽高不变。
   外间距:
   Margin-top:10px;
   Margin-bottom:10px;
   Margin-left:10px;
   Margin-right;
   Margin:0px auto;块元素在父元素剧中。
4. *｛
   padding:0px;
   margin:0px;
   ｝