html盒子模型代码_CSS盒模型详解

c427e710a047dee6be95ad3f424726d4.png

盒模型是CSS的基础中的基础。 因为它的重要性,所以很多面试中都会提到。它也成为了考察求职者基本素质的一道题。属于绝对的经典问题。这样描述,相信大家能意识到盒模型的重要性了吧。

然而,在面试的过程中,我发现还有不少求职者,回答的支支吾吾,嗯!是那个,对!就是那样。说实话,我真觉得有些不妥。 今天我就重新整理一下,希望能帮到大家。

什么是盒模型呢?

我们先来看一种图:

e9b3baf826362f554fadd93b696486f9.png

当浏览器对一个HTML文档进行布局的时候,会把每一个元素都渲染成一个矩形的盒子,盒模型就是对这些元素的形状进行一个抽象。

盒模型的组成部分是由四个部分组成:content(内容区域) padding(内边距) border(边框区域) margin(外边距区域)

如下图:

69468a5d8e0f07e88947289c4a0c70eb.png

盒模型有多少种呢?它们的区别在哪里?

说到盒模型,就不得不说说IE盒模型和W3C标准盒模型(w3c盒模型又称标准盒模型)这两种盒模型。

它们主要的区别在与 width 属性所包含的大小

我们定义一个div 并将其宽高设置成200像素,内边距为10像素,边框为20像素, 外边距为30像素。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0
        }
        #box{
            margin: 30px;
            padding: 10px;
            border: 20px solid red;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

我们先来看一下比对效果:

3d68cde13fa5d3264a605133b3091a60.png

9b66a03a5e5252ce636fe784567dccf8.png

我们发现标准盒模型的计算方式是:

width = content

而IE盒模型是:

width = 2 * border + 2 * padding + content

一句话描述区别: IE盒模型的width属性包括两倍的宽和两倍的边框再加上内容区域的宽度,标准盒模型width就是等于内容区域的宽度,padding和border属性依次撑开。两者的height属性亦是如此。

519e4b011f667b7eecb56bb008f61e1d.gif

盒子模型的计算有margin吗?两个盒模型怎么切换呢?

首先确定的是marign是盒模型的一部分。由于margin是盒子外部,也是就是元素之间的间距,一般来说,计算盒子(注意我这里表述的是盒子,不是盒模型)大小的时候。我们会扣除它。

一般来说,标准的盒模型实际占用空间计算公式为:

  • 水平空间大小 = 2 * margin + 2 * border + 2 * padding + width
  • 垂直空间大小 = 2 * margin + 2 * border + 2 * padding + height

盒子占用空间计算公式为:

  • 水平空间大小 = 2 * border + 2 * padding + width
  • 垂直空间大小 = 2 * border + 2 * padding + height

盒子模型的切换是用到了:

box-sizing: border-box(标准盒模型) content-box(IE盒模型)

最后一问: outline属性会影响到盒子的计算吗?

不会!!!

下面 的你值得拥有:

沈志勇说

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值