实例（一）简单实现新浪导航栏

项目场景：

学习来源：黑马前端p146-147
学习内容：简单实现新浪导航栏

---

问题描述

1.为什么导航栏的上边框和内容之间有一点点空隙？
2.为什么不用设置宽度？
3.为什么在设置样式时，选中超链接不直接使用元素选择器选中，而是要用类选择器＋元素选择器的方式选中？
4.如何给每个超链接设置内边距，使每个超链接都像一块一块的块体？

---

解决方案：

1.因为没有清除页面的内外边距
清除内外边距：

*{
   
  margin:0;
  padding:0;
  }

2.因为我们需要用内边距来给每一个小盒子直接设置相同的宽度，如果设置了一定的宽度，再去设置内边距就会撑开盒子

3.因为使用 .nav a 选中元素的权重是 10 + 1 = 11 ， 直接使用 a 的权重是 1 ， 11 > 1，可以避免其他选择器的权重比它大，改变设置的样式

4.要想把每一个超链接处于像一个小盒子的状态，即要将其转换成行内块元素，行内块元素可以像块元素一样对之设置宽度和高度，且能够像行内元素一样都处于一行上

.nav a{
   
  display:inline-block;
  }

---

代码实现

   /* 清除内外边距 */
        *{