css布局细节问题处理方案

css写页面时，遇到了以下的一些问题  每每写页面都要去搜索解决方案  ，现在整理如下，分享给朋友们：

1.背景图片高度自适度

padding-bottom: 100%;

height: 0;

2.让底部内容一直固定在底部 

3.导航添加分格线

.top ul li + li { border-left: 1px solid #ddd;}

4.最优清除浮动

.clearfix:before,.clearfix:after{content: " ";display: table;}

.clearfix:after{clear:both;}

5.去除img之间的空隙

font-size: 0;

vertical-align: bottom;

6.使用css设置双线条边框

border:2px solid #f9e42b; //边框

outline:2px solid #f9e42b; //外轮廓

outline-offset:6px; //主要属性 设置边框与外轮廓的间距

7: 使用flex布局时，遇到如下图情况，我的做法是在最后面加一个空li ,如有其它好的解决方案，欢迎推荐

8.移动端导航左右滑动效果 （以前一直以为只有js插件能够实现，其实css一个属性就搞定）

overflow-x: scroll;  //裁剪内容 - 提供滚动机制。

9.一些CSS属性

vertical-align middle 垂直居中

display: table-cell;

text-decoration: line-through; 删除线

pointer-events:none; 取消元素鼠标点击事件  就是让元素变成透明不能点击状态

overflow: hidden; 元素超出隐藏

text-overflow: ellipsis; 文字超出隐藏

white-space: nowrap;  文本强制单行显示

border-collapse: collapse;  表格边框单行线

table,tr,th : border:1px solid #000;  表格边框