html技巧

1.防止盒子透出的解决办法
    overflow：hidden；float不为none；display：inline-block；
    position不为static&relative
    给父类加一个border-top：1px solid transparernt；

2.内联块的vertical-align是基于父元素的中线位置
在一个div内有一个span一个input则不对齐
给input设置vertical-align：top；则对齐；

3.button高度设置的是总高度border默认2px；
如果height设置45px；则内容高度为41px；border一共4px
如果要总高度都为45px
那么input高度hight设置43px border 1px solid gray
button则设置height设置45px

4.内容超出覆盖div底边框
.text-line{
     height: 0.5em;text-align: center;
     border-bottom: 1px solid red;}
.text-line>a{margin:0 10px;padding:0 10px;
     }

5.如何在文字之间加一个丨例如 ：登录丨注册
原理给注册一个border-left:1px solid gary;padding-left:1em;
div>span{border-left:2px solid grey;
         padding-left: 1em; margin-left: -16px;}
<div>
    <span>注册</span>
</div>

6.如何加一个小三角形
原理只有border并且所需要的border显示颜色
    position: absolute;
    content:"";top: 50%;right: -1em;
    border:5px solid transparent;
    border-top-color: red;