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

CSS - 保姆级面试基础扫盲版本一

news 2026/2/7 1:34:18

盒子模型

盒子模型定义：
当对一个盒子模型进行文档布局的时候，浏览器的渲染引擎会根据标准之一的CSS盒子模型（CSS basic box model），将所有元素表示成一个个矩阵盒子。
一个盒子通常由四部分组成：border padding content margin

在这里插入图片描述

<style>.box {width: 200px;height: 100px;padding: 20px;}
</style>
<div class="box">盒子模型
</div>

在这里插入图片描述
标准盒子模型

IE 盒子模型：

Box-Sizing:

box-sizing: content-box|border-box|inherit:

在这里插入图片描述

<style>.box {width: 200px;height: 100px;padding: 20px;box-sizing: border-box;}
</style>
<div class="box">盒子模型
</div>

如何理解BFC

在这里插入图片描述

什么是BFC

在这里插入图片描述

BFC触发条件

在这里插入图片描述

应用场景

1 防止margin重叠（塌陷）

<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><p>Hehe</p >
</body>

在这里插入图片描述

<style>.wrap {overflow: hidden;// BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><div class="wrap"><p>Hehe</p ></div>
</body>

在这里插入图片描述

清除内部浮动

<style>.par {border: 5px solid #fcc;width: 300px;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

在这里插入图片描述

.par {overflow: hidden;
}

在这里插入图片描述

自适应多栏布局

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

在这里插入图片描述

.main {overflow: hidden;
}

在这里插入图片描述

响应式设计

在这里插入图片描述

什么是响应式设计

在这里插入图片描述

实现方式

在这里插入图片描述

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

在这里插入图片描述

媒体查询

在这里插入图片描述

@media screen and (max-width: 1920px) { ... }

在这里插入图片描述

@media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}

在这里插入图片描述

百分比

在这里插入图片描述

vm/vh

在这里插入图片描述

rem

在这里插入图片描述

@media screen and (max-width: 414px) {html {font-size: 18px}
}
@media screen and (max-width: 375px) {html {font-size: 16px}
}
@media screen and (max-width: 320px) {html {font-size: 12px}
}

为了更加准确的监听前端可视窗口的变化，可以在css之前插入javaScript标签。

//动态设置元素字体的大小
function init () {var width = document.documentElement.clientWidthdocument.documentElement.style.fontSize = width / 10 + 'px'
}
// 首次加载只加载 只加载一次
init()
window.addEventListener('orientationchange', init);
window.addEventListener('resize', init);

在这里插入图片描述

小结

在这里插入图片描述

CSS - 保姆级面试基础扫盲版本一

盒子模型盒子模型定义： 当对一个盒子模型进行文档布局的时候，浏览器的渲染引擎会根据标准之一的CSS盒子模型（CSS basic box model），将所有元素表示成一个个矩阵盒子。一个盒子通常由四部分组成：border p…...

编程日记 2024/10/29 9:44:37

51c自动驾驶~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11491137 #BEVWorld BEV潜在空间构建多模态世界模型，全面理解自动驾驶~一、引言世界模型建模了有关环境的知识，其可以通过给定的条件对未来进行合理的想象。未来想象要求世界模型具有物理规律的理解…...

编程日记 2024/10/29 9:43:32

Redis后台任务有哪些

Redis后台任务为了有更好的性能表现，redis对于一些比较耗时的操作会异步执行，不阻塞线上请求。文章从源码(redis7.0)来看，aof、rdb文件的关闭，aof文件的刷盘以及部分内存释放会采用异步方式，在后台线程中执行。接下来…...

编程日记 2024/10/29 9:42:24

TPair＜TKey, TValue＞键值对

在 Delphi（或更准确地说是 Object Pascal，Delphi 的编程语言）中，TList<T> 是泛型列表的一个实现，其中 T 是列表中元素的类型。TPair<TKey, TValue> 是一个包含两个元素的记录（record&#xff0…...

编程日记 2024/10/29 9:39:14

【杂谈】城市规划教育的危与机

城市规划教育的危与机 （赵燕菁原文为作者在第21届中国城市规划学科发展论坛上的发言，有删减和改动）如有侵权，立即删除过去几年，尤其是从2022年后房地产市场的下行开始，中国的城市规划陷入前所未有的危…...

编程日记 2024/10/29 9:36:10

金融工程--pine-script 入门

背景脚本基本组成指标常见的趋势类指标：均线类(MAs)、支撑/压力位(Support/Resistance)、趋势线(Trend Lines)、趋势通道(Trend Channels)、一目均衡表(Ichimoku)和艾略特波浪(ElliotWave)。均线指标策略策略种类在TradingView上，有许多交易…...

编程日记 2024/10/29 9:30:59

Vue3 跨标签页或跨窗口通信

在 Vue 应用中，跨标签页或跨窗口的通信通常涉及到两个或多个浏览器标签页之间的信息共享。由于每个标签页或窗口都是独立的 JavaScript 执行环境，它们不能直接通过 Vue 或其他 JavaScript 库来直接相互通信。但是，有一些方法可以实现这种跨标…...

编程日记 2024/10/29 9:26:54

Ollama: 使用Langchain的OllamaFunctions

1. 引言 Function call Langchain的Ollama 的实验性包装器OllamaFunctions，提供与 OpenAI Functions 相同的 API。因为网络的原因，OpenAI Functions不一定能访问，但如果能通过Ollama部署的本地模型实现相关的函数调用，还是有很好…...

编程日记 2024/10/29 9:25:53

1. public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("请输入一个值");int num sc.nextInt();boolean flagtrue;for (int i2;i<num;i){if (num%i0){flagfalse;break;}}if (flag){System.out.println(num"是一…...

编程日记 2024/10/29 9:24:50

TensorFlow面试整理-TensorFlow 数据处理

在 TensorFlow 中，数据处理是构建和训练深度学习模型的重要环节。高效地管理、预处理和增强数据可以显著提高模型的训练效率和性能。TensorFlow 提供了强大的 tf.data API 来帮助处理各种数据集。下面是 TensorFlow 数据处理的详细介绍： 1. tf.data.Dataset API tf.data API …...

编程日记 2024/10/29 9:23:49

vue路由的基本使用

vue路由的基本使用 vue-router简介一、路由配置和使用1、安装2、创建路由实例2、在组件中引用路由 router-view ,如APP根组件中直接引用：3、最后还需要把路由挂载到APP实例中，在main.js中注册路由： 二、路由重定向与别名三、声明式导航1、传统…...

编程日记 2024/10/29 9:20:46

数据结构分类

数据结构(data structure)是计算机存储、组织数据的方式，是带有结构特性的数据元素的集合。是相互之间存在一种或多种特定关系的数据元素的集合，即带“结构”的数据元素的集合。这种“结构”指的是数据元素之间存在的关系，分为逻辑结构和存储…...

编程日记 2024/10/29 9:18:34

【STM32】 TCP/IP通信协议--LwIP介绍

LwIP（Lightweight IP）是一个轻量级的TCP/IP协议栈，专为嵌入式系统设计，以较小的资源消耗实现完整的网络功能。本文将详细介绍LwIP的基本概念、特点、与TCP/IP的区别以及如何在STM32上使用LwIP实现TCP/IP通信。 1. LwIP的定义和设…...

编程日记 2024/10/29 9:15:26

一些面试题整理

第一章、基础以下是对上述10道面试题的参考答案： 一、Java语言及性能调优答案： 线程安全问题是指多个线程同时访问共享资源时可能出现的数据不一致或错误的情况。例如，多个线程同时对一个共享变量进行写操作，如果没有适当的同…...

编程日记 2024/10/29 9:13:23

端口号和ip地址一样吗？区别是什么

在网络通信的世界里，端口号和IP地址是两个不可或缺的概念，它们各自扮演着独特的角色，共同维系着数据在网络中的有序传输。然而，对于许多初学者而言，这两者往往容易被混淆，认为它们是同一事物的不同表述。那…...

编程日记 2024/10/29 9:12:22

深入探讨全流量回溯分析与网络性能监控系统

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具随着数据量的急剧增加，传统的网络监控手段面临诸多挑战。在此背景下，全流量回溯分析和网络性能监控系统成为了保障网络正常运作的重要工具。本文将围绕这两个关键词，探讨它…...

编程日记 2024/10/29 9:10:18

python机器人编程——一种3D骨架动画逆解算法的启示（上）

目录一、前言二、fabrik 算法三、python实现结论PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关文章资源一、前言我们用blender等3D动画软件时，会用到骨骼的动画，通过逆向IK动力学…...

编程日记 2024/10/29 9:09:16

Flutter开发者必备面试问题与答案02

Flutter开发者必备面试问题与答案02 视频 https://youtu.be/XYSxTb0iA9I https://www.bilibili.com/video/BV1Zk2dYyEBr/ 前言原文 Flutter 完整面试问题及答案02 本文是 flutter 面试问题的第二讲，高频问答 10 题。正文 11. PageRoute 是什么？ …...

编程日记 2024/10/29 9:08:14

拥抱真实：深度思考之路，行动力的源泉

在纷繁复杂的现代社会，人们往往被表象迷惑，忙碌于各种事务之中，却很少停下来进行深度思考。这种忙碌往往是表面的、无效的，因为它缺乏对自我和目标的深刻理解与追求。提升行动力，避免假勤奋，关键在于深度思…...

编程日记 2024/10/29 9:07:12

【Python爬虫实战】深入理解Python异步编程：从协程基础到高效爬虫实现

#1024程序员节｜征文# 🌈个人主页：易辰君-CSDN博客 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 目录前言一、异步 （一）核心概念 （二）…...

编程日记 2024/10/29 9:06:11

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...

编程新知 2026/2/5 4:17:42

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2026/1/26 19:25:32

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

Java面试专项一-准备篇

一、企业简历筛选规则一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历例如：Boss直聘（招聘方平台） 直接按照条件进行筛选例如&#xff1a…...

编程新知 2026/1/26 19:10:48

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/9/24 3:05:06

Java 二维码

Java 二维码 **技术：**谷歌 ZXing 实现首先添加依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...

编程新知 2026/1/24 12:58:24

三分算法与DeepSeek辅助证明是单峰函数

前置单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。三分的本质三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

盒子模型

如何理解BFC

什么是BFC

BFC触发条件

应用场景

1 防止margin重叠（塌陷）

清除内部浮动

自适应多栏布局

响应式设计

什么是响应式设计

实现方式

媒体查询

百分比

vm/vh

rem

小结

相关文章：