当前位置：首页 > news >正文

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

news 2026/3/27 15:29:31

盒子模型

是什么

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

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

在这里插入图片描述

原型继承

在这里插入图片描述

原型链

在这里插入图片描述

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

盒子模型是什么 css布局基础,规定了元素在页面上如何呈现,以及元素之间的空间关系由content paddingbordermargin四部分组成为什么盒子模型分为标准盒子模型: 元素的宽度与高度只包括content IE盒子模型: 元素的宽度与高度包括content,padding,border 在实际操作中…...

编程日记 2024/4/15 23:07:01

面试准备集合 List

ArrayList 底层实现使用Object[] 动态数组进行存储特性支持存储null值非线程安全支持快速访问初始化方法无参–返回一个空的列表（DEFAULTCAPACITY_EMPTY_ELEMENTDATA）指定初始容量： new ArrayList(20);指定集合 new ArrayList(col…...

编程日记 2024/4/15 23:06:00

Java快速入门系列-7（测试与调试）

第七章：测试与调试第7章：测试与调试7.1 单元测试（JUnit）7.1.1 为什么要进行单元测试7.1.2 JUnit基础7.1.3 断言7.1.4 测试套件7.2 集成测试与系统测试7.2.1 集成测试7.2.2 系统测试7.3 调试技巧与工具7.3.1 断点7.3.2 单步执行7.3.3 变量检查7.3.4 条件断点7.3.5 日志记录…...

编程日记 2024/4/15 23:01:54

算法：双指针

算法：双指针双指针快慢指针对撞指针总结双指针 LeetCode 283.移动零以上题目要求我们把所有0移动到数组的末尾，也就是说，我们要把数组转化为以下状态： [ 非0区域 ] [ 0区域 ] 像这种把一个数组划分为多个区域的题型&#xff0…...

编程日记 2024/4/15 22:58:50

MySQL一些特殊功能的索引（6/16）

特殊功能性索引 B-Tree索引： InnoDB的默认索引类型，适用于多种查询操作。可以用于等值查询、范围查询和索引列的组合查询。创建B-Tree索引的示例： CREATE INDEX index_name ON table_name (column1, column2);全文索引（FULLTEX…...

编程日记 2024/4/15 22:56:48

ES11-12

1-ES11-Promise.allSettled Promise.allSettled0)方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。简单来说不管成功失败都会调用.then()，然后处理成功和失败的结果 const promises [ …...

编程日记 2024/4/15 22:55:46

【学习笔记】Vue3源码解析：第三部分-获取computed的值；实现computed

课程地址：【已完结】全网最详细Vue3源码解析！（一行行带你手写Vue3源码） 第三部分-获取computed的值；实现computed：（对应课程的第18-21节） 第22节：《获取computed的值》 …...

编程日记 2024/4/15 22:54:42

顺序表（Ｃ语言版）

前言：本篇文章我们来详细的讲解一下顺序的有关知识，这篇文章中博主会以C语言的方式实现顺序表。以及用顺序表去实现通讯录的代码操作。目录一.顺序表的概念二.顺序表的分类 1.静态顺序表三.动态顺序表的实现 1.顺序表的初始化 2.顺序表的尾插…...

编程日记 2024/4/15 22:53:40

The Ultimate Guide to Writing Functions 1.视频 https://www.youtube.com/watch?vyatgY4NpZXE 2.代码 https://github.com/ArjanCodes/2022-funcguide Python高质量函数编写指南 1. 一次做好一件事 from dataclasses import dataclass from datetime import datetimedatacl…...

编程日记 2024/4/15 22:51:37

探索Spring、Spring Boot和Spring Cloud的奇妙关系（二）

本系列文章简介： 在当今快节奏、高竞争的软件开发世界中，构建可靠、高效的应用程序是至关重要的。而Spring框架一直以来都是业界领先的Java开发框架之一，帮助开发者简化了复杂的任务，并提供了丰富的功能和强大的支持。然而&#…...

编程日记 2024/4/15 22:46:31

Mysql的事务隔离级别以及事务的四大特性。

MySQL 的事务隔离级别是数据库管理系统中的一个重要概念，它决定了事务如何隔离和影响其他并发事务。MySQL 支持四种事务隔离级别，分别是：读未提交（READ UNCOMMITTED）、读已提交（READ COMMITTED）…...

编程日记 2024/4/15 22:42:26

人工智能_大模型023_AssistantsAPI_01_OpenAI助手的创建_API的调用_生命周期管理_对话服务创建---人工智能工作笔记0159

先来说一下一些问题: 尽量不要微调,很麻烦,而且效果需要自己不断的去测试. 如果文档中有图表,大量的图片去分析就不合适了. 是否用RAG搜索,这个可以这样来弄,首先去es库去搜能直接找到答案可以就不用去RAG检索了,也可以设置一个分,如果低于60分,那么就可以去进行RAG检索微…...

编程日记 2024/4/15 22:41:25

锁策略总结

锁策略悲观锁和乐观锁乐观锁和悲观锁不是具体类型的锁而是指两种不同的对待加锁的态度，这两个锁面对锁冲突的态度是相反的。乐观锁：认为不存在很多的并发操作，因此不需要加锁。悲观锁：认为存在很多并发操作，因此需…...

编程日记 2024/4/15 22:37:21

蓝桥杯备考day2

1.1 map及其函数 map 提供一对一的数据处理能力，由于这个特性，它完成有可能在我们处理一对一数据的时候，在编程上提供快速通道。map 中的第一个值称为关键字(key)，每个关键字只能在 map 中出现一次，第二个称为该关…...

编程日记 2024/4/15 22:36:19

Mac电脑安装蚁剑

1： github 下载源码和加载器：https://github.com/AntSwordProjectAntSwordProject GitHubAntSwordProject has 12 repositories available. Follow their code on GitHub.https://github.com/AntSwordProject 以该图为主页面：antSword为源码…...

编程日记 2024/4/15 22:34:17

品牌百度百科词条创建多少钱？

百度百科作为国内最具权威和影响力的知识型平台，吸引了无数品牌和企业争相入驻。一个品牌的百度百科词条，不仅是对品牌形象的一种提升，更是增加品牌曝光度、提高品牌知名度的重要途径。品牌百度百科词条创建多少钱，这成为了许多企…...

编程日记 2024/4/15 22:33:16

Linux安装及管理程序

目录一.Linux应用程序基础 1.应用程序与系统命令的关系 2.典型应用程序的目录结构 3.常见的Linux软件包封装类型二.RPM 软件包管理工具 1.RPM 软件包管理器 Red-Hat Package Manger 2.RPM软件包 3.RPM命令三.源代码编译安装 1. yum 软件包管理器： 配…...

编程日记 2024/4/15 22:30:14

Mybatis generate xml 没有被覆盖

添加插件即可 <plugin type"org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin"/>...

编程日记 2024/4/15 22:28:11

MercadoLibre（美客多）入仓预约系统操作流程-自动化约号（开篇）

目录一、添加货件信息二、输入货件信息三、选择发货四、填写交货日期五、注意事项 MercadoLibre（美客多）于2021年10月18号上线了新预约入仓系统，在MercadoLibre美客多平台上，新入仓预约系统是一项非常重要的功能&#x…...

编程日记 2024/4/15 22:27:10

Unity TextMeshProUGUI 获取文本尺寸·大小

一般使用ContentSizeFitter组件自动变更大小 API 渲染前 Vector2 GetPreferredValues(string text)Vector2 GetPreferredValues(string text, float width, float height)Vector2 GetPreferredValues(float width, float height) 渲染后 Vector2 GetRenderedValues()Vector…...

编程日记 2024/4/15 22:26:08

RevokeMsgPatcher 2.1 终极指南：Windows平台微信QQ消息防撤回实战解决方案

RevokeMsgPatcher 2.1 终极指南：Windows平台微信QQ消息防撤回实战解决方案【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁（我已经看到了，撤回也没用了） 项目地址:…...

编程新知 2026/3/27 15:06:50

NSudo：Windows权限管理的神兵利器与系统级操作革命

NSudo：Windows权限管理的神兵利器与系统级操作革命【免费下载链接】NSudo [Deprecated, work in progress alternative: https://github.com/M2Team/NanaRun] Series of System Administration Tools 项目地址: https://gitcode.com/gh_mirrors/ns/NSudo 在…...

编程新知 2026/3/27 14:05:32