煲纸学习笔记——cssTips

1. 清浮动

   .clearfix::before,
   .clearfix::after{
   	content:" "; 
   	display: block; 
   	clear:both; 
   }

2. 定位
   1. 相对定位：起点是该元素在文档流中的位置 但是会提高该元素的层级 如和其他层相遇会覆盖 不脱离文档流
      • 元素不会脱离文档流（重要）
      • 不改变后面的元素布局
   2. 绝对定位 ：起点是包含块 起点是开启定位的祖先块元素 行内元素的会变块元素 高度被内容撑开 开启绝对定位的时候，把偏移量都变0就可以在包含块中 垂直水平居中
      • 元素会脱离文档流
      • 会影响后面的布局
   3. 宽度 可以设置一个公共类 设置页面最小的宽度min-width
   4. 文字多出来的变省略号 效果如下图

   .class{
   		width:10px;
   		overflow:hidden;
   		text-overflow:ellipsis;
   		white-space:nowrap;
   	}

3. 元素对齐 居中问题

   • 水平对齐text-align: 可选值 left right center justity (两边对齐)

   • 垂直对齐 当字体大小不一样时对齐方式

     line-hight:和元素高度一样就可以

     • vertical-align: baseline基线对齐 （默认值）
     • top 顶部对齐
     • bottom 底部对齐
     • middle居中对齐

4. 隐藏文字方式: text-index: -9999px；

5. 如何隐藏一个元素

   height：0;
   over-flow:hidden；
   // 和display：none一样
   
   visibility:hidden;
   // 渲染但是隐藏
   
   display:none;
   // 不渲染 
   
   opacity:0
   // 透明度为0

6. 在项目上线的时候需要压缩代码，以保证加载速度。

7. 做背景图片全覆盖

   body {
   		background:  url(../assets/img/welcome.jpg) center no-repeat;
   		background-size: cover;
   		min-height: 100vh;
   		// 最小高度
   		justify-content: center;
   		align-content: center;
   		display: flex;
   		margin: 0;
   		padding: 0;
   		box-sizing: border-box;
   	}

8. 移动端滚动条卡顿需要

   overflow: scroll;
   -webkit-overflow-scrolling: touch;//这个属性可以实现，手指离开屏幕会惯性滑动一段距离