位置: IT常识 - 正文

什么是盒子模型?(盒子模型的概念)

编辑:rootadmin
什么是盒子模型? 什么是盒子模型?

推荐整理分享什么是盒子模型?(盒子模型的概念),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:盒子模型的概念,什么是盒子模型,盒子模型的属性有哪几个,什么叫盒子模型,什么是盒子模型的概念,什么是盒子模型?其相关的CSS属性有哪些?,什么是盒子模型,主要属性有哪些?,什么是盒子模型,盒子模型的属性有哪几个,什么是盒子模型?它的属性包括哪些?,内容如对您有帮助,希望把文章链接给更多的朋友!

盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框

盒子模型有 2 种:标准盒子模型与怪异盒子模型

标准盒子模型=content(内容)+border(边框)+padding(内边距)

怪异盒子模型=content(内容)(已经包含了 padding 和 border)

css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing:content-box

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)

一个盒子由四个部分组成:content、padding、border、margin

content,即实际内容,显示文本和图像

boreder,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成

padding,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响

margin,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域

上述是一个从二维的角度观察盒子,下面再看看看三维图:

下面来段代码

<style>  .box {    width: 200px;    height: 100px;    padding: 20px;  }</style><div class="box">盒子模型</div>

当我们在浏览器查看元素时,却发现元素的大小变成了240px

什么是盒子模型?(盒子模型的概念)

这是因为,在CSS中,盒子模型可以分成:

W3C 标准盒子模型IE 怪异盒子模型

默认情况下,盒子模型为W3C 标准盒子模型

标准盒子模型

标准盒子模型,是浏览器默认的盒子模型

下面看看标准盒子模型的模型图:

从上图可以看到:

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin

也就是,width/height 只是内容高度,不包含 padding 和 border值

所以上面问题中,设置width为 200px,但由于存在padding,但实际上盒子的宽度有 240px

IE 怪异盒子模型

同样看看 IE 怪异盒子模型的模型图:

从上图可以看到:

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是,width/height 包含了 padding和 border值

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法

box-sizing: content-box|border-box|inherit:content-box 默认值,元素的 width/height 不包含 padding,border,与标准盒子模型表现一致border-box 元素的 width/height 包含 padding,border,与怪异盒子模型表现一致inherit 指定 box-sizing 属性的值,应该从父元素继承 回到上面的例子里,设置盒子为 border-box 模型<style>  .box {    width: 200px;    height: 100px;    padding: 20px;    box-sizing: border-box;  }</style><div class="box">盒子模型</div>

这时候,就可以发现盒子的所占据的宽度为 200px

本文由 mdnice 多平台发布

本文链接地址:https://www.jiuchutong.com/zhishi/298985.html 转载请保留说明!

上一篇:探索图文处理的未来:知名学府与合合信息团队分享NLP实践经验,人工智能引领技术革新(图文处理是做什么工作)

下一篇:Win11装了双系统没有跳出选项怎么办?Win11双系统开机选择系统方法(win11装双系统虚拟机mac)

  • 个人所得税数据已失效,请重新填写
  • 支付所得税属于筹资活动吗
  • 应收款时间太长怎么处理
  • 税控服务费怎么记账
  • 公允价值变动损益属于什么科目
  • 记账凭证核算形式账务处理程序的基本特点
  • 物业公司开场地租赁费发票编码
  • 金税盘付费
  • 事业支出期末如何结转?
  • 增值税普通发票和普通发票的区别怎么交税
  • 银行贷款的纳税申报表指的所得税还是增值税
  • 民办中小学收费新政策
  • 收购全资子公司的账务处理
  • 17税率改16税率的时间
  • 税局代开专票会计分录怎么写?
  • 非金融企业向金融企业借款的利息
  • 企业取得代理销售发票
  • 事业单位固定资产盘盈账务处理
  • 对公账户转钱出来
  • win11不兼容
  • 应付职工薪酬计提数是借方还是贷方
  • 如何解决windows7台试电脑蓝屏问题
  • err出错
  • php数组函数,选班长
  • 全网最详细的破解卡密软件教程[2021首发]
  • 自己给笔记本更换硬盘
  • PHP:curl_multi_getcontent()的用法_cURL函数
  • 网速慢是什么情况
  • 养老院护工5.8k包吃住
  • 小微企业减免附加税政策
  • 工程项目成本预算表
  • 上季度的亏损可以弥补下季度的企业所得税
  • 待提出票据交换及转汇款怎么做账
  • php curl_setopt
  • 2021劳务分包专票开几个点
  • 芒果sdk
  • 建筑企业预缴所得税款税率
  • 增值税是在年末怎么处理
  • 进口消费税如何计税
  • phpcms插件
  • 一个例子解释唯物辩证法三大规律
  • 固定资产盘点方案
  • 关联债资比例是什么意思
  • 工程款增值税专用发票需要写工程名称吗
  • 什么时候贷主营业务成本
  • 收益性支出包括哪些内容
  • 人力资源外包服务企业
  • 现金支付有借款利息吗
  • 银行存款利息如何计算
  • 运输公司车辆保养记录表格
  • 购买汽车的工本费如何入账
  • 分公司利润如何纳税
  • 普通发票采购分录
  • 进项税和销项税抵扣的会计分录
  • 未按照规定编制应急预案的,责令限期改正,可以处罚款
  • 特殊事项税务处理
  • 商业企业批发商是什么
  • Mysql执行sql文件
  • 数据库left joins
  • winxp怎么做系统
  • winxp怎么做系统
  • 苹果电脑mac系统怎么升级
  • linux安装有几种方法
  • onenotewindows10
  • linux如何使用uname命令
  • win7打印错误怎么解决
  • 打开应用通知栏
  • 批处理/s
  • python的类变量和成员变量
  • vue-resource + json-server模拟数据的方法
  • JavaScript中的NaN代表什么
  • shell命令读取文件并新增另一文件到指定行
  • python 进阶
  • js的异步解决方案有哪些
  • 获取android_id
  • 仓储物流企业的双控是指什么
  • 多张发票怎么粘贴在a4纸上面
  • 江苏电子税务电子发票怎么作废
  • 西安税务局服务电话
  • 小规模税控盘全额抵扣怎么做分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设