css,js基础总结(面试笔记)
一.CSS基础
1.1 盒模型
本质是一个盒子,对周围和其他html元素进行封装包扩border padding margin content,允许我们
对盒子进行操作
1.2.让盒子水平垂直居中的方法
1.使用子绝父相,在子元素设置 margin为0,在设置top,left, right,bottom为0
2.使用定位,再子盒子内top:50%,left:50%,transform:translate盒子本身的-50%
3.使用弹性布局 ,
在父盒子display:flex
在子盒子内 justify-content:centent;
align-items:centent
4. 利用cale(父盒子-子盒子)/2,计算出top跟left的距离
直接设置top跟left负距离
5.直接margin-left跟margin-top
1.3.css确定优先级
css的继承性
优先规则:最近的祖先元素比其他祖先元素优先级高
优先规则:直接样式比祖先样式优先级高
选择器的优先级
优先规则:内联样式>id选择器>
类选择器 = 属性选择器 = 伪类选择器 >标签选择器 = 伪元素选择器
1.4.浮动的工作原理和解决方法
工作原理:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
解决方法:
1.溢出隐藏 overflow:hiddeen
2.添加一个空标签,style="clear:both"缺点是多出很多无意义标签
3.使用一个br标签和其自身的html属性clear=all
4.overflow:auto
5.采用伪元素方法清除,设置
content为空,
dsiplay:block,
clear:both
visibility:hiddeen
1.5.css隐藏元素的方法
1. display设置为none
2. 通过position的方式将元素定位到远离页面
3. 通过设置透明度opacity:o 隐藏元素
4. visibility:hidden
1.6css的元素分类
块级元素:div ul li tabbar h2
特点:独占一行,可以设置宽高,不设宽的情况下,宽度跟父元素相同。可通过display:block设置为块级元素
行内元素:a span br
特点:不能设置宽高,内容高度由文本填充,一行可以有多个元素,行内元素与行内元素有空隙间隔
可通过display:inline设置
行内块元素:image input
特点: 一行可以有多个,也可设置宽高,可通过display:inline-block来设置
1.7.Link标签和 @import
link标签除了可以加载css,还可以定义ref连接属性。
@import直接加载css
link直接加载同时显示CSS。
@import 先下载再加载
1.8.css三角形
宽高必须为0
border:2px solid transparent(设置颜色为透明)
面向那边就让那边的颜色显示 border-bottom-color
1.9 外边距塌陷
两个嵌套关系的块级元素,父元素有或者没有外边距(margin-top)时,子元素也有外边距,则连个外边距合成一个上外边距,造成外边距塌陷
解决方法:
设置一个border或者一个padding,但会撑大盒子
触发BFC块级格式化上下文
- 父元素的overflow为auto或hidden
- 父元素的display的值为table-cell或inline-block
2.0 cs3新特性
1.文本阴影 tetx-shadow box-shadow
2.圆角边框 border-radius
3.transform过渡
4.线性渐变 background-image:linear-gradient background-color:linear-gradient
二.JacaScript基础
2.1栈和堆
js的数据类型主要分为两大类,一是简单数据类型,二是引用数据类型
简单数据类型:string ,Number,Null,Boolaen,Undefing
引用数据类型: Function, Array,Object
什么是栈和堆
栈:由操作系统自动分配的内存,自动释放,占据固定大小空间
堆:由操作系统动态分配的内存,由程序员进行释放,也可由垃圾回收机制回收,
栈跟堆的区别
基本数据类型的值存放在栈中,引用类型的值存放在堆中
基本数据类型有固定的大小和值,存放在栈中,而引用类型不确定大小,但其引用地址是固定的,存放在栈中,指向存在堆中的对象
基本类型在环境执行后销毁,而引用类型只有在引用变量不存在时,会被垃圾回收机制回收
2.2创建对象的几种方式
1.使用object构造函数创建
var parson = new Object()
parson.name = "米奇妙妙屋"
console.log(parson.naem);
2.使用对象字面量表示法
var parson = {name:'jhhh'}console.log(parson.name);
3.使用自定义构造函数创建对象
// 3.自定义构造函数function Parson(uname,age,sex) {this.uname = uname;this.sex = sex;this.age = age}var ldh = new Parson('刘德华',18,'男')var zxy = new Parson('张学友',18,'男')console.log(ldh);console.log(zxy);
4.工厂模式创建对象
function creatPerson(name,age) {var obj = new Object();obj.name = name;obj.age = agereturn obj}var ldh = creatPerson('刘德华',18)console.log(ldh);
2.3. 作用域链
作用域链:内部函数访问外部函数的变量,采取的链式查找的方式来决定取那个值,这种结构称为作用域链,就近原则
2.4 继承对象的方法
2.5 什么是闭包,为什么要使用,闭包的利弊
简单来说,闭包就是内部函数调用外部函数的变量,让这些变量始终保存在内存中,不会被垃圾回收机制回收
作用:延长变量的作用范围
利:减少命名冲突,不会被回收垃圾机制回收,
弊:过多使用闭包,会使内存变大,影响浏览器性能,造成内存泄漏
2.6.JS延迟加载的方式
1.defer属性
用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。
2. async 属性
不让页面等待脚本下载和执行,从而异步加载页面其他内容。
3.使用setTimeout
延迟方法
4.让JS最后加载
把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度
2.7 什么是跨域
浏览器从一个域名的网页请求另一个域名的网页资源时,域名,端口,协议任一不同,都视为跨域
2.8深拷贝和浅拷贝
1.浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝引用地址
2.深拷贝:深拷贝拷贝多层,每一次别的数据都会拷贝
浅拷贝的方法:Object.assign(拷贝给谁,把谁给拷贝) Array.prototype.slice
深拷贝的方法:JSON.parse
2.9 本地储存
sessionStorage跟loactionStorage
sessionStorage
生命周期为关闭浏览器的窗口,在同一个页面下,数据可以共享,以键值对的形式存储数据
储存数据:sessionStorage.setItem(key,value)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
删除所有数据:sessionStorage.clear( )
loaclStroage
生命周期永久存储,除非手动删除,在同个浏览器内可以通过多个页面分享数据
属性同上
3.0 作用域
js作用域:就是代码,(变量)在某个范围内起作用和效果。目的是为了提高程序的可靠性,更重要的是减少命名冲突
js的作用域在es6之前只有全局作用域和局部作用域
全局作用域:整个script标签 或者是一个外部引入的js文件
局部作用域:在函数内就是局部作用域,这个代码的名字只在函数内部起效果和作用
3.1原型和原型链
原型:
所有函数都有一个原型属性prototype
所有对象都有一个(隐式原型)属性—proto—
引用类型—proto—指向他构造函数的prototype
function Student(name) {this.name = name}console.log(Student.prototype);const zhangsan = new Student()console.log(zhangsan.__proto__);console.log(zhangsan.__proto__ === Student.prototype);
原型链
当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
简单来说,添加一个
Student.prototype.a = 1
console(zhangsan.a)
打印一个zhangsan.a,则控制台输出a=1,但在张三这个对象里面没有a这个属性,所以去它的构造函数的prototype里面查找(找到了),若找不到则去prototype.—proto—查找,即Object.prototype,若再找不到,则再往最顶一级Object.paototype._proto_,若找不到,返回null
3.2 null跟undefined区别
null 表示一个尚未存在的对象,转为数值是0:原型链的终点
undefined表示一个未定义的对象,转为数值是NaN:如变量声明,而未赋值,显示undefined
3.3垃圾回收机制
垃圾回收:js代码想要运行,需要操作系统或者运行时提供内存空间,来存储变量及它的值。在某些变量(例如局部变量)在不参与运行时,就需要系统回收被占用的内存空间,称为垃圾回收
css,js基础总结(面试笔记)相关推荐
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
- 前端JS基础知识复习笔记(1)
珠峰前端JS基础复习笔记(1) 在财务工作中自学了HTML和CSS之后,硬啃了JS高级编程三,实在觉得想要学的透是需要找一位好老师的,于是最近在学习周啸天老师的JS高级编程课,课外需要再补补基础,就回 ...
- 前端JS基础知识复习笔记(2)
珠峰的JS基础课程笔记(第二天) 今天早上做完了变量的作业,下午听基础课做做笔记,最好没有事干的时候可以翻出来看看,欢迎大家收藏和我一起复习回顾记忆,一起学习一起成长一起挣钱钱ヾ(◍°∇°◍)ノ゙ . ...
- HTML/css/js 基础笔记
网站的建站流程 页面图例 网页的结构 WEB标准 WEB标准是网页制作的标准,它不是一个标准,它是根据网页的不同组成部分生成的一系列标准.这些标准大部分由W3C起草发布,也有部分标准由ECMA起草发布 ...
- CSS(基础,面试,常见用例)
CSS规则 [*]CSS选择器 一. CSS选择器 二.选择器匹配原理 三.优先级 / 权重 四.可继承 / 不可继承样式属性 [*]盒模型 一.盒模型 二.box-sizing属性 三.offset ...
- 前端基础知识点整理(html+css+js基础)、不包含框架
css盒子模型 盒模型都是由四个部分组成的,分别是margin.border.padding和content. 标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同.标 ...
- HTML+CSS+JS 传智 详细笔记
HTML(1)- -毕向东老师对Html的简介 CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 html&css等等练习表(W3Cscholl) js练习表回顾 ...
- js基础教程学习笔记
document.write(); document.getElementById(); <script type="text/javascript"></scr ...
- HTML CSS JS基础
HTML 1.初识HTML <!DOCTYPE html> <!--DOCTYPE:告诉浏览器使用什么规范(默认是html)--> <html lang="zh ...
最新文章
- 2021年大数据Kafka(七):Kafka的分片和副本机制
- 一篇文章搞定Python全部基础知识
- xml命名空间只是标记区分不同的空间的作用,一般与上网无关,虽然通常都写的是URL网址
- Python 中引入多个模块,包的概念
- 对话阿里巴巴贾扬清:如何成为一名优秀的 AI 架构师?
- java ee cdi_Java EE CDI限定词:快速浏览
- Fedora32升级Fedora33后无线网络无法连接的问题
- vue 为什么要销毁第三方实例_Web前端工程师面试之Vue问题汇总解析
- ubuntu21.04美化使用
- PHP多功能自动发卡平台源码带手机版 带多套商户模板
- Handing time
- Docker:架构分解
- 建兴固态硬盘垃圾/LITEON SSD SUCKS
- 使用opencv-python制作屏幕录制工具
- SpringBoot微信小程序商城(前台+后台)源码分享
- ls-dyna基础教程
- C语言之memset函数
- 概念结构设计( 实体与属性的划分原则、E-R图的集成)、逻辑结构设计(任务、步骤、转换方法、数据模型的优化、设计用户子模式、物理结构设计)....
- 45. Jump Game II(跳跃游戏II)
- 人活着的目的是什么?
热门文章
- 从数据保护到统一数据管理平台,爱数的数据之道又升级了!
- 名创优品怎么把创意做成生意?
- 连的共享打印机显示服务器脱机,共享打印竟然脱机,追根寻底找出缘由
- 黑盒测试用例测试方法
- 《Redis实战篇》一、短信登录
- 承接上一篇:说说评论弹出editext,计算软键盘高度,使listview,recyclerview上滑指定高度
- 服务器怎么接收gsm的信息,gsm短信服务器
- 微信小程序实现城市索引选择+搜索(附加城市js文件)
- VideoProc 全能视频处理工具,剪辑、转码、下载视频
- 计算机专业小新pro14,联想小新pro14对比小新air15 2021款哪个值得买