黑马程序员技术交流社区
标题: 前端基础班个人理解 [打印本页]
作者: zhangzihao 时间: 2019-7-24 00:35
标题: 前端基础班个人理解
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;
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |