CSS盒模型-4.1-一个盒模型是由4大部分组成的元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒、外边距（margin）

最新推荐文章于 2022-08-08 16:02:33 发布

say hi.

最新推荐文章于 2022-08-08 16:02:33 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108255882

版权

1.什么叫盒模型
盒模型，英文叫做Box Modle
所有的HTML元素都可以看作一个盒子模型
我们可以把盒模型就想象成为一个盒子
盒模型中主要用来对HTML元素进行布局时使用

2.盒模型的作用
浏览器在渲染页面的时候就会根据VSS盒模型的规则，将所有的HTML元素表示成为一个矩形的盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性特性，最终显示出来

3.盒模型的构成
一个盒模型是由4大部分组成的
元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒、外边距（margin）
border 不设置样式（如solid）相当于白扯
例如：

.box { padding : 20px ; boeder :5px; solid #000000; margin :50px;}
<div class="box">我是一个div元素</div>

元素内容（content）物品、内边距（padding）*2泡沫、边框（border）*2纸壳盒、外边距（margin）*2

小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型</title>
    <style>
        .box {
            padding: 50px;
            border: 1px solid red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box">华为云</div>  
</body>
</html>

在这里插入图片描述

say hi.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型-4.1-一个盒模型是由4大部分组成的元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒、外边距（margin）

1.什么叫盒模型盒模型，英文叫做Box Modle所有的HTML元素都可以看作一个盒子模型我们可以把盒模型就想象成为一个盒子盒模型中主要用来对HTML元素进行布局时使用2.盒模型的作用浏览器在渲染页面的时候就会根据VSS盒模型的规则，将所有的HTML元素表示成为一个矩形的盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性特性，最终显示出来3.盒模型的构成一个盒模型是由4大部分组成的元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒
复制链接

扫一扫