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

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

news 文章来源：https://blog.csdn.net/qq_37779333/article/details/143276495 2025/1/18 7:22:48

盒子模型

盒子模型定义：
当对一个盒子模型进行文档布局的时候，浏览器的渲染引擎会根据标准之一的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 - 保姆级面试基础扫盲版本一

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

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

51c自动驾驶~合集2

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

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

Redis后台任务有哪些

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

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

TPair＜TKey, TValue＞ 键值对

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

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

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

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

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

金融工程--pine-script 入门

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

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

Vue3 跨标签页或跨窗口通信

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

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

Ollama: 使用Langchain的OllamaFunctions

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

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

java质数的判断 C语言指针变量的使用

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根组件中直接引用&#xff1a;3、最后还需要把路由挂载到APP实例中&#xff0c;在main.js中注册路由&#xff1a; 二、路由重定向与别名三、声明式导航1、传统…...

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

数据结构分类

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

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

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

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

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

一些面试题整理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#1024程序员节&#xff5c;征文# &#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、异步 &#xff08;一&#xff09;核心概念 &#xff08;二&#xff09;…...

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

OpenCV图像处理方法：腐蚀操作

腐蚀操作 前提 图像数据为二值的&#xff08;黑/白&#xff09; 作用 去掉图片中字上的毛刺 显示图片 读取一个图像文件&#xff0c;并在一个窗口中显示它。用户可以查看这个图像&#xff0c;直到按下任意键&#xff0c;然后程序会关闭显示图像的窗口 # cv2是OpenCV库的P…...

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

PG数据库之流复制详解

一、流复制的定义 PostgreSQL流复制&#xff08;Streaming Replication&#xff09;是一种数据复制技术&#xff0c;它允许实时传输数据更改&#xff0c;从而在主服务器和一个或多个备用服务器之间保持数据同步。流复制是PostgreSQL数据库管理系统&#xff08;DBMS&#xff09…...

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

Python酷库之旅-第三方库Pandas(174)

目录 一、用法精讲 801、pandas.Categorical类 801-1、语法 801-2、参数 801-3、功能 801-4、返回值 801-5、说明 801-6、用法 801-6-1、数据准备 801-6-2、代码示例 801-6-3、结果输出 802、pandas.Categorical.from_codes方法 802-1、语法 802-2、参数 802-3、…...

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

【Linux网络】基于TCP的全连接队列与文件、套接字、内核之间的关系

W...Y的主页 &#x1f60a; 代码仓库管理&#x1f495; 前言&#xff1a;之前我们已经学习了TCP传输协议&#xff0c;而无论是TCP还是UDP都是使用socket套接字进行网络传输的&#xff0c;而TCP的socket是比UDP复杂的&#xff0c;当时我们学习TCPsocket编程时使用listen函数进行…...

编程日记 2024/10/29 8:59:58

IDE（集成开发环境）

IDE&#xff08;集成开发环境&#xff09;是软件开发过程中不可或缺的工具&#xff0c;它集成了代码编写功能、分析功能、编译器、调试器等开发工具&#xff0c;旨在提高开发效率。不同的IDE支持不同的语言和框架&#xff0c;下面是一些通用的IDE使用技巧和插件推荐&#xff0c…...

编程日记 2024/10/29 8:58:56

一键导入Excel到阿里云PolarDB-MySQL版

今天&#xff0c;我将分享如何一键导入Excel到阿里云PolarDB-MySQL版数据库。 准备数据 这里&#xff0c;我们准备了一张excel表格如下&#xff1a; 连接到阿里云PolarDB 打开的卢导表&#xff0c;点击新建连接-选择阿里云PolarDB-MySQL版。如果你还没有这个工具&#xff0c;…...

编程日记 2024/10/29 8:57:53

Oracle有哪些版本

目录 Oracle 1（1979年） Oracle 2（1983年） Oracle 7（1992年） Oracle 8i（1999年） Oracle 9i（2001年） Oracle 10g（2004年） Oracle 11g（2007年） Oracle 12c（2013年） Oracle 18c（2018年） Oracle 19c（2019年） Oracle 21c（2023年） Oracle 23ai（202…...

编程日记 2024/10/29 8:55:48

先来先服务（FCFS，First-Come, First-Served）调度算法

有利于CPU繁忙作业的原因 充分利用CPU资源&#xff1a; 当一个CPU繁忙型的作业到达后&#xff0c;它会立即被执行&#xff0c;并且在没有其他作业等待的情况下&#xff0c;可以一直占用CPU直到完成。这使得CPU能够持续地执行作业&#xff0c;最大化利用CPU资源。 减少上下文切换…...

编程日记 2024/10/29 8:54:46

Windows操作系统忘记密码怎么办 这个方法屡试不爽 还不来试一下

Windows操作系统重置密码的操作步骤如下&#xff1a; 本方法适用于Windows Server 2008R2及其之后的操作系统。 第一步&#xff1a;从Windows 2008R2之后的操作系统光盘启动到安装界面&#xff0c;一直下一步到磁盘分区界面&#xff0c;按shiftF10调出cmd命令行界面。 第二步&…...

编程日记 2024/10/29 8:53:45

基于java的山区环境监督管理系统（源码+定制+开发）环境数据可视化、环境数据监测、 环境保护管理 、污染防治监测系统 大数据分析

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2024/10/29 8:49:39

济南微网站建设/阳山网站seo

为什么80%的码农都做不了架构师&#xff1f;>>> package com.dy.pool;import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors;/*** 在Executors类里面提供了一些静态工厂&#xff0c;生成一些常用的线程池。* 1. newSingleThreadEx…...

编程日记 2025/1/18 2:29:43

卡盟网站怎么做图片素材/班级优化大师怎么加入班级

vantui是一个基于Vue.js的组件库&#xff0c;它提供了文件上传组件&#xff0c;可以方便地在Vue.js应用中实现文件上传功能。使用vantui文件上传组件&#xff0c;你可以在网页中选择文件并将其上传到服务器。它支持多文件上传、文件限制、文件类型限制等功能。使用vantui文件上…...

编程日记 2025/1/18 1:56:17

公司企业文化内容范本/淘宝seo什么意思

1.先umount组建好的raid:umount /dev/md02.停止raid设备&#xff1a;mdadm -S /dev/md03.此时如果忘了raid中的硬盘名称&#xff0c;要么重启系统&#xff0c;要么运行:mdadm -A -s /dev/md0 然后再用mdadm -D /dev/md0查看raid中包含哪几个硬盘。再次运行第二步停止命令:mdadm…...

编程日记 2025/1/18 1:47:12

做的网站电脑上跟手机上不一样/google seo是什么意思

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 ⛄ 内容介绍 Monoamine oxidase A (MAOA) is a mito…...

编程日记 2025/1/18 1:33:56

后台管理网站模板下载/中国万网域名查询

不会变量提升&#xff1f; 经常看到有文章说: 用let和const申明的变量不会提升。其实这种说法是不准确的&#xff0c;比如下面代码: var x 1; if(true) {console.log(x);let x 2; } 上述代码会报错Uncaught ReferenceError: Cannot access x before initialization。如果let…...

编程日记 2025/1/18 1:14:41

什么网站可以用手机做兼职赚钱/超级搜索引擎

题目描述请实现一个函数用来匹配包括.和*的正则表达式。模式中的字符.表示任意一个字符&#xff0c;而*表示它前面的字符可以出现任意次&#xff08;包含0次&#xff09;。 在本题中&#xff0c;匹配是指字符串的所有字符匹配整个模式。例如&#xff0c;字符串"aaa"与…...

编程日记 2025/1/17 20:09:21