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

css盒模型介绍

        在使用CSS进行网页布局时,我们一定离不开的一个东西————盒子模型。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同,这里的盒子是二维的。

        1.盒子的组成

一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。会发现margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。 

        2.盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性,然而默认情况下widthheight属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按下面公式计算:

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是 默认 情况下的计算方法,另外一种情况下,widthheight属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值
content-box:默认值,width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box:为元素设定的width和height属性决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框内边距 才能得到内容的宽度和高度。
inherit:规定应从父元素继承box-sizing属性的值。

box-sizing:content-box时,这种盒子模型成为标准盒子模型,当box-sizing: border-box时,这种盒子模型称为IE盒子模型

相关文章:

css盒模型介绍

在使用CSS进行网页布局时,我们一定离不开的一个东西————盒子模型。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子…...

onetab 谷歌插件历史数据清除

文章目录方法1:测试也可以步骤1:批量执行点击步骤2:python 脚本模拟点击确定操作方法2:成功【推荐】步骤1:修改confirm,类似于hook操作步骤2:批量点击删除操作:onetab 谷歌插件历史数…...

GRBL源码简单分析

结构体说明 GRBL里面的速度规划是带运动段前瞻的,所以有规划运动段数据和微小运动段的区分 这里的“规划运动段”对应的数据结构是plan_block_t,前瞻和加减速会使用到,也就是通过解析G代码后出来的直接直线数据或是圆弧插补出来的拟合直线数据…...

第一部分:简单句——第一章:简单句的核心——二、简单句的核心变化(谓语动词的情态)

二、简单句的核心变化 简单句的核心变化其实就是 一主一谓(n. v.) 表达一件事情,谓语动词是其中最重要的部分,谓语动词的变化主要有四种:三态加一否(时态、语态、情态、否定),其中…...

软考高级考试中有五大证书,其中哪个更值得考?

计算机软考属于专业技术人员职业资格水平评价类,是职业资格、专业技术资格(职称)和专业技术水平"三合一"的考试,是目前IT行业仅有的国家级考试。考试不受学历、专业、资历等条件限制。软考高级考试中有五大证书&#xf…...

FlexRay™ 协议控制器 (E-Ray)-04

网络管理 累积的网络管理 (NM) 向量位于网络管理寄存器 1 到网络管理寄存器 3 (NMVx (x = 1-3)) 中。【The accrued Network Management (NM) vector is located in the Network Management Register 1 to Network Management Register 3 (NMVx (x = 1-3)).】 网络管理向量 x…...

container_of 根据成员变量获得包含其的对象的地址!

写在前面 本系列文章的灵感出处均是各个技术书籍的读后感,详细书籍信息见文章最后的参考文献 CONTAINER_OF 在书中发现一个很有意思的宏,以此可以衍生出来其很多的用法,这个宏可以根据某个成员变量的地址得到包含这个成员变量地址的对象的…...

Linux进程概念

Linux进程概念前言冯诺依曼体系操作系统设计操作系统的目的如何理解OS是一款搞“管理”的软件?系统调用和库函数的概念进程的概念描述进程组织进程查看进程fork()前言 本篇博客主要介绍一些:冯诺依曼体系、OS的理解、进程的一些概…...

算法设计与分析

两个例子:调度问题与投资问题 例1:调度问题 问题 有 n 项任务,每项任务加工时间已知.从 0时刻开始陆续安排到一台机器上加工. 每个任务的完成时间是从 0 时刻到任务加工截止的时间. 求: 总完成时间(所有任务完成时间之和)最短…...

C++ 基础

命名空间 在 C/C 中,变量、函数和类都是大量存在的,这些变量、函数和类的名称将都存在全局作用域中,可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突或名字污染,namespace 关键字的…...

[golang gin框架] 2.Gin HTML模板渲染以及模板语法,自定义模板函数,静态文件服务

一.Gin HTML 模板渲染全部模板放在一个目录里面的配置方法首先在项目根目录新建 templates 文件夹&#xff0c;然后在文件夹中新建 对应的index.html<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http…...

