sub,dl,dt,排版,横向滚动条,浮动元素居中，box-sizing

1.sub标签 下标

2.dl,dt,dd用的地方通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。在使用时候我们能简洁html代码情况下，学会灵活使用dl dt dd，

3.实现左侧自适应右侧固定宽度的布局

　　3.1  rightbar必须在left前面,因为块级元素在前面的话，浮动元素就自动到下一行了

<div class="wrap">
        <div class="rightbar"></div>
        <div class="left"></div>    
 </div>

.wrap {
		height: 50px;
		}	
	.left {
		margin-right: 200px;
		background-color: green;
		height: 50px;
		}
	.rightbar {
		float: right;
		 200px;
		background-color: red;
		height: 50px;}	

　　3.2 使用position:absolute 可以实现，但是如果rightbar高度比left高就会影响下一行元素

　　3.3 使用一个div包裹左侧div并浮动，通过外层div负margin，里面div正margin实现

　　3.4 传送门: http://jo2.org/css-auto-adapt-width/

4.一些名词: tooltips用于鼠标移到一些标签上会显示提示信息的情况

5.换行会出现空白字符，解决方案:给父元素设置font-size: 0;

<div class="container">
    <div class="left"></div> //空白字符
    <div class="right"></div>
</div>

6.如何让tab栏nav宽度大于屏幕宽度时，里面的元素不换行显示：用横向滚动条，将UL包裹在div.wrap里,当UL宽度大于屏幕宽度时,将UL宽度设置为所以li宽度的总和，div设置overflow-x：scroll

  <div class="nav-wrap">
                    <ul class="nav nav-tabs product-tab" role="tablist">
                        <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">特别推荐</a></li>
                        <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">微投资</a></li>
                        <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">微小宝</a></li>
                        <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微消费</a></li>
                        <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微增利</a></li>
                        <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微金宝</a></li>
                        <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微转让</a></li>
                        <li class="pull-right hidden-sm hidden-xs"><a href="#settings" >更多</a></li>
                    </ul>
                </div>

 var product_nav = $("#product-decoration .product-tab");
        var product_nav_width = 30;
        product_nav.children().each(function(index,element) {
            product_nav_width += element.offsetWidth;
        })
        if(product_nav_width > $(window).width()) {
            $("#product-decoration .product-tab").css("width",product_nav_width);
            $("#product-decoration .nav-wrap").css("overflow-x","scroll");
            //console.log(product_nav_width)
        }else {
            $("#product-decoration .nav-wrap").css("overflow-x","auto");
        }

 7.box-sizing

有3种值，content-box(默认),padding-box(有兼容问题),border-box