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

CSS中你不得不知道的盒子模型

news 2026/4/2 2:08:42

目录

  • 1、CSS的盒子模型
    • 1.1 css盒子模型有哪些：
    • 1.2 css盒子模型的区别
    • 1.3 通过css如何转换css盒子模型

1、CSS的盒子模型

1.1 css盒子模型有哪些：

标准盒子模型、怪异盒子模型（IE盒子模型）

1.2 css盒子模型的区别

标准盒子模型：

标准盒子模型由margin、padding、border、content四部分组成

怪异盒子模型：

怪异盒子模型由margin 、content(padding、border)两部分组成，在怪异盒子模型中内边距和边框是算在内容区域的。

一般来说我们都会使用怪异盒子模型，因为在使用标准盒子模型的时候设置了内边距和边框会把盒子撑大，这样我们有得重新计算盒子的大小，较为麻烦。

1.3 通过css如何转换css盒子模型

box-sizing: content-box 标准盒子模型（默认）
box-sizing: border-box 怪异盒子模型
我们只需要给这个元素设置对应的css即可转换成你想要的模型。

我们来看一段代码示例，更加深刻的来了解一下他们之间的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style: none;}.uls1,.uls2 {display: flex;}.uls1 li{width: 200px;height: 200px;margin: 5px;padding: 50px;border: 5px solid #ccc;}.uls2 li{box-sizing: border-box;width: 200px;height: 200px;margin: 5px;padding: 50px;border: 5px solid #ccc;}</style>
</head>
<body><ul class="uls1"><li>1</li><li>2</li><li>3</li></ul><ul class="uls2"><li>4</li><li>5</li><li>6</li></ul>
</body>
</html>

在这里插入图片描述
标准盒子模型：
我们将每个li的宽高设置为200px、内边距为50px、边框5px，此时可看到盒子的宽高已经被内边距和边框撑开了，变成了310px * 310px，至于为什么显示的是309.33这和浏览器有关。

在这里插入图片描述

怪异盒子模型：
同样的css属性，而设置怪异盒子模型后，它的实际宽高还是我们的200px，由此可以看出内部距和边框并不会撑大盒子，而是当作内容的一部分。

不过还有一种特殊情况，我们来看这段代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin:0; padding:0}ul {list-style: none;}.uls {display: flex;}.uls li{box-sizing: border-box;width: 100px;height: 100px;margin: 5px;padding: 50px;border: 5px solid #ccc;}</style>
</head>
<body><ul class="uls"><li></li><li></li><li></li></ul>
</body>
</html>

在这里插入图片描述
我们同样是设置的怪异盒子模型，宽高各100px，内边距50px，边框5px，按理来说通过怪异盒子模型的原理来计算，我们的宽高应该还是100px * 100px ，而这里却变成了110px * 110px。
这是为什么呢？
主要是因为我们盒子的宽高只有100 * 100 ,内边距已经设置为50px，左右（上下）内边距加起来已经达到了100px，而这个时候我们又设置了上下左右5像素的边框，内容已经装不下了，所有宽/高会自动加上这10像素的宽度/高度。
最后就是我们所看到的110px * 110px。

相关文章：

CSS中你不得不知道的盒子模型

目录 1、CSS的盒子模型1.1 css盒子模型有哪些&#xff1a;1.2 css盒子模型的区别1.3 通过css如何转换css盒子模型 1、CSS的盒子模型 1.1 css盒子模型有哪些&#xff1a; 标准盒子模型、怪异盒子模型&#xff08;IE盒子模型&#xff09; 1.2 css盒子模型的区别 标准盒子模型&a…...

编程日记 2023/9/2 18:42:26

知识储备--基础算法篇-数组

1.学习 2.数组 2.1第53题-最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 心得&#xff1a;一直在纠结这个连续的事情&…...

编程日记 2023/9/2 18:41:25

zookeeper 理论合集

目录 系统背景 集群结构 多个节点之间的角色 节点的状态 为什么引入 Observer 存储结构 ZNode 节点结构 ZNode 创建类型 内存数据存储 数据持久化 zookeeper 的容量大小 数据同步 消息广播 崩溃恢复 如何保证顺序一致性 核心流程 Leader 选举流程 脑裂问题 …...

编程日记 2023/9/2 18:40:24

【pyinstaller 怎么打包python，打包后程序闪退 不打日志 找不到自建模块等问题的踩坑解决】

程序打包踩坑解决的所有问题 问题1 多个目录怎么打包 不管你包含多个层目录&#xff0c;引用多么复杂&#xff0c;只需要打包主程序所在文件即可&#xff0c;pyinstaller会自动寻找依赖包&#xff0c;如果报错自建模块找不到&#xff0c;参照问题3 pyinstaller main.py问题2…...

编程日记 2023/9/2 18:39:22

【Docker】网络

文章目录 Docker 网络基础Docker网络管理Docker网络架构CNMLibnetwork驱动 常见的网络类型 Docker 网络管理命令docker network createdocker network inspectdocker network connectdocker network disconnectdocker network prunedocker network rmdocker network ls docker …...

编程日记 2023/9/2 18:38:21

Linux ：realpath 命令

以后可以直接用于查找相关文件 例: 输入:realpath .repo/manifests/rv1126_rv1109_linux_release.xml 输出:/home/sdk/work/rk/rv1126_rv1109/.repo/manifests/rv1126_rv1109_linux/rv1126_rv1109_linux_v3.0.2_20230406.xml根据输入的文件找到对应复制过来的型号,这个命令不…...

编程日记 2023/9/2 18:37:18

react17：生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…...

编程日记 2023/9/2 18:36:17

腾讯内部单边拥塞算法BBR-TCPA一键脚本安装

TCPA简介 腾讯内部使用的TCPA&#xff0c;由腾讯TEG操作系统组研发&#xff0c;基于RHEL7.4源码&#xff0c;定制化的TCPA。团队介绍&#xff1a;腾讯TEG操作系统组, 2010年成立&#xff0c;专业的内核团队,维护研发腾讯内部linux操作系统tlinux, 保证百万级server高效稳定运行…...

编程日记 2023/9/2 18:35:15

【LLM】chatglm-6B模型训练和推理

本篇文章记录下 chatglm-6B 训练和推理过程 环境&#xff1a;Ubuntu 20.04 1.13.0cu116 chatglm-6B 源代码仓库&#xff1a;链接 chatglm-6B 模型权重&#xff1a;链接 源代码及模型 clone 到本地 这里使用的是 THUDM 在 hugging face 开源的模型。 因为模型比较大&#xff…...

编程日记 2023/9/2 18:34:14

性能可靠it监控系统,性能监控软件的获得来源有哪些

性能可靠的IT监控系统是企业IT运维的重要保障之一。以下是一个性能可靠的IT监控系统应该具备的特点&#xff1a; 高可用性 高可用性是IT监控系统的一个重要特点&#xff0c;它可以保证系统在24小时不间断监控的同时&#xff0c;保证系统服务的可用性和稳定性。为了实现高可用性…...

编程日记 2023/9/2 18:33:13

TCP/IP网络编程(一) 理解网络编程和套接字

文章目录 理解网络编程和套接字网络编程和套接字概要构建套接字编写 Hello World 服务器端构建请求连接套接字在Linux平台下运行 基于Linux的文件操作打开文件关闭文件将数据写入文件读取文件中的数据 理解网络编程和套接字 网络编程和套接字概要 网络编程就是编写程序使两台…...

编程日记 2023/9/2 18:32:11

Python 潮流周刊#18：Flask、Streamlit、Polars 的学习教程

你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。标题取自其中三则分享&#xff0c;不代表全部内容都是该主题&#xff0c;特此声明。 本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选…...

编程日记 2023/9/2 18:31:10

装备一台ubuntu

配置远程连接&#xff1a; ubuntu的root用户无法远程登入问题&#xff1a; openssh安装命令&#xff1a; sudo apt-get install openssh-server 安装完成通过以下命令查看SSH是否启动 ps -e | grep ssh 如果只有ssh-agent表示还没启动&#xff0c;需要&#xff1a; /etc/i…...

编程日记 2023/9/2 18:30:09

为了更好和大家交流，欢迎大家加我的微信账户

因为一些懂的都懂的原因&#xff0c;如果我的账户显示为 此时我无法通过站内信、留言或者任何方式和大家联系。 如果看到这样的内容&#xff0c;可以在此评论区留下你的微信账户&#xff0c;我看到后会添加你。为防止其他人冒充我&#xff0c;我的微信号以2206结尾。...

编程日记 2023/9/2 18:29:08

MS1826A HDMI 多功能视频处理器 HDMI4进1出画面分割芯片

基本介绍 MS1826A 是一款多功能视频处理器&#xff0c;包含 4 路独立 HDMI 音视频输入通道、1 路 HDMI 音视 频输出通道以及 1 路独立可配置为输入或者输出的 SPDIF、I2S 音频信号。支持 4 个独立的字库定 制型 OSD&#xff1b;可处理隔行和逐行视频或者图形输入信号&#xff1…...

编程日记 2023/9/2 18:28:05

最新文献怎么找|学术最新前沿文献哪里找

查找下载最新文献最好、最快、最省事的方法就是去收录该文献的官方数据库中下载。举例说明&#xff1a; 有位同学求助下载一篇2023年新文献&#xff0c;只有DOI号10.1038/s41586-023-06281-4&#xff0c;遇到这种情况可以在DOI号前加上http://doi.org/输入地址栏查询该文献的篇…...

编程日记 2023/9/2 18:27:04

ctfshow 红包题

前言&#xff1a; 最近一直在搞java很少刷题&#xff0c;看见ctfshow的活动赶紧来复现一波~ ctfshow 红包挑战7 <?php highlight_file(__FILE__); error_reporting(2); extract($_GET); ini_set($name,$value); system("ls ".filter($_GET[1])."" )…...

编程日记 2023/9/2 18:26:02

SpringBoot项目（jar）部署，启动脚本

需求 SpringBoot项目&#xff08;jar&#xff09;部署&#xff0c;需要先关闭原来启动的项目&#xff0c;再启动新的项目。直接输入命令&#xff0c;费时费力&#xff0c;还容易出错。所以&#xff0c;使用脚本启动。 脚本 脚本名&#xff1a;start.sh 此脚本需要放置在jar包…...

编程日记 2023/9/2 18:25:01

大数据（四）主流大数据技术

大数据&#xff08;四&#xff09;主流大数据技术 一、写在前面的话 To 那些被折磨打击的好女孩&#xff08;好男孩&#xff09;&#xff1a; 有些事情我们无法选择&#xff0c;也无法逃避伤害。 但请你在任何时候都记住&#xff1a; 你可能在一些人面前&#xff0c;一文不值&a…...

编程日记 2023/9/2 18:24:00

【已解决】激活虚拟环境报错：此时不应有Anaconda3\envs\[envs]\Library\ssl\cacert.pem。

新建虚拟环境后&#xff0c;进入虚拟环境的时候出现这样的报错&#xff1a; 此时不应有Anaconda3 envs yolov5 Library ssl cacert.pem。 但是之前装的虚拟环境也还能再次激活&#xff0c;base环境也无任何问题&#xff0c;仅新装的虚拟环境无法激活。 查遍了百度谷歌&#xff…...

编程日记 2023/9/2 18:22:59

python协同过滤算法的基于python二手物品交易网站系统

目录同行可拿货,招校园代理 ,本人源头供货商协同过滤算法在二手物品交易网站中的应用用户行为数据收集基于用户的协同过滤基于物品的协同过滤混合推荐策略冷启动问题处理实时推荐更新推荐结果评估代码实现示例系统功能整合性能优化项目技术支持源码获取详细视频演示 &#xff1…...

编程新知 2026/4/1 22:17:18

管理员命令提示符 命令提示符 cmd

命令提示符区别...

编程新知 2026/4/1 22:04:58

火山引擎语音合成SDK实战：从快速调用到高级参数调优

1. 火山引擎语音合成SDK初体验 第一次接触火山引擎的语音合成SDK时&#xff0c;我正为一个智能客服项目发愁。客户要求系统能够用不同音色、不同情感的语音播报订单状态&#xff0c;而市面上大多数TTS服务要么太贵&#xff0c;要么效果生硬。直到同事推荐了火山引擎的解决方案&…...

编程新知 2026/4/1 20:33:57

Linux下CMake多版本共存实战：不卸载旧版也能用上新功能

Linux下CMake多版本共存实战&#xff1a;不卸载旧版也能用上新功能 在软件开发的世界里&#xff0c;版本管理就像一场永不停歇的舞蹈。想象一下这样的场景&#xff1a;你正在维护一个历史悠久的C项目&#xff0c;突然客户要求你同时开发一个全新的模块&#xff0c;而这个模块需…...

编程新知 2026/4/1 20:23:45

QT 5.14.0实战：手把手教你用QLineEdit打造一个带验证码的登录框（附完整样式代码）

QT 5.14.0实战&#xff1a;手把手教你用QLineEdit打造一个带验证码的登录框&#xff08;附完整样式代码&#xff09; 在GUI开发中&#xff0c;登录界面是最基础也最考验细节的组件之一。一个优秀的登录框不仅需要功能完整&#xff0c;还要在用户体验上下足功夫——比如实时输入…...

编程新知 2026/4/1 19:25:08

League Akari：英雄联盟玩家的终极自动化工具包

League Akari&#xff1a;英雄联盟玩家的终极自动化工具包 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari 是一款基于官方 LCU A…...

编程新知 2026/4/1 18:16:55

UDOP-large高性能部署：Tesseract OCR预处理与UDOP-large联合加速方案

UDOP-large高性能部署&#xff1a;Tesseract OCR预处理与UDOP-large联合加速方案 1. 引言&#xff1a;当文档理解遇上效率瓶颈 想象一下&#xff0c;你手头有几百份英文PDF报告需要处理。你需要从中提取标题、摘要&#xff0c;甚至表格里的关键数据。传统的方法是&#xff1a…...

编程新知 2026/4/1 18:01:57

三轴桁架机械手上下料控制系统详细说明书

三轴桁架机械手上下料用西门子smart200 S 020三轴桁架机械手上下料用西门子smart200 ST40 脉冲控制3轴伺服可上西门子触摸屏详细注释&#xff0c;控制系统详细说明书&#xff0c;文档详细讲解组态和指令&#xff0c;I0表&#xff0c;电气原理图G一、概述本说明书旨在详细介绍三…...

编程新知 2026/4/1 17:03:39

CentOS7下KingbaseES V9与MySQL性能对比实测：从安装到查询优化的全流程体验

CentOS7下KingbaseES V9与MySQL性能对比实测&#xff1a;从安装到查询优化的全流程体验 在国产数据库技术快速发展的今天&#xff0c;越来越多的企业开始关注从传统数据库向国产化解决方案的迁移。作为国产数据库中的佼佼者&#xff0c;KingbaseES V9凭借其出色的MySQL兼容性和…...

编程新知 2026/4/1 17:01:27

Hunyuan-MT-7B像素翻译终端效果实测：中英日韩四语同屏对照演示

Hunyuan-MT-7B像素翻译终端效果实测&#xff1a;中英日韩四语同屏对照演示 1. 产品概览与核心特色 1.1 像素化翻译新体验 Pixel Language Portal&#xff08;像素语言跨维传送门&#xff09;是一款基于Tencent Hunyuan-MT-7B大模型构建的创新翻译工具。与传统翻译软件不同&a…...

编程新知 2026/4/1 15:38:24