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

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

news 2026/2/10 0:28:15

盒子模型

是什么

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00