前端 CSS 盒子模型

时间：2019-05-18 16:36:56 阅读：101 评论：0 收藏：0 [点我收藏+]

盒模型的概念

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

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

盒模型示意图

技术分享图片

盒模型的属性

margin(外边框): 用于控制标签与标签之间的距离；margin的最基本用途就是控制标签周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding(内边框): 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像
width：指的是内容的宽度，而不是整个盒子的真实的宽度。
height: 指的是内容的高度，而不是整个盒子的真实的高度。

margin 外边框

技术分享图片

border 边框

技术分享图片

padding 内边距

技术分享图片

content内容

技术分享图片

例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容
    </div>
</body>
</html>

页面显示是这样子

技术分享图片

加上padding 20px效果

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容
    </div>
</body>
</html>

文字外面加上内边距

技术分享图片

再加上border 10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容
    </div>
</body>
</html>

技术分享图片

在内边距外面加上10px的红色边框

技术分享图片

前端 CSS 盒子模型

原文：https://www.cnblogs.com/mingerlcm/p/10820950.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)