[构建发布-CSS] 最近css整理最近css整理【？】水平ul>li，可以设置display:inline, 但

最近css整理

【？】 水平ul>li，可以设置display:inline, 但是对于较为复杂的水平列表，如果浮动列表项，然后使用margin将列表项分开，会更灵活 1. 灵活体现在： inline 或者 line-block会导致li之间存在空白间隙，解决方案： 给ul设置font-size=0,再给每个li设置对应的font-size。 2. 间隙产生的原因是： 写代码的时候格式化产生的，也就是 </li结尾>空白/换行导致的的空白间隙<li开始> 可以排在一起就不会有间隙了

ul.pagination li {
	float: left;
	margin-left: 0.6em;
}

当元素(ul>li)浮动的时候，它不在占据原来的位置。因此，父列表(ul元素)实际上是没有内容的，它就会收缩。从而隐藏列表的背景色等等内容。有几种方法可以让父元素包含浮动子元素 1. 添加一个进行清理的元素，但这会在页面中增加不必要的标记，尽可能避免 2. 让父元素浮动，并且使用某个元素（比如站点页脚）对它进行清理以便换行 3. 使用overflow:hidden;,创建一个BFC

ul {
	margin: 0; // 因为IE早期版本和Opera使用margin-left控制列表缩进， 而Safari和Firefox在内的大多数现代浏览器则选择使用padding-left。 因此需要去掉浏览器的默认行为
	padding: 0;
	list-style: none;
	width: 72em; //
}

ul>li>a
1. display: block这样可以让链接占满父元素，从而让整个li都可以点击，否则就是只有<a>内容</a>内容区域长度可以点击
2. 设置line-height 让链接文本竖直居中
纯css工具提示

绝对定位元素的定位相对于最近的已定位祖先元素（如果没有，就相对于祖先元素）下面的例子中，已经定位了a，因此span相对于a定位

<a href="xxxx" class="tooltip">Something <span>tooltip content</span></a>

a.tooltip {
	position: relative;
}
a.tooltip span {
	display: none;
}
a.tooltip:hover span {
	display: block;
	position: relative;
	top: 1em;
	left: 2em;
}