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;

css盒子模型讲解

相关推荐

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

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

catia常用的几个功能

更多资讯

WIZnet IO模块选型指南：工业自动化与物联网通信

XGP会员状态与购买故障分诊：授权票据、支付回调与资格校验

Jev不该被问什么？技术协作中的提问边界与高效沟通指南

Jev不该被问什么？人际沟通中的边界感与高情商提问指南

大模型入门全路径：从机器学习到Transformer与微调部署

加密资产价值投资：策略、模型与风险管理

今日更新

PLFM_RADAR：从被动告警到主动感知的微服务健康监控系统

SPI隔离设计实战：MAX14431BAEE+与STM32F407工业级应用

数字隔离器如何根治SPI通信地环路干扰：MAX14431与TM4C129实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？