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

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

news 2025/7/4 1:42:09

盒子模型

是什么

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/6/17 7:15:49

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/7/1 5:03:52

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/6/20 12:40:55

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/6/25 15:50:42

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/7/3 3:01:08

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/6/26 5:02:54

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/6/30 20:43:50

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/6/25 8:05:30

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2025/6/30 0:16:39