前端技术分享贴【黑马web前端】

更新时间:2019年07月26日 10时52分27秒来源:黑马程序员论坛

CSS常用技巧：
1、display显示与隐藏（不占位的隐藏）-记住

• 隐藏：display:none;

• 显示：display:block; 将隐藏的元素显示出来

2、visibility显示与隐藏（占位隐藏）

• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；

3、overflow溢出隐藏

• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；

• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；

• overflow:auto;溢出滚动，将超出固定宽高范围的内容以滚动条的形式显示（不用）；

在实际工作中overflow:hidden;可以解决两个问题：

01、解决嵌套的两个盒子的外边距塌陷（给子级盒子添加margin-top父级会跟着下来）我们可以添加overflow:hidden;解决；

02、可以清除浮动（一个父级盒子里面的子级盒子浮动以后，咩有给父级盒子设置高度，子级浮动以后父级默认的高度为0）我们可以添加overflow:hidden;去智能的测试子级的高度然后撑开父级盒子；

4、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

5、用户界面-轮廓线

• 表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：

• outline:none；

6、用户界面-防止拖拽文本域

• Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；

7、vertical实现图片和文字垂直对齐

• 常用的取值：top（顶线对齐）bottom（底线对齐）middle（中线对齐）

• vertical-align:middle; 让行内元素、行内块元素垂直居中；

• 常见的行内元素：a、span

• 常见的行内块元素：img、input

注意：如果添加vertical-align:middle; 没有实现垂直居中效果，我们就给父级盒子添加一个行高就可以生效；
8、去除图片底侧空白缝隙

• Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：

• 01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；

• 02 直接将图片的显示模式更改为块级元素img{display:block;}（不推荐使用）

9、溢出的文字省略号显示（会用）

• white-space:normal; 默认处理，文字一行显示不下就折行显示；

• white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：

• text-overflow:clip; 不显示省略号，直接裁剪；

• text-overflow:ellipsis; 隐藏的内容以省略号显示；

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

前端技术分享贴【黑马web前端】

相关阅读