CSS-盒模型

Myth丶恋晨 2024-03-27 17:37 90阅读 0赞

#### 盒模型组成 ####

先定义一个class名为box的盒子，定义宽、高、外边距、内边距、边框。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .box{
                    width: 100px;
                    height: 100px;
                    padding: 10px;
                    border: 5px solid red;
                    margin: 10px;
                    background-color: rebeccapurple;
                }
            </style>
        </head>
        <body>
            <div class="box"></div>
        </body>
    </html>

打开浏览器f12进入控制台我们可以看到如图

![06fca7e88e268be35724ae6e5c9cca4a.png][]

蓝色部分content：是元素的宽和高

border：是盒子的边框

Padding：是元素的内边距

margin：是元素的外边距

#### 使用方法 ####

###### border ######

border：粗细 样式 颜色；

例：border: 3px solid red;（宽3像素红色实线边框）

border-color:单独设置边框颜色

border-width:单独设置边框大小

border-style:单独设置边框样式

可选值：

solid：实线

dashed：虚线

double：双线

dotted：点线

border-top/right/bottom/left:单独设置上、右、下、左的边框样式

###### padding ######

padding: 上 右 下 左；

例：padding:1px 2px 3px 4px；（上内边距1像素右内边距2像素下内边距3像素左内边距4像素）

padding: 上 右/左 下

padding: 上/下 左/右

padding: 上下左右

###### margin ######

[06fca7e88e268be35724ae6e5c9cca4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f98cfdca8ca44505abf9e95536e53af2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS-盒模型

盒模型组成先定义一个class名为box的盒子，定义宽、高、外边距、内边距、边框。 <!DOCTYPE html> <html> <h

Myth丶恋晨/ 2024年03月27日 17:37/ 0 赞/ 91 阅读

相关 CSS盒模型

盒子模型：盒子模型,又称框模型 (Box Model) ![4c87c5ede4c2210fcc827a0d7de07e1e.png][] 盒子模型主要的属性：w

不念不忘少年蓝@/ 2023年01月01日 02:58/ 0 赞/ 212 阅读

相关 CSS盒模型

1 元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

我就是我/ 2022年06月14日 02:15/ 0 赞/ 322 阅读

相关 CSS盒模型

盒模型是CSS布局的最基本组成部分，它指定页面元素如何显示及在某种方式上如何交互，在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内补丁（pa

旧城等待，/ 2022年05月30日 12:43/ 0 赞/ 287 阅读

相关 CSS盒模型

1）盒模型结构 ![70][] 想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

古城微笑少年丶/ 2022年05月27日 08:46/ 0 赞/ 299 阅读

相关 CSS盒模型

盒模型单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区

r囧r小猫/ 2022年05月17日 02:25/ 0 赞/ 356 阅读

相关 CSS盒模型

1、盒模型基本概念：标准模型 + IE模型标准模型的width和height不包含border和padding： ![70][] IE模型的width和h

骑猪看日落/ 2022年05月11日 03:12/ 0 赞/ 306 阅读

相关 css盒模型

首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？什么是盒模型盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图：

傷城~/ 2022年01月20日 07:35/ 0 赞/ 298 阅读

相关 CSS：盒模型

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在CSS中有两种盒模型: (1)W3C标准盒模型：包括

悠悠/ 2022年01月13日 10:04/ 0 赞/ 337 阅读

相关 CSS盒模型

![img1.gif][] 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内

秒速五厘米/ 2021年11月27日 00:28/ 0 赞/ 421 阅读