首页/新闻资讯/正文详情

css盒子模型讲解

发布时间:2026/11/11 0:03:23 来源:云帆数科 栏目:资讯中心
css盒子模型讲解
一、盒子模型解决什么问题控制盒子内容大小、内边距、边框、外边距区分元素本身占多大空间、它和别的盒子之间留多大空隙解决尺寸计算混乱的痛点标准盒 / IE 怪异盒两种计算规则实现元素之间拉开距离、加边框、背景留白、模块排版盒子四层结构从里往外content内容区域放文字、图片、子盒子padding内边距 → 内容和边框之间的距离在盒子内部背景会延伸到 paddingborder边框线margin外边距 → 当前盒子和别的盒子之间的距离盒子外面透明不会带背景margin外边距外面空白 border边框 padding内边距内部留白 content内容二、两种盒子模型重点box-sizing1. 标准盒模型默认box-sizing: content-box✅ 宽度计算公式盒子实际宽度 width (内容宽) padding 左右 border 左右你设置 width只是内容区的宽padding 和边框会把盒子撑大.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: content-box; } /* 真实宽 200 10*2 2*2 224px */2. IE 盒模型 / 怪异盒模型推荐写box-sizing: border-box✅ 宽度计算公式盒子实际宽度 width包含 content padding border设置的 width 就是你肉眼看到盒子总宽padding、边框向内挤压内容不会撑大盒子.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: border-box; } /* 盒子整体宽严格就是200px不用自己算加法 */ 开发几乎全部用 border-box布局不容易乱一般全局直接统一设置* { margin: 0; padding: 0; box-sizing: border-box; }三、四个属性怎么使用单位统一 px1. padding 内边距内容 ↔ 边框写法上 右 下 左顺时针padding: 10px; /* 四个方向都是10px */ padding: 10px 20px; /* 上下10px左右20px */ padding: 10px 20px 5px;/* 上10左右20下5 */ padding:10px 20px 30px 40px; /* 上、右、下、左 */ /* 单独写某一边 */ padding-top: 10px; padding-left: 15px;⚠️ 行内元素span上下 padding 不会推开上下元素左右正常生效。2. border 边框/* 粗细 样式 颜色 */ border: 2px solid #333; /* 单边边框 */ border-bottom:1px solid #ccc;3. margin 外边距盒子和隔壁盒子的距离写法和 padding 一模一样margin: 20px auto; /* auto 专门用来水平居中块级盒子前提有width */⚠️ margin 经典坑垂直 margin 塌陷合并两个上下挨着的块盒子上面 margin-bottom:20px下面 margin-top:20px最终空隙不是 40px而是取大的 20px。 水平 margin 不会塌陷。四、适用场景页面初始化重置清除浏览器自带默认 margin、padding* 选择器重置模块内部留白卡片、按钮里面文字离边框远一点 → 用 padding模块之间拉开间距两个卡片、两个 div 之间留白 → 用 margin给元素加边框、分割线border固定尺寸组件按钮、输入框、卡片border-box改 padding 不撑大盒子块级盒子水平居中margin: 0 auto;

相关推荐

【机器视觉】必会算法之:CLIP(对比语言-图像预训练)
【机器视觉】必会算法之:CLIP(对比语言-图像预训练)

机器视觉之:CLIP1、引言2、CLIP(Contrastive Language-Image Pre-training)2.1 定义与解析2.2 核心原理2.2.1 双塔结构:图像编码器 文本编码器2.2.2 对比学习:把"配对"拉近、把"非配对"推远2.2.3 训练数据:4… · 2026/11/5 15:40:12

如何看待DeepSeek和OpenAI都开源了各自的harness?
如何看待DeepSeek和OpenAI都开源了各自的harness?

我觉得,这两家的 Harness 开源说明,大模型公司越来越重视模型之外的执行系统。尤其是 OpenAI。它经常被吐槽不够 Open,却愿意开放 Codex 背后的执行系统。要理解这个选择,得先看看我们使用 AI 的方式发生了什么变化。01从 Chatbot… · 2026/11/11 0:03:22

catia常用的几个功能
catia常用的几个功能

指令界面位置经常错乱,进入这个界面,点击恢复位置就可以 了装配设计中,如偏移、角度、相合等指令,一般都是插入的部件之间的关系,如果想把某个圆管设计成和xy平面平行,又和x轴平行,不能选中圆管… · 2026/11/5 3:03:34

仙桃电工证在哪复审 全国通用怎么操作最靠谱
仙桃电工证在哪复审 全国通用怎么操作最靠谱

仙桃电工证在哪复审 全国通用怎么操作最靠谱 怕考不过白交培训费?仙桃电工证复审别走弯路,全国通用的证书怎么拿才靠谱?今天我就用一个真实的案例,带你看看仙桃电工证复审的全流程,避坑攻略全在这篇里,别眨眼。 案例背景:一个电工的复审危机… · 2026/11/11 0:02:54

假冒特种作业操作证怎么网上查询 避坑指南来了
假冒特种作业操作证怎么网上查询 避坑指南来了

