彻底搞懂标准盒模型和怪异盒模型(代码片段)

五花肉三七分 五花肉三七分     2022-12-10     558

关键词:

一:标准盒模型:box-sizing:content-box;

1:首先强调一点:这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。

但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我们在代码中写的:

  width: 100px;

  height: 100px;

实际上可以理解为content的宽高,而标准盒模型代码中的with和height是不包含padding和border的。所以写出来真正这个盒子的大小变成了width:100px + 两个padding:10px +两个border:10px最终盒子大小变成如下图所示,盒子宽高都为140px。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标准盒子模型</title>
	</head>
	<style type="text/css">
		.content_box
			width: 100px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		
	</style>
	<body>
		<div class="content_box">这里是标准盒模型</div>
	</body>
</html>

 

这时你要是更改了padding或border等,那么整个盒子的大小就会被改变。那么当你想在固定一个盒子大小不变又想改变padding和border大小的话,就需要用到怪异盒模型。


二:怪异盒模型:box-sizing:border-box;

怪异盒模型的with和height都包含content,padding,border。我们在代码中写的:

  width: 100px;

  height: 100px;

实际上可以理解为指的就是真正盒子的宽高,这个时候我们去设置padding和border的大小时:盒子是固定的100px宽高不会变,content文本区域会随着设置的padding和border的变化而变化。怪异盒模型是固定盒子大小的一种方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>怪异盒子模型</title>
	</head>
	<style type="text/css">
		.border_box
			width: 100px;
			height: 100px;
			box-sizing: border-box;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		
	</style>
	<body>
		<div class="border_box">这里是怪异盒模型</div>
	</body>
</html>


总结:

标准盒模型更改padding或border等会改变原本盒子大小。

怪异盒模型基本就是固定了盒子的大小。

具体使用看你应用场景而论。

 

对标准怪异盒模型的认识

标准盒模型和怪异盒模型:什么是盒模型?网页设计中css技术所使用的一种思维模型盒模型的组成:外边距(margin)、边框(border)、内边距(padding)、内容(content)盒模型的分类:标准(W3C)盒模型、怪异(IE)盒模型对于... 查看详情

css盒模型

盒模型分为两种,一种是标准模式下的盒模型,另一种是怪异模式下的盒模型再说盒模型前先了解一下什么是标准模式,什么是怪异模式一般我们在写代码的时候都会注意到代码的顶端有一个<!DOCTYPEHTML>,这种情况下的渲染... 查看详情

标准盒模型和怪异(ie)盒模型

...出来往往很难!这种情况在面试当中经常遇到:请回答,标准盒模型和怪异盒模型的区别?     大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准。    怪异模式是“部分浏览器在支持W... 查看详情

css盒模型

盒模型分:W3C标准的盒子模型(标准盒模型)、IE标准的盒子模型(怪异盒模型)1、标准盒模型标准盒模型中width指content的宽度,height指content的高度。标准盒模型下盒子的大小=content+border+padding+margin  2、怪异盒模型怪异... 查看详情

2022-03-09——标准盒模型与怪异盒模型的区别及box-sizing的应用

...术A1、盒子模型(boxmodel)(分为怪异盒模型即IE盒模型和标准盒模型)在HTML中,可以把元素看做盒子,盒子包括:实际内容(content)、内边距(padding)、边框(border)、外边距(margin)怪异盒模型标准盒模型1.标准盒模型标准... 查看详情

盒模型——标准盒模型与怪异盒模型

盒模型是CSS中一种重要的思维模型,理解了盒模型才能进行更好的页面布局。顾名思义,我们把页面上所有的元素都看做是一个生活中常见的盒子,它具备内容(content),内边距(padding),边框(border),外边距(margin)四个... 查看详情

简述盒模型(代码片段)

...怪异盒模型的)的content包含了padding和border,这是区别于W3C标准盒模型的地方。 查看详情

盒模型概述(代码片段)

...中盒模型分为两种:   一种就是我们所熟知的标准盒模型     而另一种就是所谓的怪异盒模型或者称为IE盒模型  由上图我们可以知道        在标准盒模型中width... 查看详情

深入理解盒模型与bfc(代码片段)

标准盒模型与IE盒模型开发者们都知道,由于历史遗留问题与既定标准的发展,存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中,可以用box-sizing去定义元素的盒模型。比较这两个盒模型的差异之前,我们先... 查看详情

怪异盒模型

一、怪异盒模型  (一) box-sizing:content-box(标准盒模型/IE盒模型)/border-box(怪异盒模型)允许以特定的方式定义匹配某个区域元素的特定元素    1.content-box这是由CSS2.1规定的宽度高度行为;     宽度和高度... 查看详情

ie盒模型和标准盒模型

标准盒模型和ie盒模型(怪异盒模型)w3c标准盒模型width和height不包括padding和borderie盒模型width和height包含padding和borderie8以上都是w3c标准盒模型  ie5极其以下都是ie盒子模型,ie6、ie7、ie8在混杂模式下ie盒模型,在标准模式... 查看详情

ie的盒模型和标准模型(代码片段)

...度+border宽度+padding宽度//改变border宽度,div宽度不会变化标准模型div宽度=内容宽度+border宽度+padding宽度//改变border宽度,div宽度会变化代码<html><head></head><style>.demoborder:1pxsolid;.boxdisplay:inline-block;width:200px;height:200... 查看详情

怪异盒模型(代码片段)

...>17<body>18<div>19<!--20box-sizing:盒模型的设置2122标准盒模型content-box23盒子的宽:border+padding+width24盒子的高:border+padding+width25怪异盒模型:border-box26盒子的宽:就是设置的width会包含border+padding27盒子的高:就是设置的height会包... 查看详情

面试盒模型(代码片段)

现在的盒模型主要有三种:1.标准盒模型box-sizing:content-box;这种盒模型是平时默认使用的方式。即设置的width/height的属性是content-box的属性。2.怪异盒模型box-sizing:border-box;这种盒模型在实际开发中最方便。即width/heigth属性是border-bo... 查看详情

css盒模型(css的两种盒模型:标准盒模型怪异盒模型)和css3指定盒子模型种类的box-sizing属性

 所有HTML元素可以看作盒子,在CSS中,"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性... 查看详情

盒模型(代码片段)

...padding内边距;border边框;content内容;盒模型分为两类:标准盒模型和IE盒模型  标准盒模型:width(宽度)和height(高度)不包括padding和border;    IE盒模型:width(宽度)和height(高度)包括padding和border;    查看详情

请简述css盒子模型与css怪异盒模型

...与怪异模型的设置当设置为box-sizing:content-box时,将采用标准模式解析计算(默认模式);当设置为box-sizing:border-box时,将采用怪异模式解析计算;2、盒模型在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的... 查看详情

css盒子模型及盒子模型的类型

...(BoxModel):转自链接盒子模型有两种,分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。2.标准盒模型下盒子的大小=content+border+padding+margin... 查看详情