前端学习-盒子模型（十八）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
前言
盒子模型组成
边框
语法
边框简写
代码示例
表格的细线边框
语法
内边距
内边距复合写法
外边距
外边距典型应用
外边距合并
清除内外边距
总结
前言
前几天接了个实习，最近在和hr商讨这个，接下来会恢复更新
盒子模型组成
所谓盒子模型，就是把HTML页面中的布局元素看成一个矩形的盒子，也就是一个盛有内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边框，外边距，内边距以及实际内容
border边框，content内容，padding内边距以及外边距margin
边框
broder可以设置元素的边框，边框由三部分组成：边框宽度，边框样式以及边框颜色
语法
border : border-width || border-style ||border-color
边框简写
border :1px solid red; 没有顺序
边框分开写法border-top :1px solid red;/只设定上边框 其余同理/
代码示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框样式</title> <style> div { width: 300px; height: 200px; border-width: 5px; border-style: solid; /solid实线边框，dashed虚线边框，dotted点状边框/ border-color: blue; } </style></head><body> <div> <p>这是一个段落。</p> </div></body></html>表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框
语法
border-collapse:collapse;collapse单词是合并的意思
border-collapse:collapse;表示相邻边框合并在一起
注意：边框会影响盒子的实际大小
内边距
padding属性用于设置内边距，即边框与内容之间的距离
内边距复合写法
padding属性（简写属性)可以有一到四个值
注：内容和边框有了距离，添加了内边距。padding影响了盒子实际大小。如果想让盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin的简写方式和padding完全一致
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件
1.盒子必须指定了宽度
2.盒子的左右边距都设置为auto
.header{width:960px;margin:0 auto;}常见的写法：
margin-left:auto；margin-right:automargin:automargin:0 auto;注意：以上方法是让块级元素水平居中，行内元素或者行内块元素居中给其父元素添加text-align:center即可
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。1.相邻块元素垂直外边距的合并当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合并
解决方法：尽量只给一个盒子添加margin值
2.嵌套块元素垂直外边距的塌陷对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会場陷较大的外边距值。
解决方案
①可以为父元素定义上边框。②可以为父元素定义上内边距，③ 可以为父元素添加overflow:hidden
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距
*{padding:0;margin:0;}行内元素为了照顾兼容性，尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
总结
远山起风又起雾，无人知我来时路
相关文章：
前端学习-盒子模型（十八）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 盒子模型组成 边框 语法 边框简写 代码示例 表格的细线边框 语法 内边距 内边距复合写法 外边距 外边距典型应用 外边距合并 清除内外边距 总结 前…...
【C++】类和对象(十二)：实现日期类
大家好，我是苏貝，本篇博客带大家了解C的实现日期类，如果你觉得我写的还不错的话，可以给我一个赞👍吗，感谢❤️ 目录 1 /!/>/</>/<运算符重载2 /-//-运算符重载(A) 先写，再通过写(B…...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《提升系统频率支撑能力的“车-氢”柔性可控负荷协同构网控制》
本专栏栏目提供文章与程序复现思路，具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…...
异或的性质
交换两个变量的值，不使用第三个变量。 即a3,b5,交换之后a5,b3; 有两种解法, 一种用算术算法, 一种用^(异或) a a b; b a - b; a a - b; or a a^b;// 只能对int,char… b a^b; a a^b; or a ^ b ^ a; 异或交换两个变量值的方法是利用了异或运算的特性。下面是…...
新一代Webshell管理器
工具介绍 游魂是一个开源的Webshell管理器，提供更为方便的界面和更为简单易用的功能，可配合或代替其他webshell管理器，帮助用户在各类渗透场景中控制目标机器。游魂不仅支持常见的一句话webshell以及常见Webshell管理器的功能，还…...
「iOS」——知乎日报一二周总结
知乎日报仿写 前言效果Manager封装网络请求线程冲突问题下拉刷新添加网络请求的图片通过时间戳和日期格式化获取时间 总结 前言 前两周内容的仿写，主要完成了首页的仿写，进度稍慢。 效果 Manager封装网络请求 知乎日报的仿写需要频繁的申请网络请求&am…...
windows C#-匿名类型
匿名类型提供了一种方便的方法，可用来将一组只读属性封装到单个对象中，而无需首先显式定义一个类型。 类型名由编译器生成，并且不能在源代码级使用。 每个属性的类型由编译器推断。 可结合使用 new 运算符和对象初始值设定项创建匿名类型。 …...
CryptoHack 简介
CryptoHack 简介 文章目录 CryptoHack 简介一、python的安装，运行二、ASCII码三、十六进制四、Base64五、字节和大整数六、XOR1.基本2.xor属性3.xor隐藏字节4.cryptohack——You either know, XOR you dont 一、python的安装，运行 二、ASCII码 chr()函数…...
transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.
把scene.add(transformControls);改为scene.add(transformControls.getHelper());...
游戏开发与游戏运营:哪个更难?
在探讨游戏产业时，游戏开发和游戏运营是两个至关重要的环节。它们各自承担着不同的职责，共同推动着游戏产品的成功与发展。然而，关于哪个环节更难的问题，并没有一个绝对的答案，因为两者都涉及复杂的流程、专业技能和独…...
大模型在自动化渗透测试中的应用
1. 引言 随着人工智能技术的快速发展，特别是大模型（如GPT-3、GPT-4等）的出现，自动化渗透测试领域迎来了新的机遇。大模型具有强大的自然语言处理能力和生成能力，能够在多个环节提升渗透测试的效率和准确性。本文将详细…...
《AI在企业战略中的关键地位：以微软和阿里为例》
内容概要 在当今商业环境中，人工智能（AI）的影响力如滔滔洪水，愈演愈烈。文章将揭示AI在企业战略中的崛起，尤其以微软和阿里巴巴为代表的企业，这两家科技巨头通过不同方式，将智能技术融入其核心…...
C语言 | Leetcode C语言题解之第537题复数乘法
题目： 题解： bool parseComplexNumber(const char * num, int * real, int * image) {char *token strtok(num, "");*real atoi(token);token strtok(NULL, "i");*image atoi(token);return true; };char * complexNumberMulti…...
Vue如何实现数据的双向绑定和局部更新？
1、Vue如何实现数据的双向绑定和局部更新？ Vue.js中数据的双向绑定和局部更新可以通过v-model指令来实现。v-model是一个内置的双向数据绑定机制，用于将输入元素（如input、textarea、select等）与Vue实例的数据进行双向绑定。 在…...
java学习1
一、运算符 1.算术运算符 在代码中，如果有小数参与计算，结果有可能不精确 1-1.隐式转换和强制转换 数字进行运算时，数据类型不一样不能运算，需要转成一样的，才能运算 （1）隐式转换：…...
如何缩小PPT演示文稿的大小？
有时候PPT的磁盘空间一不小心就变得意想不到的大，比如上百MB，该如何缩小PPT的大小从而便于上传或者携带呢？ 导致PPT大的原因： 媒体文件在插入或者复制到演示文稿里会被直接涵盖在其中（.pptx版本）…...
闯关leetcode——234. Palindrome Linked List
大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/palindrome-linked-list/description/ 内容 Given the head of a singly linked list, return true if it is a palindrome or false otherwise. Example 1: Input: head [1,2,2,1] Output: tru…...
通过源码分析类加载器里面可以加载的类
类列表 每一个ClassLoader里面的类列表，类的数量都是固定的。 对上一节中的dex反编译 使用DexClassLoader类动态加载插件dex 利用jadx对dex进行反编译可以看到有哪些类 源码分析 BaseDexClassLoader 从BaseDexClassLoader类加载器开始分析 在BaseDexClassLoade…...
RSA算法：数字安全的基石
## RSA算法：数字安全的基石 RSA算法是现代密码学的重要组成部分，它为安全通信和数据保护提供了坚实的基础。本文将探讨RSA算法的基本原理、实施过程以及实际应用场景。 ### 一、RSA算法概述 RSA（Rivest-Shamir-Adleman）算法是由…...
DPDK高性能处理框架VPP
VPP 环境安装 $ git clone -b stable/1801 https://github.com/FDio/vpp.git $ ./extras/vagrant/build.sh && make 在编译成功以后，会生成上图红色的 deb 表 $ dpkg –i vpp-lib_18.01.2-1~g9b554f3_amd64.deb $ dpkg –i vpp_18.01.2-1~g9b554f3_amd…...
OpenRGB：打破RGB灯光控制壁垒的开源统一解决方案
OpenRGB：打破RGB灯光控制壁垒的开源统一解决方案 【免费下载链接】OpenRGB Open source RGB lighting control that doesnt depend on manufacturer software. Supports Windows, Linux, MacOS. Mirror of https://gitlab.com/CalcProgrammer1/OpenRGB. Releases ca…...
从AwesomeCursorPrompt看提示工程：如何设计高效AI编程指令
1. 项目概述：从“AwesomeCursorPrompt”看提示工程的工程化实践最近在折腾AI编程助手，特别是Cursor这个工具，发现一个挺有意思的现象：很多人觉得它“不够聪明”，或者用起来效果时好时坏。其实，这背后往往不…...
ENSP实战：从Console到AAA，详解交换机安全登录的进阶配置
1. 从零开始：认识交换机登录安全的基本面 第一次接触企业级交换机时，很多新手都会被各种登录方式搞得晕头转向。我刚开始做网络运维时，就曾经因为没设置好登录认证，导致测试环境的交换机被隔壁团队的同事误操作重启。今天我们就从…...
避开STM32G4比较器的那些‘坑’：LOCK机制、EXTI连接与GPIO配置详解
STM32G4比较器开发实战：LOCK机制、EXTI映射与GPIO配置的深度解析 当你在深夜调试STM32G4的比较器模块时，突然发现中断死活不触发，或者LOCK寄存器配置后无法修改参数，这种挫败感我深有体会。本文将带你直击STM32G4比较器开发中最容…...
深度解析m4s-converter：B站缓存视频无损转换架构设计与性能优化
深度解析m4s-converter：B站缓存视频无损转换架构设计与性能优化 【免费下载链接】m4s-converter 一个跨平台小工具，将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 在数字内容版权日益严…...
5G工程师的日常：一次由OFDM边带EVM异常引发的‘破案’经历
5G工程师手记：解码OFDM边带EVM异常之谜 那天清晨，实验室的频谱分析仪上跳动的波形让我停下了手中的咖啡杯——在5G NR信号的边带区域，一个诡异的周期性EVM波动像心电图般规律闪烁。这不是教科书上的理想OFDM波形，而是一个活生生的…...
Anthropic 百万行代码库的官方最佳实践
随着AI 编程智能体的越来越深入到日常工作，相信你也遇到了大型项目和和小型代码库完全不同的场景。正好最近也是在做大型项目的重构开发，刷到这篇来自 Anthropic 官方的文章。系统梳理了 Claude Code 在大规模代码库中的运作机制、Harness 架构的七个扩展…...
音乐解锁实战：如何让网易云音乐的加密文件在任意设备自由播放
音乐解锁实战：如何让网易云音乐的加密文件在任意设备自由播放 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾经在网易云音乐下载了心爱的歌曲，却发现只能在特定客户端播放，无法在车载音响…...
手把手教你用Zynq-7100 FPGA实现100Mbps OOK信号定时同步（含完整Verilog代码）
基于Zynq-7100的OOK信号定时同步实战：从算法到FPGA实现全解析 在无线通信系统中，定时同步是数字接收机设计中最关键的环节之一。当我们需要在Xilinx Zynq-7100 FPGA平台上实现100Mbps OOK信号的接收处理时，面临的最大挑战是如何在仅有50MHz外…...
为Adafruit CLUE开发板设计超薄可拆卸3D打印外壳：从建模到装配全指南
1. 项目概述：为你的CLUE开发板“量体裁衣”如果你手头有一块Adafruit CLUE开发板，大概率会和我有同样的感受：这块板子功能强大，集成了屏幕、按钮、一堆传感器，但裸露的电路板和元器件总让人有点“心疼”，怕…...