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

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

news 2025/8/26 13:59:21

盒子模型

是什么

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/7/13 22:34:29

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/8/24 20:39:38

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/8/21 16:24:52

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/8/26 10:14:34

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/8/25 16:43:44

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41

#Uniapp篇：chrome调试unapp适配

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

编程新知 2025/6/17 12:13:20

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/8/1 17:08:07