最近给博客换了一个新的主题布局，把以前传统方式的侧边栏给换成了导航栏，同时利用font-awesome图标加了些分类和标签。由于之前没有系统的看过关于css+div方面的书籍，只是在用到某个效果时临时的Google，于是在这边纪录下用到的一些非常有用的css+div的tips.

1. 图片根据所在div容器的范围自适应大小.

img {
    max-width: 100%;
    max-height: 100%;
}

2. 导航栏固定在最顶端，且两边margin都为0.

.site-nav {
    width: 100%;
}

3. 改变div中文字大小，使其适应，比如导航栏中的搜索框.

.nav-search {
  line-height: 25px;
}

4. 移除搜索框的外围边框，同时移除输入搜索时出现的outline.
如下面图示，第一幅图就是搜索输入框，默认会出现灰色的边界框。而第二幅图中蓝色框圈所示就是在用户点击输入时出现的框圈，很多时候你发现这两种框圈的显示效果会很难看，通过下面的css样式，便可以移除。

Fig 1. search input with grey border

Fig 2. outline with yellow border

.nav-search input#search {
  /* remove input border */
  -webkit-appearance: none;
  border: 0;
  /* remove outline */
  outline: none;
}

5. div + display 选项.
none: 一些media options时如果想要在小屏幕（如智能手机上）不现实某个div，则可以用display:none选项。
inline: 只占用它所需要的最小的宽度，且不必强制换行（其左右均可以有元素存在). 不可以设置高度和宽度属性。也没有top-margin,top-padding属性。
block: 占用整个可用的宽度，之前和之后都有空行。 高度，宽度，margin，padding都可以设置。
inline-block: 具有inline的特点，占用最小宽度，但没有强制换行，其左右均可以有元素。却有block的属性：可以设置高度和宽度等。

6. @media query 规则.
移动互联的今天，仅仅是pc端已经远不能满足用户的多途径浏览需求了，如smartphone, tablet, laptop等等。如果使你的网站真正的mobile-friendly便尤为重要了，而最简单的实现方法就是通过@media 规则来。

/* screen display side >= 960 px(common large desktop display) */
@media print, screen and (min-width: 960px) {
}
/* screen display size >= 661 and <= 960 px(common laptop display) */
@media print, screen and (min-width: 661px) and (max-width: 960px) {
}
/* screen display size >= 481 and <= 660px (common tablet etc) */
@media print, screen and (min-width: 481px) and (max-width: 660px){
}

/* for small screen device, like smartphone*/
@media print, screen and (max-width: 480px) {
  .nav-search {
    display:none;
  }
  .nav-logo {
    display: none;
  }
}

如你可以根据不同屏幕的大小来设置不同class,id的显示与否，颜色等各种特性。
7. width 100% vs. auto
很多时候，对于block元素，默认的宽度便是占满父容器剩余空间，如有margin，padding时，其默认宽度设置便是剩余的宽度。这便是width:auto的效果。而很多时候，一些developer喜欢把宽度设置成100%，其表明把其宽度设置成父容器相同的长度，这样如果该block再有padding或是margin的属性，其便会延伸到父容器外面去。可以参考JSFiddle上的一个例子.

后续新的tips,会持续更新……

-引用

[1]. img标签auto resize
[2]. Display选项
[3]. inline vs inlink-block
[4]. float vs display
[5]. width auto vs width 100%
[6]. Media queries