前端项目知识点总结

前端总结

html

• 字体图标的引用 添加到项目 项目下载到本地 加font文件夹,将字体文件放进去 将css文件加入到link中
• 雪碧图 先用一个 span 标签 将span标签display:inline-block 设置图标的background-position
• 外边距合并的问题 父元素没有边界线, 无法构成盒子模型 此时调子元素的margin值, 父子元素都会改变出错 解决方法: 给父元素加属性 overflow:hidden;
• 标签 for 属性应当与相关元素的 id 属性相同

css

• 宽度和高度的自适应函数 calc(100vh - 60px)函数可以用来计算css的数值
• 初始化 可以把项目中各个部分都要用的部分提出来放在初始化的commons.css中 把握整个页面的情况, 将可复用的部分写在初始化样式中 初始化的时候直接加上 box-sizing: border-box
• 选择器 id选择器优先级太高, 在css中最好少出现
• 垂直居中 调节图片和文字的垂直: vertical-align:middle
• 图片下面有空隙的问题 vertical-align:top;
• 文本超出部分出现省略号 overflow:hidden;(溢出隐藏) text-overflow:ellipsis;(文本超出部分出现省略号) white-space:nowrap;(文本不换行) overflow: auto;（在布局内滚动）
• 把某个元素隐藏 display:none; 显示为无 visibility:hidden; 隐藏
• js实现浮动属性的改变 ie: style.styleFloat 非ie: style.cssFloat 另一种思路是两个class属性的转换
• 设置透明度 ie: filter:alpha(opacity=0) 非ie: opacity:0 书写css样式的将2个都写上，实现兼容
• margin 不同值个数 margin:10px 5px 15px 20px;上,右,下,左(顺时针) margin:10px 5px 15px;上,右左,下 margin:10px 5px;上下,右左 margin:10px;所有 4 个外边距都是 10px

JavaScript

设立"严格模式"的目的

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
• 消除代码运行的一些不安全之处，保证代码运行的安全
• 提高编译器效率，增加运行速度
• 为未来新版本的Javascript做好铺垫

js 解析过程

• 预解析
• 逐行执行代码

用jquery改变元素margin-top值

$(’#content’).css(“margin-top”,“11.25rem”);

js改变元素margin-top值

object.style.marginTop=“10px”.

HTTP

HTTP 出现 500 的状态码

• post或get的参数数据格式出错

报服务器错误的一个前端原因

• 前端向后端传的数据过多, 导致出现服务器错误.

代码习惯

• 边界醒目 给主要内容部分用醒目的边界画出来, 方便看位置的变化