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

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

news 2026/1/30 14:17:48

盒子模型

是什么

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 __

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

在这里插入图片描述

原型继承

在这里插入图片描述

在这里插入图片描述

原型链

在这里插入图片描述

在这里插入图片描述

相关文章：

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

盒子模型 是什么 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

Python高质量函数编写指南

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&#xff08;美客多&#xff09;于2021年10月18号上线了新预约入仓系统&#xff0c;在MercadoLibre美客多平台上&#xff0c;新入仓预约系统是一项非常重要的功能&#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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/1/29 23:08:05

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/1/26 20:20:15

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/1/26 5:25:25

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/28 8:42:51

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/1/21 19:50:32

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/1/30 10:30:45