写网页遇到的问题和解决

1. 问题：父容器无法被子容器撑开

解决：添加一个CSS样式设置为：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
/* End hide from IE-mac */

把clearfix应用到你想要撑开的外层容器即可解决。

注：后面三行为兼容Window IE设置，Mac IE由于"\"转义符的存在会忽略这段内容
大神参考链接：https://blog.youkuaiyun.com/piazini/article/details/8625935

2. 问题：文字溢出…

  1、单行文字溢出…

.box {
	width:100px;
	overflow:hidden;
  	text-overflow:ellipsis;/*设置溢出文本显示为...*/
 	white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
  }

  2、多行文字溢出…

.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

注意：
-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
1）display : -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2）webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

大神参考链接：https://blog.youkuaiyun.com/anwj1020/article/details/93481799

3. 问题：设置了margin:0 auto; 和宽度还是不能水平居中

解决：给需要居中的元素设置以下属性

 position:absolute; 
 left: 50%;
 transform: translateX(-50%);

大神参考链接：https://blog.youkuaiyun.com/mini_1251861209/article/details/100926745

4. 问题：把ul里面的li水平或垂直居中

解决：
  水平居中：
       HTML：

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

       CSS：

.box {
    width: 100%;
    height: 200px;
    border: 1px solid red;
}

.box ul {
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box ul li {
    list-style-type: none;
    height: 200px;
    line-height: 200px;
}

  垂直居中：
       HTML：

<div class="box1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

       CSS：

.box1 {
    width: 100px;
    height: 300px;
    border: 1px solid red;
}

.box1 ul {
    padding: 0;
    margin: 0;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box1 ul li {
    list-style-type: none;
    margin: 0 auto;
}

大神参考链接：http://www.divcss5.com/css3-style/c55312.shtml

5.问题：JQuery标签页切换导致轮播混乱（“动画累积”）

原因：
  我的自动轮播采用的是定时器+jquery fadeIn() / fadeOut()方法实现的，当我们离开轮播页（并未关闭该页面）后，定期器继续运行，但是动画效果并没有同步运行，而是被浏览器缓存起来了（“动画累积”），当我们返回轮播页后，积累了一段时间的动画才重新开始连续运行，这就导致了轮播混乱，直到累积的效果运行完毕，才重新开始正常的轮播

解决：
  每次动画开始前，清除之前累积的所有效果，jquery提供的stop(true,true)方法可以解决，只需要在每次动画执行之前调用一次即可

大神参考链接：https://blog.youkuaiyun.com/github_39532240/article/details/79260362