首页 > > 网页制作 > css >

盒子模型浅析

2018-06-24 02:27:20来源：未知阅读 ()

上篇文章总结了块级元素和行内元素

这篇文章总结了有关盒子模型的知识，助于梳理知识

首先，什么是盒子模型
我们知道，html文档中，基本上每个元素都可以看作一个盒子，我们称之为盒子模型。

盒子模型的组成
盒子模型包含四个重要的部分：
content(width、height):盒子内容宽高
padding:内边距(填充)
border:边框
margin:外边距

重点：对于盒子来说，设置的宽高和真实占有宽高是不一样的
如图（一般我们以标准盒子模型为主学习）

在标准盒子模型中,我们用css属性中的设置width,height其实是内容content的宽高，如果增加边距和边框将会增加盒子的宽度（也就是说,如果padding,margin,border都为0的话，盒子真实占有宽度和内容宽度是一样的）。
在IE盒子模型中,我们设置的width、height指的是盒子真实占有宽高,即如content+border+padding的宽高。

PS：
在浏览器，有一些元素有着默认的设置margin,padding,border,这也是我们写css时一般加入*{margin:0;padding:0}重置样式的原因。

注意,盒子模型是立体的，即组成盒子的每个部分有着各自的层次
border----->content+padding----->background-image----->background-color----->margin 如下图：

即：
第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)

那么这些层级有什么用呢？
通过这些层级显示，我们可以知道优先级的问题：
比如同时设置背景图和背景色时，背景图将会在背景色上方显示

原情况（有背景图无背景色）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box {
            width:400px;
            height: 200px;
            margin:100px auto;
            background-image: url(1.jpg);
            /*background-color: gray;*/
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>