css常用技巧

（本人学疏才浅，没什么好的技术分享，个人感觉这些内容比较少用但又必须得会，就大家一起分享，个人正在努力记忆中）

1、display显示与隐藏（不占位的隐藏）-记住
•        隐藏：display:none;
•        显示：display:block; 将隐藏的元素显示出来
2、visibility显示与隐藏（占位隐藏）
•        占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
        要能说出display和visibility的区别
3、overflow溢出隐藏
•        overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
•        overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
•        overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
     在实际工作中overflow:hidden;可以解决两个问题：
      1.解决嵌套的两个盒子的外边距塌陷（给子级盒子添加margin-top父级会跟着下来）我们可以添加overflow:hidden;解决；
      2.可以清除浮动（一个父级盒子里面的子级盒子浮动以后，咩有给父级盒子设置高度，子级浮动以后父级默认的高度为0） 我们可以添加overflow:hidden;去智能的测试            子级的高度然后撑开父级盒子
4、用户界面-鼠标样式
•        鼠标样式：cursor
•        小白（默认） cursor:default;
•        小手： cursor:pointer; 提示用户可以点击下一步
•        移动： cursor:move;
•        文本： cursor:text;
•        禁止： cursor:not-allowed;
常用cursor:pointer;，cursor:move;，cursor:not-allowed;
5、vertical-align实现图片和文字垂直对齐
•        常用的取值：top（顶线对齐）bottom（底线对齐）middle（中线对齐）
•        vertical-align:middle; 让行内元素、行内块元素垂直居中；
•        常见的行内元素：a、span
•        常见的行内块元素：img、input
注意：如果添加vertical-align:middle; 没有实现垂直居中效果，我们就给父级盒子添加一个行高就可以生效；
6、去除图片底侧空白缝隙
Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐，一般直接写在css最上方，（常用）  
7、溢出的文字省略号显示（一定会用）
•        white-space:normal; 默认处理，文字一行显示不下就折行显示；
•        white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
•        text-overflow:clip; 不显示省略号，直接裁剪；
•        text-overflow:ellipsis; 隐藏的内容以省略号显示；
三步曲（重要）
第一步  让文字强制在一行显示：white-space: nowrap;
第二步：将超出固定宽高的内容溢出隐藏overflow: hidden;
第三步：让隐藏的文字以省略号显示：text-overflow: ellipsis;

      css常用技巧

（本人学疏才浅，没什么好的技术分享，个人感觉这些内容比较少用但又必须得会，就大家一起分享，个人正在努力记忆中）

1、display显示与隐藏（不占位的隐藏）-记住
•        隐藏：display:none;
•        显示：display:block; 将隐藏的元素显示出来
2、visibility显示与隐藏（占位隐藏）
•        占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
        要能说出display和visibility的区别
3、overflow溢出隐藏
•        overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
•        overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
•        overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
     在实际工作中overflow:hidden;可以解决两个问题：
      1.解决嵌套的两个盒子的外边距塌陷（给子级盒子添加margin-top父级会跟着下来）我们可以添加overflow:hidden;解决；
      2.可以清除浮动（一个父级盒子里面的子级盒子浮动以后，咩有给父级盒子设置高度，子级浮动以后父级默认的高度为0） 我们可以添加overflow:hidden;去智能的测试            子级的高度然后撑开父级盒子
4、用户界面-鼠标样式
•        鼠标样式：cursor
•        小白（默认） cursor:default;
•        小手： cursor:pointer; 提示用户可以点击下一步
•        移动： cursor:move;
•        文本： cursor:text;
•        禁止： cursor:not-allowed;
常用cursor:pointer;，cursor:move;，cursor:not-allowed;
5、vertical-align实现图片和文字垂直对齐
•        常用的取值：top（顶线对齐）bottom（底线对齐）middle（中线对齐）
•        vertical-align:middle; 让行内元素、行内块元素垂直居中；
•        常见的行内元素：a、span
•        常见的行内块元素：img、input
注意：如果添加vertical-align:middle; 没有实现垂直居中效果，我们就给父级盒子添加一个行高就可以生效；
6、去除图片底侧空白缝隙
Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐，一般直接写在css最上方，（常用）  
7、溢出的文字省略号显示（一定会用）
•        white-space:normal; 默认处理，文字一行显示不下就折行显示；
•        white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
•        text-overflow:clip; 不显示省略号，直接裁剪；
•        text-overflow:ellipsis; 隐藏的内容以省略号显示；
三步曲（重要）
第一步  让文字强制在一行显示：white-space: nowrap;
第二步：将超出固定宽高的内容溢出隐藏overflow: hidden;
第三步：让隐藏的文字以省略号显示：text-overflow: ellipsis;