0717-7821348
关于我们
热点新闻NEWS

爱彩人彩票大乐透走势图-爱彩人网-大乐透爱彩人彩网走势图

您现在的位置: 首页 > 关于我们

在网页布局中,咱们能够将 HTML 标签当作一个个矩形盒子,盒模型就是用来描绘这些矩形盒子所占的空间巨细。

相关特点

在开端盒模型的介绍之前,咱们先来了解一下与盒模型相关的 CSS 特点。

width 和 height 别离指定了一个元素的宽高

咱们给 div 标签别离设置100px 的宽高,它在浏览器中的作用如下:



.box {
width: 100px;
height: 100px;
background-color: #FFB5BF;
}

(宽高均为 100px 的 div)

border 指元素的边框

border 是 border-width、border-style、border-color 的简写,别离用来设置边框的宽度,款式(实线、虚线、双线等),色彩。

.box {
width: 100px;
height: 100px;
border: 5px solid #94E8FF;
background-color: #FFB5BF;
}

(蓝色部分为 border)

padding 指内边距,是元素内容和边框之间的部分

padding 是 padding-top、padding-right、padding-botto人体摄影艺术m、padding-left 的简写,别离指上内边距、右内边距、下内边距和左内边距。

几种设置 padding 值的办法:

padding: 10px; /*上、下、左、右内边距均为10px*/
padding: 10px 20px; /*上、下内边距为10px,左右内边距为20px*/
padding: 10px 20px 30px; /*上内边距为10px,左、右内边距均为20px,下内边距为30px*/
padding: 10px 20px 30px 40px; /*上内边距为10px,右内边距为20px,下内边距为30px,左内边距为40px*/

举个比如:

.box {
width: 100px;
height: 100px;
border: 5px solid #94E8FF;
background-color: #FFB5BF;
padding: 10px 20px 30px;
}

在浏览器中的运转成果如下:

(绿色部分为 padding)

在浏览器中翻开“开发者东西”,用最左边的箭头图标选中右侧的 div 元素,检查“Elements”下面的“Computed”,便能够一望而知的检查挑选元素的各类特点。



( 绿色部分为 padding,上下左右均有显现对应的 pad前端根底面试:CSS盒子模型,规范盒子模型与IE盒子模型的差异ding 值)

margin 指外边距,用来界说元素周围的空间

margin 是 margin-top、margin-right、margin-bottom、margin-left 的简写,同 padding 相同,margin 值也有多种设置办法,不同写法对应的值参照 padding。

.box {
width: 100px;
height: 100px;
background-color: #FFB5BF;
border: 5px solid #94E8FF;
padding: 10px 20px 30px;
margin: 10px;
}

(上色部分为 margin)

盒模型的分类

因为浏览器的差异性,盒模型分为规范盒模型和IE盒模型,它们的出现办法和对盒子巨细的核算略有不同,咱们先经过代码示例来体会一下差异。



.box_1 {
width: 100px;
height: 100px;
background-color: #FFB5BF;
border: 5px solid #94E8FF;
padding: 10px 20px 30px;
margin: 10px;
}
.box_2 {
width: 100px;
height: 100px;
background-color: #FFB5BF;
border: 5px solid #94E8FF;
padding: 10px 20px 30px;
margin: 10px;
box-sizing: border-box; /* 较 box_1 新添加的特点 */
}

(.box_1 作用图)


(.box_2 作用图)

以上两前端根底面试:CSS盒子模型,规范盒子模型与IE盒子模型的差异张图就是两种盒模型的差异表现,.box_1 是规范盒模型,是 W3C 的规范;.box_2 是老的 IE 浏览器在奇怪形式下运用自己的非规范模型,也可称为 IE 盒模型。在规范盒模型下经过设置 box-sizing: border-box; 可转换为 IE 盒模型。

规范盒模型

  • 元素的 width、height 只包含内容 c前端根底面试:CSS盒子模型,规范盒子模型与IE盒子模型的差异ontent,不包含 border 和 padding 值;
  • 盒子的巨细由元素的宽高、边框和内边距决议。

咱们用盒子的宽高来衡量盒子的巨细,能够看做是总的元素宽度和高度,与元素自身设置的宽高(width、height)不是同一个概念。

盒子的宽 = width + border-width * 2 + padding-left + padding-right

盒子的高 = height + border-前端根底面试:CSS盒子模型,规范盒子模型与IE盒子模型的差异width * 2 + padding-top + padding-bottom

在 .box_1 中,盒子的宽为150,就是由100 + 5*2 + 20 + 20 核算所得;高为150,是 100 + 5*2 + 10 + 30 核算所得。

IE盒模型

  • 元素的 width、height 不只包含 content,还包含 border 和 padding;
  • 盒子的巨细取决于 width、height,修正 border 和 padding 值不能改动盒子的巨细。

在 .box_2 的作用图中,咱们能够看到盒子的巨细等于元素的 width、height 值。在 IE 盒模型中,border 和padding 的空间会揉捏 content 的空间,使得元素的内容宽高小于 width、height 设置的值(100px)。

浏览器兼容性及其他

  • 只需设置了适宜的 DTD,大多数浏览器会依照规范盒模型来显现,可是 IE5.X 和 6 在奇怪形式下会依据 IE 盒子模型进行显现。
  • 规范盒模型下元素的 box-sizing 特点(IE8+)默认值为 content-box,将它设置成 border-box 可转换为 IE 盒模型。在实践使用场景中,若想操控元素总宽高坚持固定,这个设置很有用。
  • 元素的宽(width)、高(height)、边框(border)、内边距(padding)、外边距(margin)都是盒子模型的重要组成部分,可是盒子模型的巨细只与元素的宽高、边框、内距离有关,外边距只影响盒子所占外围空间的巨细。

欢迎重视