趣悟第1期:CSS盒子模型

Duang Duang Duang!!!

小伙伴们校招面试的时候是不是经常被面试官问这样的问题:能说说你了解的盒子模型吗?

能!当然能!

这是一个很基础的前端问题,在校招面试时,面试官想考察你前端基础功的时候,会经常被问到哦。

标准的盒模型主要有两种:

  • 标准(W3C)盒模型
  • IE盒模型

两者的区别主要在于元素宽度计算方式不一样。盒子模型构成:内容(content)、内填充(padding)、 边框(border)、外边距(margin)。

但是IE8及其以下版本浏览器,未声明 DOCTYPE,内容宽高会包含内填充和边框,被称为IE盒模型。

  1. 标准(W3C)盒模型
    在标准盒模型中,总元素宽度 = width + padding + border + margin

  2. IE盒模型
    IE盒模型中,总元素宽度 = width + margin

明晃晃的例子:

试想一下,你只有250像素的空间。让我们设置总宽度为250像素的元素:

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

在标准模型下,总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距=220px (width)+ 20px (左 + 右padding)+ 10px (左 + 右border)+ 0px (左 + 右margin)= 250px

紧接着,面试官就会问:通过什么属性修改盒子模型呢?

CSS3有一个box-sizing属性
该属性定义了 user agent 应该如何计算一个元素的总宽度和总高度

box-sizing: content-box(默认)|border-box|inherit:

content-box:是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。(标准盒子模型)

即:
	width = 内容的宽度
	height = 内容的高度

宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。

border-box :告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。(IE盒子模型)

    即:          
   		width = border + padding +内容的宽度
    	height = border + padding + 内容的高度

明晃晃的例子:

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值