数据仓库层Repository(CrudRepository、PagingAndSortingRepository、JpaRepository)

什么是数据仓库层Repository&#xff1f; 数据仓库接口的作用&#xff1a;Repository原意指的是仓库&#xff0c;即数据仓库的意思。Repository居于业务层和数据层之间&#xff0c;将两者隔离开来&#xff0c;在它的内部封装了数据查询和存储的逻辑。 Repository接口&#xff…...

大数据技术架构(组件)33——Spark:Spark SQL--Join Type

2.2.2、Join Type2.2.2.1、Broadcast Hash Join (Not Shuffled)就是常说的MapJoin,join操作在map端进行的。场景&#xff1a;join的其中一张表要很小&#xff0c;可以放到Driver或者Executor端的内存中。原理:1、将小表的数据广播到所有的Executor端&#xff0c;利用collect算子…...

Linux: bash起后台进程引发的僵尸进程

1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. 案例 原来的故事是 这样 的&#xff0c;感兴趣的读者可以直接前往。我从中截取了一段重现故事中问题的代码&#xff08;对原代码做了小小调整&a…...

网络安全攻防中,Rock-ON自动化的多功能网络侦查工具,Burpsuite被动扫描流量转发

网络安全攻防中&#xff0c;Rock-ON自动化的多功能网络侦查工具&#xff0c;Burpsuite被动扫描流量转发。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习&#xff…...

电子技术——共模抑制

电子技术——共模抑制 我们在之前学习过&#xff0c;无论是MOS还是BJT的差分输入对&#xff0c;共模信号并不会改变漏极电流的大小&#xff0c;因此我们说差分输入对共模信号无响应。但是实际上由于各种客观非理想因素&#xff0c;例如电流源有限阻抗等&#xff0c;此时共模是影…...

对KMP简单的理解

声明&#xff1a;下边的例子均表示下标从1开始的数组 ne数组的定义&#xff1a; next[i] 就是使子串 s[1…i] 有最长相等前后缀的前缀的最后一位的下标。ne[i]也可以表示相等子串的长度 准备执行jne[j]时&#xff0c; 表示当前s[i]!p[j1] , 如果ne[j]1 &#xff0c;那么下…...

Hibernate不是过时了么?SpringDataJpa又是什么?和Mybatis有什么区别?

一、前言 ps: 大三下学期&#xff0c;拿到了一份实习。进入公司后发现用到的技术栈有Spring Data Jpa\Hibernate,但对于持久层框架我只接触了Mybatis\Mybatis-Plus&#xff0c;所以就来学习一下Spring Data Jpa。 1.回顾MyBatis 来自官方文档的介绍&#xff1a;MyBatis 是一款…...

数学建模拓展内容:卡方检验和Fisher精确性检验(附有SPSS使用步骤)

卡方检验和Fisher精确性检验卡方拟合度检验卡方独立性检验卡方检验的前提假设Fisher精确性检验卡方拟合度检验 卡方拟合度检验概要&#xff1a;卡方拟合度检验也被称为单因素卡方检验&#xff0c;用于检验一个分类变量的预期频率和观察到的频率之间是否存在显著差异。 卡方拟…...

【Python学习笔记之七大数据类型】

Python数据类型&#xff1a;Number数字、Boolean布尔值、String字符串、list列表、tuple元组、set集合、dictionary字典 int整数 a1 print(a,type(a))float浮点数 b1.1 print(b,type(b))complex复数 c100.5j print(c,type(c))bool布尔值:True、False,true和false并非Python…...

基于STM32CubeMX的AD9850驱动开发与频率合成实战

1. 从零开始认识AD9850与STM32CubeMX 第一次接触AD9850这个芯片时&#xff0c;我完全被它的性能震撼到了——这个比指甲盖还小的芯片&#xff0c;居然能产生0.0291Hz分辨率的信号&#xff01;当时我正在做一个射频测试项目&#xff0c;需要生成精确的正弦波信号。市面上常见的…...

