制作简易的导航栏
首先我们写好一个简单的HTML代码，用来摸你网站头部部分，你肯定能看懂
看看我的状态是怎样的情况吗，我是h2，我用来演示网页主体部分
先看看效果吧 现在我们给 html 穿上衣服，让它更漂亮
全局设置：
*{
margin: 0px;
padding: 0px;
/*这里给全局设置，去除所有元素标签的内外边距*/
}
最大的头部盒子设置：
.nav_box{
border: 2px solid plum;
/*这里给最大的div（容器），加上紫色的边框、宽度为2像素，边框是实线*/
}
头部logo盒子设置：
.logo{
width: 100px;
/*加上宽度100像素*/
height: 50px;
/*加上高度50像素*/
line-height: 50px;
/*加上行高50像素，这个 行高=高度时 可以使里面的字垂直居中*/
background-color: red;
/*背景设置成红色，方便观察*/
float: left;
/*给logo盒子，加上做一个左浮动，*/
}
头部导航nav设置：
/*选择 .nav 下面的 ul 下面的 li*/
.nav ul li{
list-style: none;
/*去除 li的*/
float: left;
/*这里给li做的左浮动，可以让li横排显示*/
width: 100px;
height: 50px;
line-height: 50px;
/*设置宽、高、行高*/
background-color:orange;
/*背景橘色*/
border: 1px solid black;
/*加一个1像素的黑色实线边框*/
text-align: center;
/*让里面的字。水平居中*/
}
我们看一下穿上衣服的效果 这里会有一个问题，我把浏览器框拉小，再看看：（左边我用红色边框，框起来了） 看到导航栏被挤压掉下来了，下面的h2标题也是一样，一行已经不够显示了，就掉下来了
那么怎么解决问题呢？
导航栏被挤压、掉下来的问题解决办法
我们可以想：既然是会换行，那么就是没有空间来显示这个行元素的空间
那么我们给他足够的宽度试一下！
.nav{
width: 500px;
/*给包裹导航栏的div 一个宽度500像素，这个宽度要 > = 所有li加起来的宽度，边框也要算哦！*/
}
再来看看效果: 还是不行？那怎么办？我们给 .nav 加一个边框看看
.nav{
width: 500px;
border: 3px solid aqua;
/*边框加粗一点，看的更清楚*/
}
这里显示的是只有400px，因为我们没有给 .nav 做左浮动。所以前面logo的下面也有100px属于 .nav
然后剩下来的400px，就不够 li 加上 li 的边框显示了，就会换行了
解决办法就是宽度再增加、或者给 .nav 也做一个左浮动
.nav{
width: 510px;
/*宽度再加10px*/
border: 3px solid aqua;
}
效果就成了这样了 下面的 h2 是没有加宽度的，所以被压缩了。我们再把浏览器拉小一点看看 .nav 的变化 给 .nav 设置宽度后，现在已经不会被挤压掉下来了。但是 h2 还是会被挤压掉下来
我们也给 h2 一个宽度看看效果
h2{
width: 750px;
}
看看效果： 也是没有被挤压掉下来了
我们可以看到，一个固定的宽度属性，对于行元素是非常重要的。 注意这个小问题，就不会让自己写了大页面以后发现这个问题很头痛，其实也是一个很简单的问题
实现导航栏的多种方式
可以使用 float: left;（浮动，要注意父元素塌陷的问题，还有清除浮动）可以使用 display: inline-block;（行内块级，这个让块之间产生一个间隔，这个间隔很头疼）可以使用 display: flex;（弹性布局，非常灵活。需要理解透就非常好用，不然就很难控制它）还可以使用table （这个我不怎么用…就不说了，大家可以尝试）
至于display:inline-block 的留白间隙问题，大家可以看看这篇文章！ 里面说了怎么解决display: inline-block;行内块级的间隔问题
https://blog.csdn.net/qq_32614411/article/details/82223624
刚入门的小白写的，有错误的地方希望大佬能指点小生，感激不尽，欢迎讨论问题
做技术一定要一颗恒心，这样才不会半途而废。