位置: 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)

  • 差旅费津贴需要缴纳个人所得税吗?
  • 培训机构的教材需要教育部门审批吗
  • 正版手写
  • 长期待摊费用税前扣除
  • 营改增之前的房产出售税率
  • 企业进行税收筹划
  • 固定资产的原价包括
  • 先进制造业企业按照当期可抵扣进项税额
  • 在筹建期间的费用属于什么
  • 二手机械设备买卖合同
  • 半成品转成品会计分录
  • 一次性离职补偿金如何避税
  • 车间管理人员工资总额占车间工资总额的10%
  • 劳服企业可以安差额税上税吗?
  • 应收账款预付账款属于什么科目
  • 地方教育费附加计入什么科目
  • 外帐的倒推流程是什么
  • 征收开票信息
  • 远程清卡失败f50004
  • 销售土地使用权的增值税税率
  • 外币利润分配科目如何折算?
  • 资产收购的特殊性税务处理方法
  • win7不能进系统怎么办
  • 开机进入睡眠模式按哪个键解除
  • 关联交易认定标准税务
  • 分配水电费会计分录怎么写
  • 大型机械拆装
  • 快捷方式都变成pdf
  • 腾讯电脑管家下载
  • rpcclient.exe - rpcclient是什么进程 有什么用
  • typecho安装插件
  • 房屋出租后土地使用税谁来交
  • win10关闭端口号
  • 发票填开的基本规定?
  • 财务部门产生的费用入什么?
  • php7.0新特性
  • 月末账务处理流程分录例题
  • php redis使用
  • 详解16型人格
  • 预提的奖金能不能提前申报个税
  • wordpress app插件
  • 网页开票流程图解
  • mysql详细教程
  • 小规模纳税人免增值税的账务处理
  • 企业应纳税所得额是指什么
  • 5万元买二手车能买什么价位的车
  • 购买仪器属于什么费用
  • 调减加计抵减额什么意思
  • 一般纳税人销售旧货
  • 合并抵消分录影响母公司总分类账吗
  • 筹建期间业务招待费的财税处理规定
  • 暂估回冲方式
  • 施工单位的罚款标准
  • 企业间借贷是否合法2018
  • 支付给个人的劳务费需要发票吗
  • 生产企业代理出口退税
  • 批量游标
  • mysql查询语句菜鸟教程
  • mac电脑如何下载app
  • Centos安装dig命令
  • win7应用程序无法正常启动
  • win10系统如何关闭杀毒软件和防火墙
  • w1020h2更新失败
  • 在linux操作系统中
  • unity 3d数学
  • js let语句
  • linux的shell脚本编程
  • python中文分词库
  • unity3D游戏开发
  • 纵向导航页面
  • 批量安装windows7补丁
  • JavaScript instanceof 的使用方法示例介绍
  • jQuery使用$.ajax进行即时验证的方法
  • 玩端游的平台
  • 走出JavaScript初学困境—js初学
  • jquery 选择
  • 四川省地方税务局2017年1号公告
  • 没有税费种认定信息是什么意思
  • 地税局一般几点下班
  • 税收优惠政策有哪些企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设