CSS 盒模型

CSS盒模型(Box Model)是网页布局的核心概念,它将每个HTML元素视为一个矩形盒子,由内容、内边距、边框和外边距四部分组成。

组成部分:

  1. 内容区(Content)​ :存放文本、图片等元素的实际内容,由width/height控制大小
  2. 内边距(Padding)​ :内容与边框的间距,通过padding调整,支持分方向设置
  3. 边框(Border)​:包裹内容与内边距的可见线条,可定义样式、颜色及宽度
  4. 外边距(Margin)​ :与其他元素的透明间距,通过margin控制,垂直方向可能合并(取较大值)

两种盒模型

CSS3中的盒模型有以下两种:标准盒子模型、IE盒子模型(也叫怪异盒模型)

盒模型都是由四个部分组成的,分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置widthheight 时,所对应的范围不同

  • 标准盒模型的width和height属性的范围只包含了content

  • IE盒模型的width和height属性的范围包含了border、padding和content

可以通过修改元素的box-sizing属性来改变元素的盒模型:

  • box-sizing: content-box 表示标准盒模型(默认值)
  • box-sizing: border-box 表示IE盒模型(怪异盒模型)
相关推荐
南方以南_6 分钟前
Chrome开发者工具
前端·chrome
YiHanXii12 分钟前
this 输出题
前端·javascript·1024程序员节
楊无好19 分钟前
React中ref
前端·react.js
程琬清君21 分钟前
vue3 confirm倒计时
前端·1024程序员节
歪歪10039 分钟前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔6643 分钟前
flutter实现web端实现效果
前端·flutter
csj501 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19892 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
言德斐2 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django
疯狂的沙粒3 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节