盒模型简介绍

时间 2019-12-12

标签模型介绍繁體版

原文原文链接

标签（空格分隔）：盒模型css

盒模型的概念：

在CSS中，"box model"这一术语是用来设计和布局时使用，而后在网页中基本上都会显示一些方方正正的盒子。咱们称为这种盒子叫盒模型。html

盒模型有两种：标准模型和IE模型。咱们在这里重点讲标准模型。python

盒模型的属性：

width：内容的宽度布局

height: 内容的高度设计

padding：内边距，边框到内容的距离code

border: 边框，就是指的盒子的宽度htm

margin：外边距，盒子边框到附近最近盒子的距离blog

若是让你作一个宽高402*402的盒子，您如何来设计呢？图片

答案有上万种，甚至上一种。it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            padding: 20px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>

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

如上述的代码产生的以下图的页面，右下角就是对应的盒模型；

盒模型的重要属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            /*padding: 20px;*/
            /*border:1px solid red;*/
        }


    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            padding: 20px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

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

经过上述的效果你们能够进行对比一下；

总结：在网页中基本都会显示一些方方正正的盒子，这种盒子被咱们称为盒模型，重要的属性就是：width,height,padding,border,margin
width:指的是内容宽度，而不是整个盒子的宽度；
heigth:指的是内容的高度，而不是整个盒子真实的高度；

盒模型的计算

作一个402*402的盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和模型的计算</title>
    <style type="text/css">
        div{
            width:400px;
            height: 400px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

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

以下图查看对应的图片展现，200+border(上下)=402,200+border(上下)=402

第二种实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和模型的计算</title>
    <style type="text/css">
        /*div{*/
            /*width:400px;*/
            /*height: 400px;*/
            /*border:1px solid red;*/
        /*}*/
        div{
            width:200px;
            height: 200px;
            border:1px solid red;
            padding: 100px;
            
        }
        


    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

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

总结：若是一个盒子设置了padding，border，width，height，margin(我们先不要设置margin，margin有坑，后面课程会讲解)
盒子的真实宽度=width+2padding+2border
盒子的真实宽度=height+2padding+2border 那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。另外若是要保持盒子真实的宽度，那么加padding就必定要减width，减padding就必定要加width。真实高度同样设置。

1. 盒模型介绍
2. 盒模型简介
3. 盒模型的简单介绍
4. css盒子模型的简单介绍
5. CSS盒子模型简介
6. 盒子模型简介
7. 简介盒子模型
8. CSS 盒模型简介
9. CSS盒模型简介
10. 框模型/盒子模型简介
更多相关文章...
• MySQL数据类型简介 - MySQL教程
• ASP.NET MVC - 模型 - ASP.NET 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• 委托模式