前端基础知识总结

南甫
195 阅读6分钟
810a19d8bc3eb135dd05d0db467c26d5fc1f447d.jpeg

大家好，我是南甫，两年前端经验的程序员一枚

如果喜欢我的文章，可以关注加点赞，一起成长吧

前言

工作时间越长，越发现前端的基础知识重要，今天呢，抽出点时间来整理一下js的基础知识，大家一起讨论一下，欢迎各位大佬补充~~~

1.HTML5增加的新特性

 内容元素：article footer header nav section
 表单控件：calendar date time emial url search
 控件元素：webworker websocket Geoloca

HTML5已经形成了最终的标准，概括来讲，它主要是关于图像，位置，储存多任务等功能的增加。
新增加的元素有绘画canvas,用于媒介回放的video和audio元素，本地离线储存localStorage长期储存数据，浏览器关闭后不会丢失数据，二sessionStorage的数据在浏览器关闭后自动删除。

2.浏览器的内核理解以及常见的浏览器内核

理解：浏览器的核心部分是"Rendering Engine",可大概翻译为"渲染引擎"，也就是我们所说的"浏览器内
     核"。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、Javascript）并渲染网页。所以，
     通常所为的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及
     页面的格式信息。不同的浏览器内核对网页编写的解释也不同，因此同一网页在不同的内核的浏览器里的
     渲染效果也不同，这也是编写着需要在不同浏览器测试网页显示效果的原因

3.Css3的新特性

 1.颜色：新增RGBA,HSLA模式
 2.文字阴影text-shadow
 3.边框：圆角（border-radius） 边框阴影:box-shadow
 4.盒子模型：box-sizing
 5.背景：background-size设置背景图片的尺寸   background-origin 设置背景图片的原点
     background-clip设置背景图片的裁剪区域 以"，"分隔可以设置多背景，用于自适应布局
 6.渐变：linear-gradient、radial-gradient
 7.过渡：transition,可实现动画
 8.自定义动画
 9.在Css3中唯一引入的微元素是：selection
 10.媒体查询，多栏布局
 11.border-image
 12.2D转换：transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
 13.3D转换

4.css reset 是什么，normalize.css是什么

 Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一（强制的，暴力的）
 
-Normalize.css是css reset的替代方案，保护有用的浏览器默认样式而不是完全去掉他们（温和的，根据浏览器特性的）
-一般化的样式：为大部分HTML元素提供
-修复浏览器自身的bug并保证各浏览器的一致性
-优化CSS可用性：用一些小技巧
-解释代码：用注释和详细的文档来

5.清楚浮动的几种方式

 1.父级div定义height
 原理：父级div手动定义height,就解决了父级div无法自动获取高度的问题，简单、代码少、容易掌握，但只适合高度固定的布局
 2.结尾处加空div，标签 clear:both
 原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear:both清除浮动，让父级div能自动获取到高度，如果页面浮动较多，就要增加很多空div，让人感觉很不好
 3.父级div定义伪类：after和zoom 
 `.clearfix：after{ 
     content：""； 
     display：block； 
     visibility：hidden；
     height：0； 
     line-height：0； 
     clear：both； 
     } 
   .clearfix{zoom：1}`
   原理：IE8以上和非IE浏览器才支持，after,原理和方法2有点类似，zoom（IE专有属性）可解决ie6,ie7浮动问题，推荐使用
4.父级定义overflow:hidden
原理：超出部分会被隐藏，不推荐使用
5.双伪元素法
`.clearfix：before，.clearfix：after { 
    content： ""； 
    display： block； 
    clear：both； 
    } 
.clearfix { zoom： 1；}`

6.px em rem 的取用

 1.px像素（pixel） 绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位，是计算机系统的数字化图像长度单位，
 如果px要换成物理长度，需要制定精度的DPI
 2.em是相对长度的单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸被人设置，则相对于浏览器默认字体尺寸。
 他会继承父级元素的字体大小，因此并不是一个固定的值
 3.rem是css3新增的一个相对单位（root em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
 4.区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小
   和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
   目前，除了IE8及更早版本外，所有浏览器均已支持rem

7.水平垂直居中的方法有哪些

  1.absolute + transform：绝对定位加+转换
   ` <div class="parent">
      <div class="child">Demo</div>
     </div>
   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }`
  2.inline-block + text-align + table-cell + vertical-align（单元格方式）
     `<div class="parent">
      <div class="child">Demo</div>
     </div>
     .parent {
       text-align：center;
       display：table-cell;
       vertical-align：middle;
     }
     .child {
       display： inline-block;
     }`
   3.flex + justify-content + align-items（弹性模型）
      `<div class="parent">
       <div class="child">Demo</div>
      </div>
      .parent {
        display： flex;
        justify-content： center; /* 水平居中 */
        align-items：center; /*垂直居中*/
      }`

8.href和src的区别

   1.src(source)指向外部资源的位置，指向的内容会嵌到文档中当前标签所在的位置，在强求src资源时会将其指向的资源下载并应用的
     文档中，如js脚本，img图片和iframe等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、
     执行完毕，类似于将所指向资源嵌入到当前标签内
   2.href（hypertext reference/超文本引用）指向网络资源所在位置，建立和当前元素（锚点）或当前文档之间的链接，
     如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别改文档为css文件，
     就会并行下载资源并且不会停止对当前文档的处理

结束语

好了，这期我们就总结一下HTML CSS的一些基础知识，也欢迎大家留言补充，下棋我们总结总结js部分 的基础，欢迎大家积极留言评论，别忘了三连哦~~~

感谢阅读，一起加油！

-To Be Continued-

avatar
文章
阅读
粉丝