Llama-3.2V-11B-cot惊艳效果:多对象遮挡场景下的因果关系链推演

Llama-3.2V-11B-cot惊艳效果&#xff1a;多对象遮挡场景下的因果关系链推演 1. 视觉推理新标杆 在计算机视觉领域&#xff0c;多对象遮挡场景下的因果关系推演一直是个技术难题。传统方法往往只能识别可见部分&#xff0c;而无法理解遮挡背后的逻辑关系。Llama-3.2V-11B-cot的…...

AI原生应用:解决幻觉难题的有效途径

AI原生应用:解决幻觉难题的有效途径 关键词:AI原生应用、大模型幻觉、检索增强生成(RAG)、验证模块、智能系统架构 摘要:大语言模型(LLM)的“幻觉”(Hallucination)问题——生成与事实不符的内容,正成为AI应用落地的最大障碍。本文将从“AI原生应用”的视角出发,用通…...

# Trae IDE `settings.json` 配置详解与教学文档

Trae IDE settings.json 配置详解与教学文档 一、文档说明 本文档针对 Trae IDE 中 Java 开发核心配置文件 settings.json 进行逐字段解读,结合实际开发场景说明配置目的、作用及最佳实践,适配 Spring Boot + Maven + JDK21 技术栈。 二、配置文件整体作用 settings.json…...

PyTorch 3.0静态图分布式训练源码分析窗口即将关闭:官方已标记torch.distributed._spmd模块为“实验性冻结”,2024 Q3后将移除调试钩子入口

第一章&#xff1a;PyTorch 3.0静态图分布式训练的演进背景与冻结决策动因PyTorch 3.0正式宣布冻结静态图&#xff08;TorchScript&#xff09;在分布式训练路径中的演进支持&#xff0c;这一决策并非技术倒退&#xff0c;而是基于多年大规模生产实践与生态协同的理性收敛。随着…...

芯片设计中的input2reg时序检查:从SDC配置到实际案例分析

芯片设计中的input2reg时序检查实战指南&#xff1a;从约束配置到调试技巧 在数字IC设计流程中&#xff0c;时序检查是确保芯片功能正确的关键环节。input2reg路径作为四种基本时序路径之一&#xff0c;其特殊性在于数据发起端位于芯片外部&#xff0c;而捕获端位于内部寄存器…...

QQ机器人开发零基础入门:LuckyLilliaBot插件完全指南

QQ机器人开发零基础入门&#xff1a;LuckyLilliaBot插件完全指南 【免费下载链接】LuckyLilliaBot NTQQ的OneBot API插件 项目地址: https://gitcode.com/gh_mirrors/li/LuckyLilliaBot 在即时通讯机器人开发领域&#xff0c;如何快速实现QQ平台的自动化交互&#xff1f…...

RKNN模型量化全解析:如何用1.5.2版本工具链提升瑞芯微3588芯片推理效率

RKNN模型量化实战指南&#xff1a;1.5.2版本工具链在RK3588芯片的深度优化 边缘计算时代的模型效率革命 当无人机需要在毫秒间识别障碍物&#xff0c;当零售摄像头要同时追踪上百个顾客行为&#xff0c;传统云端AI的响应速度已无法满足需求。这正是边缘AI芯片大显身手的舞台——…...

CF1335E2 Three Blocks Palindrome (hard version)

本题解也可通过CF1335E1 Three Blocks Palindrome (easy version)。做法&#xff1a;值域很小。只有200&#xff0c;考虑从这里入手。我们设q[i][j]表示数i第j次出现的位置&#xff0c;sum[i][j]表示种类i在1到j范围内出现过多少次。枚举 a,b 具体的值&#xff0c;枚举 x&#…...

brpc代码重构原则:保持兼容性与提升性能并重的终极指南

brpc代码重构原则&#xff1a;保持兼容性与提升性能并重的终极指南 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recomme…...