首先我们写好一个简单的HTML代码，用来摸你网站头部部分，你肯定能看懂

 

　　先看看效果吧

 

　　现在我们给 html 穿上衣服，让它更漂亮

 

　　全局设置：

 

　　最大的头部盒子设置：

 

　　头部logo盒子设置：

 

　　头部导航nav设置：

 

　　我们看一下穿上衣服的效果

 

　　这里会有一个问题，我把浏览器框拉小，再看看：（左边我用红色边框，框起来了）

 

　　看到导航栏被挤压掉下来了，下面的h2标题也是一样，一行已经不够显示了，就掉下来了

 

　　那么怎么解决问题呢？

 

　　我们可以想：既然是会换行，那么就是没有空间来显示这个行元素的空间

 

　　那么我们给他足够的宽度试一下！

 

　　再来看看效果：

 

　　还是不行？那怎么办？我们给 .nav 加一个边框看看

 

　　这里显示的是只有400px，因为我们没有给 .nav 做左浮动。所以前面logo的下面也有100px属于 .nav

 

　　然后剩下来的400px，就不够 li 加上 li 的边框显示了，就会换行了

 

　　解决办法就是宽度再增加、或者给 .nav 也做一个左浮动

 

　　效果就成了这样了

 

　　下面的 h2 是没有加宽度的，所以被压缩了。我们再把浏览器拉小一点看看 .nav 的变化

 

　　给 .nav 设置宽度后，现在已经不会被挤压掉下来了。但是 h2 还是会被挤压掉下来

 

　　我们也给 h2 一个宽度看看效果

 

　　看看效果：

 

　　也是没有被挤压掉下来了

 

　　我们可以看到，一个固定的宽度属性，对于行元素是非常重要的。

 

　　注意这个小问题，就不会让自己写了大页面以后发现这个问题很头痛，其实也是一个很简单的问题

 

　　可以使用 （浮动，要注意父元素塌陷的问题，还有清除浮动）可以使用 （行内块级，这个让块之间产生一个间隔，这个间隔很头疼）可以使用 （弹性布局，非常灵活。需要理解透就非常好用，不然就很难控制它）还可以使用 （这个我不怎么用…就不说了，大家可以尝试）