做网站的主流软件,济南高新区建设局网站,百度小程序wordpress,wordpress怎么做好看的图片页面在CSS中#xff0c;有两种主要的盒模型#xff08;Box Model#xff09;#xff0c;它们决定了元素的尺寸计算方式#xff1a; 标准盒模型#xff08;W3C Box Model#xff09; 在标准盒模型中#xff0c;元素的总宽度和总高度分别由以下几个部分组成#xff1a; Cont…在CSS中有两种主要的盒模型Box Model它们决定了元素的尺寸计算方式 标准盒模型W3C Box Model 在标准盒模型中元素的总宽度和总高度分别由以下几个部分组成 Content内容区这是元素的实际内容比如文字、图片等由 width 和 height 属性设置的尺寸仅影响内容区的大小。Padding内边距围绕内容区的空白空间可通过 padding 属性来设置。Border边框紧邻内边距的边框可通过 border 属性来设置边框的宽度、样式和颜色。Margin外边距元素外部的空白区域与其他元素分隔开来由 margin 属性控制。
所以在标准盒模型中当您声明一个元素的宽度width时这个宽度仅仅指的是内容区域的宽度整个盒子的总宽度将是
总宽度 margin-left border-left padding-left width padding-right border-right margin-right
怪异盒模型IE盒模型 / Quirks Mode Box Model 在怪异盒模型通常在老版IE浏览器中使用但在某些quirks模式或特定情况下现代浏览器也可能采用此模型中元素的宽度width和高度height属性同时包含了内容区以及内边距边框的尺寸。 因此在怪异盒模型中如果设置了元素的宽度width那么
总宽度在这里称为“总布局宽度” border-left padding-left width padding-right border-right 注意这里的“总宽度”其实是指内容加上内边距的宽度而不是整个盒子占据的空间外边距依然独立计算。 为了统一不同浏览器之间的盒模型行为并确保元素的尺寸计算一致可以使用CSS3中的 box-sizing 属性来指定盒模型的计算方式 box-sizing: content-box; 表示使用标准盒模型默认大多数现代浏览器的行为。box-sizing: border-box; 表示使用怪异盒模型此时元素的总宽度或高度会包含内边距和边框仅content的尺寸会影响元素内部内容的大小。
