转行前端自我学习养成记之js学习记录篇——杂记
水平导航栏居中方法
尝试了4中将水平导航栏居中的方法，每种各种特点
第一种：display：inline；
将ul列表里的子元素设置成行内元素，再利用text-align：center就可以将导航栏居中了，图例的nav标签元素不是必须的
html元素设计如下：
css样式表如下：
我在导航栏前面加了一张图片。模拟页面页头的轮播图，li元素多设计了-2px像素的外边距，是因为元素自带了2px像素的间距，所以每个li元素之间会有空隙，加了hover效果之后，这个空隙就很影响美观，所以将其“中和”掉，而ul元素的上外边距给了个负值，因为导航栏跟图片会有空隙，影响美观，如果没有图片就不会有。设计成inline是最好理解也是最直观的、
第二种：display：block
用块元素就比较麻烦了，块元素要相对父级元素居中，首先自身的宽度要一定，再利用margin：0 auto；属性居中对齐。应用于导航栏要实现水平，ul里的li元素要流动float：left；所以margin属性对于li就不起作用了，但是ul元素是可以相对其父元素居中对其（比如body）的。所以就得计算ul的宽度，让其刚好包裹li，从视觉上就能实现导航栏的居中。图例中的header块元素不是必须的
第三种：相对定位position：relative
将ul的父元素相对边框距离left：50%，再将ul元素相对父元素边框距离left：-50%；因为用的是相对定位也就是相对本来的位置的偏移，所以由于位置的左右错位，刚好使得ul元素处于页面（或者ul父元素的父元素）居中位置，注意，必须设置ul父元素的父元素overflow：hidden属性，因为这么设置元素会溢出，可以通过背景色看出来。