CSS中的标准盒子模型和怪异盒子模型

一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧!

生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着。

模型是什么呢?

它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件

css中的盒子模型它是可以对元素进行布局,设置距离的大小,这里面包括含有外边距、边框、内边距和内容主体这四个部分。

二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件,在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。

来看看我们的标准盒子模型图吧!

在这里插入图片描述
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。

2、标准盒子模型的计算

在这里插入图片描述

标准的盒子模型的大小是:content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距);

注:标准盒子的初始设置宽高大小不包含padding、border和margin的大小。

三、怪异盒子模型(IE标准的盒子模型)

在这里插入图片描述
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件:

(1) 给元素添加CSS3属性box-sizing:border-box; (注:所以如果用CSS3新属性,就不要考虑低版本浏览器了)

(2)文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。

2、怪异盒子(IE盒子模型)模型的计算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SisaUaGs-1582451849215)(tu/tu3.png)]
如图可见添加了怪异盒的div盒子宽度变小了。

标准的盒子模型的大小是:content(区域内容大小)+margin(外边距);

注:怪异盒子的初始设置宽高大小包含padding、border大小在内,但不包含margin的大小。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值