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

盒子模型样式

news 2025/9/14 22:36:34

🍓盒子属性

属性名称中文注释备注
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设置下边框边框…...

编程日记 2023/8/21 1:51:24

动态规划入门之线性动态规划

P1115 最大子段和 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目要求求连续得一段子串使其累加和最大。 我们做动态规划首先考虑小情况，然后推而广之。 假设三个数1，-2，5. 我们先选1然后我们在-2以及-2加1里边选，我们选…...

编程日记 2023/8/21 1:50:22

基于HTML+CSS+Echarts大屏数据可视化集合共99套

基于HTMLCSSEcharts大屏数据可视化集合共99套 一、介绍二、展示1.大数据展示系统2.物流订单系统3.物流信息系统4.办税渠道监控平台5.车辆综合管控平台 三、其他系统实现四、获取源码 一、介绍 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求…...

编程日记 2023/8/21 1:49:19

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} 思路：【双指针】对两个数组设置双指针，依次比较哪…...

编程日记 2023/8/21 1:48:16

华为网络篇 OSPF的Silent-Interface-33

难度1复杂度1 目录 一、实验拓扑 二、实验步骤 三、实验过程 总结 一、实验拓扑 二、实验步骤 1.搭建如图所示的网络拓扑； 2.初始化各设备，配置相应的IP地址，测试直连网络的连通性； 3.整个网络配置OSPF协议，查看…...

编程日记 2023/8/21 1:47:15

longtext，bigint是什么数据类型

longtext 是一种数据类型，用于在关系型数据库中存储长文本或大段的文本数据。它通常用于存储超过普通文本长度限制的内容，比如文章、博客内容、HTML 代码等。 在多数关系型数据库中，longtext 是一种用于存储可变长度字符数据的类型&#xff…...

编程日记 2023/8/21 1:46:13

Hive无法启动的解决方案

关掉虚拟机后，重新启动后，按照Hadoop和Hive的流程重新启动，发现无法启动成功，特别是元数据服务无法启动，出现以下错误: Exception in thread “main” java.lang.RuntimeException: java.net.ConnectException: Call F…...

编程日记 2023/8/21 1:45:09

华为云零代码新手教学-体验通过Astro Zero快速搭建微信小程序

您将会学到 您将学会如何基于Astro零代码能力，DIY开发，完成问卷、投票、信息收集、流程处理等工作，还能够在线筛选、分析数据。实现一站式快速开发个性化应用，体验轻松拖拽开发的乐趣。 您需要什么 环境准备 注册华为云账号、实…...

编程日记 2023/8/21 1:44:07

【前端】快速掌握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.…...

编程日记 2023/8/21 1:43:05

二叉树算法的框架套路总结

二叉树算法的框架套路总结 总结 本文主要来源于Leetcode用户：https://leetcode.cn/u/labuladong/，感谢写了这么好的文章作者：labuladong 链接：https://leetcode.cn/problems/same-tree/solutions/6558/xie-shu-suan-fa-de-tao-l…...

编程日记 2023/8/21 1:42:03

【ARM 嵌入式 编译 Makefile 系列 2 - Makefile 如何打印信息】

文章目录 Makefile 打印信息方法介绍Makefile 打印信息方法介绍 在Makefile中，我们可以使用echo命令来打印信息。这种方法适用于大多数的 UNIX shell，包括bash、sh、ksh、zsh等。 在 Makefile 中的规则部分，你可以添加 echo 命令来打印一些信息。例如： all: echo "…...

编程日记 2023/8/21 1:41:02

re学习（34）攻防世界-csaw2013reversing2(修改汇编顺序)

参考文章： re学习笔记（27）攻防世界-re-csaw2013reversing2_Forgo7ten的博客-CSDN博客攻防世界逆向入门题之csaw2013reversing2_沐一 林的博客-CSDN博客 三种做法 1、ida静态分析修改指令 main函数反编译的代码 由于运行之后的是乱码&…...

编程日记 2023/8/21 1:40:01

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 部署过程&…...

编程日记 2023/8/21 1:38:56

12 正则表达式 | HTTP协议相关介绍

文章目录 正则表达式re模块最基础操作（匹配开头）匹配单个字符匹配多个字符匹配开头结尾匹配分组对于group的理解r的作用re 模块高级用法compilesearchfindall易错点 sub直接替换函数替换 split 根据匹配进行切割字符串，并返回一个列表 python…...

编程日记 2023/8/21 1:37:55

【C语言】数组概述

🚩纸上得来终觉浅， 绝知此事要躬行。 🌟主页：June-Frost 🚀专栏：C语言 🔥该篇将带你了解 一维数组，二维数组等相关知识。 目录： 📘前言：&#x1f…...

编程日记 2023/8/21 1:36:52

8. 实现业务功能--用户注册

目录 1. 顺序图 2. 参数要求 3. 接口规范 4. 创建扩展 Mapper.xml 5. 修改 DAO 6. 创建 Service 接口 7. 实现接口 8. 测试接口 9. 实现 Controller 9.1 密码加密处理 10. 实现前端界面 业务实现过程中主要的包和目录及主要功能： model 包：实体对象 d…...

编程日记 2023/8/21 1:35:51

深入浅出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…...

编程日记 2023/8/21 1:34:49

版本控制工具Git集成IDEA的学习笔记（第一篇Gitee）

目录 一、Gitee的使用 1、注册网站会员 2、用户中心 3、创建远程仓库 4、配置SSH免密登录 二、集成IDEA，Git项目搭建 1、本地仓库搭建 1）创建一个新项目 2）打开终端，在当前目录新建一个Git代码库 3）忽略文件 …...

编程日记 2023/8/21 1:33:47

【链表】 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…...

编程日记 2023/8/21 1:32:45

深入浅出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…...

编程日记 2023/8/21 1:31:43

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

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

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

编程新知 2025/8/2 6:48:59

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/9/14 10:57:04

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2025/9/1 7:30:10

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/7/9 1:12:03

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/9/13 17:38:44