前端项目知识点总结

前端总结

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的参数数据格式出错

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

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

代码习惯

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

尾声

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=11hf36ftqotq3