盒子模型+响应式布局 + 原型链与继承

盒子模型

是什么

css布局基础,规定了元素在页面上如何呈现,以及元素之间的空间关系
由content + padding+border+margin四部分组成

为什么

盒子模型分为
标准盒子模型: 元素的宽度与高度 只包括content
IE盒子模型: 元素的宽度与高度 包括content,padding,border

在实际操作中,不好布局

怎么办

css3引入新属性,
border-box : border-box(使用IE盒子模型)

响应式布局

是什么

开发一套代码,使页面自适应不同的的屏幕

为什么

开发一套代码,使页面自适应不同的的屏幕

怎么办

1. 百分比布局
   依托于父元素的宽高,
   子元素的宽高分别依托于父元素的宽高
   但是padding,margin,border这些又不同
   同时,通过设计稿来看 ,计算困难
2. 媒体查询
   @media,多套样式代码,繁杂
3. rem响应式布局
   相对于HTML根元素的fontSize的大小
4. vm/vh
   相对于视图窗口的宽度/高度
   100vw=视图窗口宽度
5. flex 弹性布局
   基于css样式实现响应式布局
   父元素:flex-direction/wrap,justify-content,align-items,align-content
   子元素:flex-grow/shrink,flex-basis,align-self

实际开发过程

750px 移动端设计稿,然后将所有的px转换为rem/vm
单位的转换可以使用vscode插件 px to rem/vm 实现

原型链与继承

是什么

任何一个对象有__proto__属性,指向原型对象,原型对象也有__proto_属性,指向自己的原型对象,这样形成的链式结构叫做原型链

常用来做继承

为什么

js中实现封装,继承可借助构造函数实现
但是构造函数 , 存在浪费内存的现象(每次都要new 新对象)

怎么办

构造函数的属性 prototype(原型对象)

1. 构造函数具有prototype属性 指向 另一个对象原型对象
2. 原型对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
3. 将公共方法定义在原型对象上,这样所有对象实例就可以共享这些方法
4. 构造函数与原型对象的this指向实例化对象

原型对象的属性 constrctor

注意
当将构造函数的原型对象采取对象形式赋值后,该原型对象的constructor属性不再指向构造函数

对象的属性 __ proto __

指向该构造函数的原型对象

原型继承

原型链