首页技术文章正文

前端基础班个人理解【黑马web前端】

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

      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;

推荐了解热门学科

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 软件测试入门到精通


在线咨询 我要报名
和我们在线交谈!