CSS开发基础——CSS盒子模型

朱雀 2022-07-13 15:26 147阅读 0赞

## 1、CSS的盒子模型 ##

![CSS盒子模型][CSS]

*  **height：高度**
 *  **width：宽度**
 *  **padding：内边距**
 *  **margin：外边距**
 *  **border：边框**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> { margin: 0; padding: 0; } .box{ width: 300px; height: 300px; padding: 50px; border: 50px solid #54acf3; margin: 50px; color: #fff; background: #2196F3; } </style>
    </head>
    <body>
        <div class="box">
                在此可以填充内容
    
        </div>
    </body>
    </html>

#### 显示结果如下： ####

![这里写图片描述][SouthEast]  
通过改变width、height、padding、margin的值改变显示结果，还可以设置margin-left、margin-right等值，每一个值下面都是一串的设置，通过调试可以发现整个图形的现实是有上、下、左、右不同的块组成的，可以对不同的块进行剪切设置，使用起来比较方便。

#### 调试情况如下： ####

![这里写图片描述][SouthEast 1]

可以清晰的看到调试出来的盒子模型每个值的设置情况。  
CSS可以用ie、和google浏览器进行预览和调试，但是调试的过程中chrome浏览器的颜色可以在图中的小方块处直接选择，但是ie浏览器需要手动设置，而且用chrome设置其他值时按回车可以直接进入下一行，但是ie浏览器不能直接回车进入下一行，对于初学者来说，用chrome浏览器进行调试比较方便。前端的学习需要在不同的浏览器进行调试，稍微熟练的话可以多加练习。

[CSS]: /images/20220713/d09b1194333d45ea95edffd80dda3ad3.png
[SouthEast]: /images/20220713/486363c71efc4337926886d4be37dc1f.png
[SouthEast 1]: /images/20220713/2430e26c67c4481790508d5092d6cb66.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 28 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明，先举个通俗的例子：在一个仓库中放了

女爷i/ 2022年08月13日 12:40/ 0 赞/ 165 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明

Myth丶恋晨/ 2022年08月13日 12:37/ 0 赞/ 145 阅读

相关 CSS开发基础——CSS盒子模型

1、CSS的盒子模型 ![CSS盒子模型][CSS] height：高度 width：宽度 padding：内边距 margin：外边距

朱雀/ 2022年07月13日 15:26/ 0 赞/ 148 阅读

相关 css盒子模型

CSS盒子模型 ![Center][] 一个区块元素所占的空间总大小： X轴：margin-left + border-left + padding-left + w

今天药忘吃喽~/ 2022年06月11日 00:51/ 0 赞/ 265 阅读

相关【CSS】盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，

以你之姓@/ 2022年04月01日 02:40/ 0 赞/ 335 阅读

相关 css盒子模型

盒模型的概念盒子模型（box model）。网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒子模型的概念可以结合我们

喜欢ヅ旅行/ 2022年01月22日 07:51/ 0 赞/ 449 阅读

相关 CSS盒子模型

目录一网上盒子模型分析二点睛三代码四解读 -------------------- 一网上盒子模型分析 ![2020072519250610

Bertha 。/ 2021年07月24日 21:02/ 0 赞/ 470 阅读

相关 css 盒子模型

span标签(行内标签)：为了设置单独的样式 div标签(块级标签): 用来布局,会将其中的子元素内容作为一个独立的整体而存在

客官°小女子只卖身不卖艺/ 2021年07月24日 14:14/ 0 赞/ 516 阅读

相关 CSS盒子模型

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。盒子模型通过四个边界来描述：margin（外边距），bord...

你的名字/ 2021年03月26日 14:51/ 0 赞/ 618 阅读