在HTML中，元素由content、padding、border、margin构成。万般变化，都不离其中，所有的css属性基本上都是围着这四部分服务。由这四部分构成的盒模型在不同的浏览器中，标准也不一样。现在主要分为两种。
一种是大部分浏览器都遵守的W3C盒模型。对元素设置的width，height指的就是content部分，而padding与border不计入元素width，height的实际计量范围。
另一种这是IE的盒模型，通常又叫怪异盒模型，在怪异盒模型中，对元素设置的width，height指的是content+border+padding共同组成的部分。
这两种模型一般可通过对元素设置box-sizing切换，box-sizing的值content-box是标准盒模型,也就是W3C盒模型，而另一个值border-box，就是IE的怪异盒模型了。这个属性的应用场景一般在表单宽度的时候有用。或者需要计算元素在布局中真实所占的空间时。可以通过切换box-sizing获取真实宽高。
在HTML中，元素由content、padding、border、margin构成。万般变化，都不离其中...
CSS盒模型的知识点 基本概念：标准盒模型和IE模型 标准模型和IE模型的区别 CSS如何设置这两种模型 JS如何...
前端第四天 目录： 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...
一、概述 CSS有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型，这两种盒模型，主要区别是在解释元素的widt...
什么是盒模型？ 目前盒模型分为两种，分别是符合w3c标准的盒模型与IE盒模型，这两种盒模型在网页布局中是有差异的，...
盒模型 盒模型主要两种，标准盒模型和怪异和模型 标准盒模型：width指content部分的宽度 怪异盒模型：wi...
盒模型 盒模型主要两种，标准盒模型和怪异和模型 标准盒模型：width指content部分的宽度 怪异盒模型：wi...
盒模型有两种，一种为标准盒模型，又称为W3C盒模型；另一种为怪异盒模型，又称为IE盒模型。其区别在于两种盒模型的c...
盒模型 盒模型，可以简单解释为：盒模型用来描述元素所占据的空间。有两种盒模型：W3C盒模型(标准盒模型)和IE盒模...
盒模型，可以简单解释为：盒模型用来描述元素�所占据的空间。 有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型这...
本文标题：前端知识总结 1-CSS的两种盒模型
本文链接：https://www.haomeiwen.com/subject/kkwfcqtx.html
网友评论