假冒特种作业操作证怎么网上查询 避坑指南来了 你现在手里拿着一张特种作业操作证,想着赶紧上岗挣钱,结果被单位或工地一查,发现是假证。这种时候,后悔已经晚了。别再被黑中介忽悠, 假冒特种作业操作证… · 2026/11/11 0:02:54

电工证的理论题目怎么报名?新乡建筑工人都在问的真相
电工证的理论题目怎么报名?新乡建筑工人都在问的真相

电工证的理论题目怎么报名?新乡建筑工人都在问的真相 你现在可能正坐在工地上,手里拿着手机,心里却在想:“电工证的理论题目怎么报名?我这证要是不过,明天就不能去上班了。”是的,特种作业证不是摆设,它就是你找工作的“通行证”。特别是在新乡这样的… · 2026/11/11 0:02:54

线上考电工证骗局全流程办理指南
线上考电工证骗局全流程办理指南

你拟定的标题 线上考电工证骗局怎么防?工地太忙根本没时间复习考试,上岗必备干货来了 工地太忙根本没时间复习考试,很多人一听说要考电工证,第一反应就是“来不及”,尤其是像郑州金水区这种项目密集的区域,工期紧、任务重,谁还顾得上花时间准备考试?… · 2026/11/11 0:02:54

湖北哪里考电工证全国通用?工地太忙根本没时间复习考试怎么办?
湖北哪里考电工证全国通用?工地太忙根本没时间复习考试怎么办?

湖北哪里考电工证全国通用?工地太忙根本没时间复习考试怎么办? 工地太忙根本没时间复习考试,这几乎是每个特种作业人员的心声。尤其是电工证这种“全国通用”的证件,不仅是上岗的门槛,更是决定你职业发展的关键。但很多人因为工作强度大、时间紧张,根本… · 2026/11/11 0:02:54

办理怎么办焊工证和电工证需要什么材料
办理怎么办焊工证和电工证需要什么材料

初次报考焊工证和电工证的良心建议:避坑指南全在这里 不知道去哪报名怕被中介坑?你不是一个人。我接触过太多刚入行的朋友,一上来就被各种“包过班”“内部渠道”“免考试”忽悠得团团转。今天我就以信阳初次报考人员的角度,手把手告诉你… · 2026/11/11 0:01:53

电工证丢失还能补吗?千万别踩坑,丢了证等于失业
电工证丢失还能补吗?千万别踩坑,丢了证等于失业

电工证丢失还能补吗?千万别踩坑,丢了证等于失业 你正在找工作,但手里的电工证突然丢了,这下怎么办?别急,先别慌, 电工证丢失还能补吗 ?答案是肯定的,但 千万别踩坑 ,补办流程如果不了解,可能会耽误你上岗、甚至影响到你的收入。… · 2026/11/10 2:16:10

电力电缆作业证直播报名入口与办理流程良心建议
电力电缆作业证直播报名入口与办理流程良心建议

电力电缆作业证直播报名入口与办理流程良心建议 你是不是也担心学历不高报不了名?别急,今天就给你讲讲 电力电缆作业证直播 的报名流程和那些你必须知道的干货, 良心建议 在这里,别错过。 电力电缆作业证直播报名需要什么条件?… · 2026/11/10 17:46:39

英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑
英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑

英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑 怕考不过白交培训费?英德电工证报考费多少钱,你真的了解吗?现在市面上培训机构五花八门,价格参差不齐,很多人一不小心就花了冤枉钱,结果还考不过。别急,今天就来给你说清楚英德电工证的… · 2026/11/10 17:11:43

_中职电工证最新政策解读
_中职电工证最新政策解读

中职电工证在哪考?工地太忙根本没时间复习考试的救星来了 工地太忙根本没时间复习考试,这是很多正在备考 中职电工证 的建筑工友的真实写照。你不是不想考,而是真的没时间。但别担心,这期内容是 新乡初次报考人员… · 2026/11/11 0:00:52

昆明电工证培训价格值不值得考?老电工告诉你真相
昆明电工证培训价格值不值得考?老电工告诉你真相

昆明电工证培训价格值不值得考?老电工告诉你真相 之前考的证在外省能不能转过来?这个问题是很多在外地打工、换城市生活、或者是想在昆明发展的朋友最关心的。尤其是现在云南发展快,很多企业都在招持证上岗的电工,如果你手头有证但不在本地,那这个证是不… · 2026/11/11 0:00:52

特种电缆张工网上查询全攻略:外省证如何转过来
特种电缆张工网上查询全攻略:外省证如何转过来

特种电缆张工网上查询全攻略:外省证如何转过来 之前考的证在外省能不能转过来?这是很多特种作业从业者最关心的问题,尤其是像特种电缆张工这类证书,直接关系到日常工作是否合规、能否顺利晋升。很多小伙伴因为证书归属地的问题,陷入职业发展的瓶颈,甚至… · 2026/11/11 0:00:52

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 20:19:29

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 19:22:45

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 17:00:47

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码