盒子模型+响应式布局 + 原型链与继承
盒子模型
是什么
css布局基础,规定了元素在页面上如何呈现,以及元素之间的空间关系
由content + padding+border+margin四部分组成
为什么
盒子模型分为
标准盒子模型: 元素的宽度与高度 只包括content
IE盒子模型: 元素的宽度与高度 包括content,padding,border
在实际操作中,不好布局
怎么办
css3引入新属性,
border-box : border-box(使用IE盒子模型)
响应式布局
是什么
开发一套代码,使页面自适应不同的的屏幕
为什么
开发一套代码,使页面自适应不同的的屏幕
怎么办
- 百分比布局
依托于父元素的宽高,
子元素的宽高分别依托于父元素的宽高
但是padding,margin,border这些又不同
同时,通过设计稿来看 ,计算困难 - 媒体查询
@media,多套样式代码,繁杂 - rem响应式布局
相对于HTML根元素的fontSize的大小 - vm/vh
相对于视图窗口的宽度/高度
100vw=视图窗口宽度 - 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(原型对象)
- 构造函数具有prototype属性 指向 另一个对象原型对象
- 原型对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
- 将公共方法定义在原型对象上,这样所有对象实例就可以共享这些方法
- 构造函数与原型对象的this指向实例化对象
原型对象的属性 constrctor
注意
当将构造函数的原型对象采取对象形式赋值后,该原型对象的constructor属性不再指向构造函数
对象的属性 __ proto __
指向该构造函数的原型对象
原型继承
原型链
