html+css小技巧大用处

1.用css border写下拉小三角：

<span class="sanjiao"></span>

.sanjiao{
    width:0;height：0；
    border-top:4px solid #ccc;
    border-right:2px solid transparent;
    border-left:2px solid transparent;}
  

2.图片设置右下边框，最外边框用外盒子边框

<div class="box">
    <ul>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
    </ul>
  </div>

.box{width:500px;height:600px;overflow:hidden;}
  ul  {width:510px;height:610px;  }
.s_bor{display:block;border-right:10px solid green;border-bottom:10px solid green;

box设width,height为最终看到的宽高给设置border，把ul边上出来的一块设置隐藏，overflow：hidden；ul设置的宽高刚好多出s_bor的边框宽度。

3.4个条件同时存在，才有一行文本后面有省略号的效果：

a{widht:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-spacing:nowrap;
}

4.高度塌陷

块级元素（如盒子）如果没有设置高度，并在盒子内其他元素上用了float属性，就会发生高度塌陷，要在块级元素（父级）上设置overflow：hidden属性将盒子撑起来就解决了塌陷问题。

5.若三个盒子并排显示在一行病、并且两两之间有margin，讲margin或者padding设置在中间盒子上。

6.margin元素具有上下重合左右叠加的特点。

7.display的几个属性：

inline：加宽高无效，加padding border margin 竖直方向只有显示效果不占空间。

block：width height padding margin border都可设置

inline-block：可以设置宽高，多个可占一行，但是每个之间有一定的margin.只有inline-block属性可以设置vertical-algin属性。

inline：浮动后可以变成块级元素

8.同行元素要加浮动，就都要加浮动。

9.让导航居中，ul设置宽（否则他的宽默认为父级元素的宽）后设置margin：0 auto； a 标签中的内容垂直居中,a转成块级元素设置行高line-height;水平居中给li设text-align