1.前端基础班第一个大项目大致个人理解: 做一个node.js包管理可视工具,分析npm下载的包中,每个包之间的依赖关系,将关系图,使用页面显示出来,可使用echars等工具,进行数据分析。 2.css常用布局技巧 2.1.margin 负值运用 1. 让每个盒子margin 往左侧移动-1px正好压住相盒子边框 2.鼠 标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index) 2.2文字围绕浮动元素 巧妙运用浮动元素不会压住文字的特性,所以文字就不需要添加浮动。 2.3行内块元素的巧妙运用 需要元素与元素之间存在距离时 因为行内块元素之间本身就存在距离,所以就不用麻烦的方法来做。 2.4.CSS 三角形强化 width: 0; height: 0; border-color:transparent red transparent transparent; border-style: solid; border-width: 22px 8px 0 0; 2.5.CSS初始化 大多数网页初始化相同,可以提前编辑一些内容,方便之后使用,即就可以直接直接复制粘贴。 不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化 简单理解: CSS初始化是指重设浏览器的样式。(也称为CSSreset)每个网页都必须首先进行CSS初始化。 Unicode编码字体: 把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。 比如 : 黑体19ED1\4F53 宋体15B8B4F53 微软雅黑15FAE8F6F196C5\9ED1 2.6溢出的文字省略号显示 1.单行文字溢出显示省略号显示 /1.先强制一行内显示文本/ 默认 normal 自动换行)white-space: nowrap;/2.超出的部分隐藏/ overflow: hidden; /3.文字用省略号替代超出的部分 2.多行文字溢出显示省略号 overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示 /display:-webkit-box;限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2; /*设置或检索伸缩盒对象的子元素的排列方式/ -webkit-box-orient: vertical;text-overflow: ellipsis;