盒子模型样式
🍓盒子属性
属性名称 | 中文注释 | 备注 |
---|---|---|
border | 设置盒子的边框 | 边框宽度 边框类型 边框颜色 |
border-left | 设置左边框 | 边框宽度 边框类型 边框颜色 |
border-right | 设置右边框 | 边框宽度 边框类型 边框颜色 |
border-top | 设置上边框 | 边框宽度 边框类型 边框颜色 |
border-bottom | 设置下边框 | 边框宽度 边框类型 边框颜色 |
border-color | 设置边框颜色 | 支持四个值,上右下左顺时 |
border-width | 设置边框宽度 | 支持四个值,上右下左顺时 |
border-style | 设置边框类型 | 支持四个值,上右下左顺时,solid 实线,double 双实线,dashed 虚线,dotted 点状线 |
margin | 设置盒子的外边距 | 支持四个值,上右下左顺时针;可以同过设置左右auto 使得盒子水平居中,上下设置auto 无效 |
margin-left | 设置左外边距 | |
margin-right | 设置右外边距 | |
margin-top | 设置上外边距 | |
margin-bottom | 设置下外边距 | |
padding | 设置盒子内边距 | 支持四个值,上右下左顺时 |
padding-left | 设置边框宽度 | 设置盒子左内边距 |
padding-right | 设置边框宽度 | 设置盒子右内边距 |
padding-top | 设置边框宽度 | 设置盒子上内边距 |
padding-bottom | 设置边框宽度 | 设置盒子下内边距 |
🍓外边距的特点
- ⭐外边距的设置不会撑开盒子
- ⭐背景颜色不会蔓延到外边距
- ⭐外边距可以设置为负值
- ⭐相邻两个盒子的上下外边距以最大的外边距的盒子的外边距为准,左右外边距则是相加合并的
- ⭐父子盒子
- 📌父盒子里面【没有内容】并且【没有内边距】并且【没有边框】,并且子盒子和父盒子【都没有浮动属性】,子盒子与父盒子的外边距以【最大的外边距为准】,当子盒子的外边距大于父盒子的外边距时,父盒子的外边距会变成子盒子的外边距
- 📌父盒子里面【有内容】或者【有内边距】或者【有边框】,或者子盒子【有浮动属性】或者父盒子【有浮动属性】,子盒子的外边距以【盒子内容】为参照,父盒子的外边距不受子盒子的影响
- 📌父盒子里面设置
overflow: hidden;
,可以触发BFC
,子盒子的外边距以盒子内容为参照,父盒子的外边距不受子盒子的影响
🍓内边距的特点
- ⭐内边距设置会撑大盒子
- ⭐背景可以蔓延
- ⭐内边距的值不能设置为负数,否则无效
🍓标准盒子大小计算
- ⭐宽度 = 盒子宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
- ⭐高度 = 盒子高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度
相关文章:
盒子模型样式
🍓盒子属性 属性名称中文注释备注border设置盒子的边框边框宽度 边框类型 边框颜色border-left设置左边框边框宽度 边框类型 边框颜色border-right设置右边框边框宽度 边框类型 边框颜色border-top设置上边框边框宽度 边框类型 边框颜色border-bottom设置下边框边框…...
动态规划入门之线性动态规划
P1115 最大子段和 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目要求求连续得一段子串使其累加和最大。 我们做动态规划首先考虑小情况,然后推而广之。 假设三个数1,-2,5. 我们先选1然后我们在-2以及-2加1里边选,我们选…...
基于HTML+CSS+Echarts大屏数据可视化集合共99套
基于HTMLCSSEcharts大屏数据可视化集合共99套 一、介绍二、展示1.大数据展示系统2.物流订单系统3.物流信息系统4.办税渠道监控平台5.车辆综合管控平台 三、其他系统实现四、获取源码 一、介绍 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求…...
Leetcode 0814周总结
本周刷题: 88, 108, 121, 219, 228, 268, 283, 303, 349, 350, 414, 448 88 合并两个有序数组 nums1{1, 2, 3 ,0, 0, 0} nums2{2, 5, 6} 合成效果:nums1{1, 2, 2, 3, 5, 6} 思路:【双指针】对两个数组设置双指针,依次比较哪…...
华为网络篇 OSPF的Silent-Interface-33
难度1复杂度1 目录 一、实验拓扑 二、实验步骤 三、实验过程 总结 一、实验拓扑 二、实验步骤 1.搭建如图所示的网络拓扑; 2.初始化各设备,配置相应的IP地址,测试直连网络的连通性; 3.整个网络配置OSPF协议,查看…...
longtext,bigint是什么数据类型
longtext 是一种数据类型,用于在关系型数据库中存储长文本或大段的文本数据。它通常用于存储超过普通文本长度限制的内容,比如文章、博客内容、HTML 代码等。 在多数关系型数据库中,longtext 是一种用于存储可变长度字符数据的类型ÿ…...
Hive无法启动的解决方案
关掉虚拟机后,重新启动后,按照Hadoop和Hive的流程重新启动,发现无法启动成功,特别是元数据服务无法启动,出现以下错误: Exception in thread “main” java.lang.RuntimeException: java.net.ConnectException: Call F…...
华为云零代码新手教学-体验通过Astro Zero快速搭建微信小程序
您将会学到 您将学会如何基于Astro零代码能力,DIY开发,完成问卷、投票、信息收集、流程处理等工作,还能够在线筛选、分析数据。实现一站式快速开发个性化应用,体验轻松拖拽开发的乐趣。 您需要什么 环境准备 注册华为云账号、实…...
【前端】快速掌握HTML+CSS核心知识点
文章目录 1.HTML核心基础知识1.1.编写第一个HTML网页1.2.超链接a标签和路径1.3.图像img标签的用法1.4.表格table标签用法1.5.列表ul、ol、dl标签用法1.6.表单form标签用法1.7.区块标签和行内标签用法 2.CSS核心基础知识2.1.CSS标签选择器viewport布局2.2.CSS样式的几种写法2.3.…...
二叉树算法的框架套路总结
二叉树算法的框架套路总结 总结 本文主要来源于Leetcode用户:https://leetcode.cn/u/labuladong/,感谢写了这么好的文章作者:labuladong 链接:https://leetcode.cn/problems/same-tree/solutions/6558/xie-shu-suan-fa-de-tao-l…...
【ARM 嵌入式 编译 Makefile 系列 2 - Makefile 如何打印信息】
文章目录 Makefile 打印信息方法介绍Makefile 打印信息方法介绍 在Makefile中,我们可以使用echo命令来打印信息。这种方法适用于大多数的 UNIX shell,包括bash、sh、ksh、zsh等。 在 Makefile 中的规则部分,你可以添加 echo 命令来打印一些信息。例如: all: echo "…...
re学习(34)攻防世界-csaw2013reversing2(修改汇编顺序)
参考文章: re学习笔记(27)攻防世界-re-csaw2013reversing2_Forgo7ten的博客-CSDN博客攻防世界逆向入门题之csaw2013reversing2_沐一 林的博客-CSDN博客 三种做法 1、ida静态分析修改指令 main函数反编译的代码 由于运行之后的是乱码&…...
centos 7.9 部署django项目
1、部署框架 主要组件:nginx、uwsgi、django项目 访问页面流程:nginx---》uwsgi---》django---》uwsgi---》nginx 2、部署过程 操作系统:centos 7.9 配置信息:4核4G 50G 内网 eip :10.241.103.216 部署过程&…...
12 正则表达式 | HTTP协议相关介绍
文章目录 正则表达式re模块最基础操作(匹配开头)匹配单个字符匹配多个字符匹配开头结尾匹配分组对于group的理解r的作用re 模块高级用法compilesearchfindall易错点 sub直接替换函数替换 split 根据匹配进行切割字符串,并返回一个列表 python…...
【C语言】数组概述
🚩纸上得来终觉浅, 绝知此事要躬行。 🌟主页:June-Frost 🚀专栏:C语言 🔥该篇将带你了解 一维数组,二维数组等相关知识。 目录: 📘前言:…...
8. 实现业务功能--用户注册
目录 1. 顺序图 2. 参数要求 3. 接口规范 4. 创建扩展 Mapper.xml 5. 修改 DAO 6. 创建 Service 接口 7. 实现接口 8. 测试接口 9. 实现 Controller 9.1 密码加密处理 10. 实现前端界面 业务实现过程中主要的包和目录及主要功能: model 包:实体对象 d…...
深入浅出Pytorch函数——torch.nn.init.eye_
分类目录:《深入浅出Pytorch函数》总目录 相关文章: 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...
版本控制工具Git集成IDEA的学习笔记(第一篇Gitee)
目录 一、Gitee的使用 1、注册网站会员 2、用户中心 3、创建远程仓库 4、配置SSH免密登录 二、集成IDEA,Git项目搭建 1、本地仓库搭建 1)创建一个新项目 2)打开终端,在当前目录新建一个Git代码库 3)忽略文件 …...
【链表】 61. 旋转链表
61. 旋转链表 解题思路 首先计算出链表长度将链表长度进行取余遍历链表 对链表进行分割 得到两个子链表重新连接两个链表比如1 2 3 4 5 k 2 进行分割得到 1 2 3 和 4 5两个子链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* Lis…...
深入浅出Pytorch函数——torch.nn.init.kaiming_uniform_
分类目录:《深入浅出Pytorch函数》总目录 相关文章: 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...
查询Oracle和MySQL数据库中当前所有连接信息
查询Oracle当前所有连接信息: SELECTs.sid AS 会话ID,s.serial# AS 序列号,s.username AS 用户名,s.osuser AS 操作系统用户,s.machine AS 客户端机器,s.program AS 客户端程序,s.status AS 会话状态,s.sql_id AS 正在执行的SQL_ID,t.sql_text AS 正在执行的SQL文本…...
Android glide框架及框架涉及到的设计模式
目录 原文链接Android glide框架 简单使用介绍Glide 框架整体结构设计Glide 框架的优点基本使用:Glide占位符 Android glide框架涉及到的设计模式 原文链接 Android glide框架 简单使用介绍 Glide:快速高效的Android图片加载库,可以自动加载…...
使用yolov5进行安全帽检测填坑指南
参考项目 cGitHub - PeterH0323/Smart_Construction: Base on YOLOv5 Head Person Helmet Detection on Construction Sites,基于目标检测工地安全帽和禁入危险区域识别系统,🚀😆附 YOLOv5 训练自己的…...
【BASH】回顾与知识点梳理(三十二)
【BASH】回顾与知识点梳理 三十二 三十二. SELinux 初探32.1 什么是 SELinux当初设计的目标:避免资源的误用传统的文件权限与账号关系:自主式访问控制, DAC以政策规则订定特定进程读取特定文件:委任式访问控制, MAC 32.2 SELinux 的运作模式安…...
vscode远程调试PHP代码
目录 一、准备工作 二、ssh连接和xdebug配置 1.ssh连接 2.xdebug配置 三、xdebug调试,访问 一、准备工作 1.安装vscode里面的两个扩展 2.安装对应PHP版本的xdebug 去xdebug官方,复制自己的phpinfo源码到方框里,再点击Analyse Xdebug: …...
flink1.17 实现 udf scalarFunctoin get_json_object 支持 非标准化json
特色 相比官方的json_value,该函数支持非标准化json,比如v是个object,但是非标准json会外套一层引号,内部有反引号. eg: {"kkkk2": "{\"kkkk1\":\"vvvvvvv\"}" } 支持value为 100L 这种java格式的bigint. {"k":999L…...
基于VUE3+Layui从头搭建通用后台管理系统(前端篇)九:自定义组件封装下
一、本章内容 续上一张,本章实现一些自定义组件的封装,包括文件上传组件封装、级联选择组件封装、富文本组件封装等。 1. 详细课程地址: 待发布 2. 源码下载地址: 待发布 二、界面预览 三、开发视频 基于VUE3+Layui从头搭建通用后台管...
设计模式详解-装饰器模式
类型:结构型模式 实现原理:装饰器模式通过将对象包装在装饰器类中,并在保持类方法签名完整性的前提下,提供额外功能 作用:动态地给一个对象添加一些额外的职责。增加功能方面,装饰器模式比生成子类更灵活…...
Android5:活动生命周期
创建项目Stopwatch activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayoutxmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_w…...
第2章 数据结构和算法概述
2.3线性结构和非线性结构 数据结构包括: 线性结构和非线性结构 2.3.1线性结构 线性结构作为最常用的数据结构,其特点是数据元素之间存在一对一的线性关系线性结构有两种不同的存储结构,即顺序存储结构(数组)和链式存储结构(链表)。顺序存储的线性表称…...
WPF国际化的实现方法(WpfExtensions.Xaml)
https://blog.csdn.net/eyupaopao/article/details/120090431 resx资源文件实现 resx资源文件,实现的过程比第一种复杂,但resx文件本身编辑比较简单,维护起来比较方便。需要用到的框架:WpfExtensions.Xaml 为每种语言添加.resx资…...
【Linux】—— 进程程序替换
目录 序言 (一)替换原理 1、进程角度——见见猪跑 1️⃣ 认识 execl 函数 2、程序角度——看图理解 (二)替换函数 1、命名理解 2、函数理解 1️⃣execlp 2️⃣execv 3️⃣execvp 4️⃣execle 5️⃣execve 6️⃣execve…...
idea创建javaweb项目,jboss下没有web application
看看下图这个地方有没有web application...
广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM
灯具三维逆向建模是一种将实际物体转换为数字模型的过程。通过逆向工程技术,可以将现有的灯具进行3D扫描,然后利用专业的逆向设计软件将其转换为准确的三维模型。 以下是CASAIM实施灯具三维逆向建模的一般步骤图: 1. 扫描:三维扫…...
Nginx反向代理-负载均衡、webshell实践
目录 1.nginx反向代理-负载均衡 1)搭建web项目 2)修改 nginx.conf的配置 2.webshell 实践 1)异或操作绕过 2)取反绕过 3)php语法绕过 1.nginx反向代理-负载均衡 1)搭建web项目 首先通过SpringBoo…...
第六阶|见道明心的笔墨(上)从书法之美到生活之美——林曦老师的线上直播书法课
如果你有需要,可以找我的,我这边有老师的所有课程 如果你有需要,可以找我的,我这边有老师的所有课程...
nbcio-boot从3.0升级到3.1的出现用户管理与数据字典bug
升级后出现 系统管理里的用户管理出现下面问题 2023-08-17 09:44:38.902 [http-nio-8080-exec-4] [1;31mERROR[0;39m [36mo.jeecg.common.exception.JeecgBootExceptionHandler:69[0;39m - java.lang.String cannot be cast to java.lang.Long java.lang.ClassCastException:…...
Curson 编辑器
Curson 汉化与vacode一样 Curson 自带chat功能 1、快捷键ctrlk(代码中编辑) 2、快捷键ctrll 右侧打开窗口...
Shell编程学习之函数的应用
Shell编程中的函数:伪代码表示: function 函数名(){函数体}注意事项: 1.函数无参数; 2.函数无返回值类型; 3.function可以不写; 4.函数不被调用,就不会执行; 5.函数名不能使用…...
Fork/Join框架
是什么 Fork/Join框架是Java 7提供的一个用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架。 Fork: 把一个大任务切分为若干子任务并行的执行 Join: 合并这些子任务的执行结果,最后…...
LeetCode_字符串_中等_468.验证 IP 地址
目录 1.题目2.思路3.代码实现(Java) 1.题目 给定一个字符串 queryIP。如果是有效的 IPv4 地址,返回 “IPv4” ;如果是有效的 IPv6 地址,返回 “IPv6” ;如果不是上述类型的 IP 地址,返回 “Nei…...
ABAP Der Open SQL command is too big.
ABAP Der Open SQL command is too big. DBSQL_STMNT_TOO_LARGE CX_SY_OPEN_SQL_DB 应该是选择条件中 维护的条件值条数太多了...
QChart类用来 管理 图表的:数据序列(series)、图例(legend)和坐标轴(axis)
QChart类用来 管理 图表的:数据序列(series)、图例(legend)和坐标轴(axis) 1、数据序列类 继承关系 2、坐标轴类 的继承关系 3、图例类 什么是图例? 图例:是集中于地图…...
Servlet+JDBC实战开发书店项目讲解第10篇:在线客服功能实现
在线客服功能实现 实现思路 要实现在线客服功能,您可以考虑以下步骤: 创建一个用于存储客户消息和回复的数据库表。您可以使用JDBC连接到数据库,并使用SQL语句创建表格。 在您的Servlet中,创建一个用于处理客户消息和回复的POS…...
CVE-2023-21292 AMS框架层高危漏洞分析
文章目录 前言漏洞细节故事起源漏洞利用漏洞修复 总结 前言 本周在分析 Google 官方发布的 Android 2023 年8 月安全公告 涉及的漏洞补丁的时候,遇到一个有意思的漏洞:CVE-2023-21292。 之所以说它有意思是因为这个漏洞早在去年年底就在某平台上被国外…...
cuda、cuDNN、深度学习框架、pytorch、tentsorflow、keras这些概念之间的关系
当讨论CUDA、cuDNN、深度学习框架、pytorch、tensorflow、keras这些概念的时候,我们讨论的是与GPU加速深度学习相关的技术和工具。 CUDA(Compute Unified Device Architecture): CUDA是由NVIDIA开发的一种并行计算平台和编程模型&…...
第二讲:BeanFactory的实现
BeanFactory的实现 1. 环境准备2. 初始化DefaultListableBeanFactory3. 手动注册BeanDefinition4. 手动添加后置处理器5. 获取被依赖注入的Bean对象6. 让所有的单例bean初始化时加载7. 总结 Spring 的发展历史较为悠久,因此很多资料还在讲解它较旧的实现,…...
vue2+Spring Boot2.7 大文件分片上传
之前我们文章 手把手带大家实现 vue2Spring Boot2.7 文件上传功能 将了上传文件 但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错 这里 我弄了个足够大的文件 我们先搭建 Spring Boot2.7 环境 首先 application.yml 代码编写如下 server:port: 80 upload:path:…...
Vite更新依赖缓存失败,强制更新依赖缓存
使用vitets开发一段时间了,感觉并不是想象中的好用,特别是出现些稀奇古怪的问题不好解决,比如下面这个问题 上午9:50:08 [vite] error while updating dependencies: Error: ENOENT: no such file or directory, open E:/workspace-dir/node…...
Linux命令200例:tail用来显示文件的末尾内容(常用)
🏆作者简介,黑夜开发者,全栈领域新星创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 &…...
bmob Harmony鸿蒙快速开发搜索功能
搜索功能是很多应用都需要的功能。在很多平台上,要开发一个兼容性较好的搜索功能都还是需要添加比较多的视图代码的。 为了解决这个问题,鸿蒙ArkUI提供了一个快速添加搜索功能的视图组件给我们,结合Bmob Harmony鸿蒙SDK的搜索能力࿰…...
[Vite]vite-plugin-react和vite-plugin-react-swc插件原理了解
[Vite]vite-plugin-react和vite-plugin-react-swc插件原理了解 共同的作用 JSX 支持:插件为 React 应用程序中的 JSX 语法提供支持,确保它可以被正确地转换为 JavaScript。Fast Refresh:提供热更新功能,当应用程序在开发服务器上…...
2-5 softmax 回归的简洁实现
我们发现通过深度学习框架的高级API能够使实现线性回归变得更加容易。 同样,通过深度学习框架的高级API也能更方便地实现softmax回归模型。 本节如在上节中一样, 继续使用Fashion-MNIST数据集,并保持批量大小为256。 import torch from torc…...
INFINI Console 使用介绍
上次在《INFINI Easysearch尝鲜Hands on》中我们部署了两个节点的Easysearch,并且也设置了Console对集群进行监控。那么今天我们再来介绍下INFINI Console的使用。 INFINI Console 仪表盘功能介绍 INFINI Console 是一个功能强大的数据管理和分析平台,…...
C语言调试技巧
叠甲:以下文章主要是依靠我的实际编码学习中总结出来的经验之谈,求逻辑自洽,不能百分百保证正确,有错误、未定义、不合适的内容请尽情指出! 文章目录 1.bug 是什么2.debug 是什么3.两种模式的区别4.IDE 调试介绍4.1.模…...
MySQL/SqlServer 跨服务器 增删改查(CRUD) 的一种方法
前言:主要是利用SqlServer 的链接服务器功能 1.准备一台 SqlServer Server,服务如下图: 这台服务器专门用于 链接服务器 IP:10.x.x.3 和数据源服务器(10.x.x.5) 在一个局域网 1.1 版本 是 2017 2.在 10.…...
读创公司调研|江波龙:两款自研主控芯片已批量出货,并实现数千万颗规模化产
读创公司调研|江波龙:两款自研主控芯片已批量出货,并实现数千万颗规模化产品导入)江波龙海透露,公司两款自研主控芯片已经批量出货,赋能公司eMMC和SD卡两大核心产品线,并已经实现了数千万颗的规模化产品导入。江波龙公告截图公开资料显示,江波龙主要从事Flash及DRAM存储器…...
华为鸿蒙智行五一假期全系车型大定破11000台
随着五一假期的结束,华为智选车业务鸿蒙智行公布了整个假期的“销售成绩单”:5月1日-5 月5 日全系车型大定突破11000 台。在假期的前四天,也就是5月1日-4日,鸿蒙智行全系车型大定突破 8600 台,意味着 5月5日一天内新增了超过2400台的大定订单。根据此前公布的数据,鸿蒙智行…...
比亚迪又放大招,e平台3.0Evo及首款车型发布
在去年的早些时候,比亚迪发布了e平台3.0,相较于e平台的前两代,e平台3.0针对安全性、强度、空间利用率、电池利用率都有了很大的提升,可以说比亚迪终于在电驱平台上达到了完全体,几乎弥补了之前平台的短板,目前已经应用于品牌旗下的多款车型上面,实际的体验也的确有了明显…...
tomcat学习--部署java项目
主流开发项目,springboot框架下,jar部署java传统的tomcat发布war包 一 什么是tomcat? 是一个用于运行java程序的软件,发布的时候:开发将源码使用maven打包,生产war包 二 安装tomcat tomcat是java写的&a…...
DiffBIR论文阅读笔记
这篇是董超老师通讯作者的一篇盲图像修复的论文,目前好像没看到发表在哪个会议期刊,应该是还在投,这个是arxiv版本,代码倒是开源了。本文所指的BIR并不是一个single模型对任何未知图像degradation都能处理,而是用同一个…...
SpringBoot特性
文章目录 SpringBoot1 概述2 核心特性 SpringBoot 1 概述 SpringBoot是一个Java软件开发框架(脚手架);设计目的:简化项目的初始搭建以及开发过程,该框架机制使开发人员不再需要大量的手动依赖管理。 2 核心特性 起步…...