CSS盒子模型

最新推荐文章于 2025-07-18 22:32:19 发布
原创 最新推荐文章于 2025-07-18 22:32:19 发布 · 404 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

本文详细介绍了CSS盒子模型，包括内容区、边框、内边距和外边距。内容区是盒子的核心，边框有宽度、样式和颜色。内边距提供内容与边框之间的空间，外边距则是元素间的间距。文章还讨论了外边距的合并现象，如上下元素、包含元素间及空元素的外边距合并。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、认识盒子模型的组成

1、盒子构成

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

2、盒子举例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识盒模型</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: blue;

            margin: 30px;
            border: 40px solid black;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="d1">Hello World Yes No</div>
    <div id="d2"></div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

  • 真正可视大小：（border + padding + content）

    • 宽：40 + 50 + 200 + 50 + 40
    • 高： 40 + 50 + 100 + 50 + 40

  • 真正占用的空间：（margin + border + padding + content）

    • 宽：30 + 40 + 50 + 200 + 50 + 40 + 30
    • 高： 30 + 40 + 50 + 100 + 50 + 40 + 30

  • 通过box-sizing控制计算宽高的方式：

    • content-box：默认宽高指的是content区域；
    • border-box：宽高指定的是border + padding + content 区域。

注意

  • 一般默认情况下，指定宽。高是指定content部分的宽、高。
  • 两个盒子之间的margin，不是取margin之和，而是最大值。

二、内容区（content）

  • 内容区是盒子模型的中心区域，包含了盒子的主要信息内容：文本、图片等。
  • 当盒子中有内容时，可能会把宽高撑到超过我们指定的宽高。
  • 内容区有三个属性：
    • width：盒子内容区的高度；
    • height：盒子内容区的宽度；
    • overflow：当content中的信息太多时，并超出内容区所占用的范围时，用来指定溢出内容的处理方式。
overflow属性值描述
visible默认值，溢出的内容会出现在元素框之外
hidden溢出内容将不可见
scroll溢出的内容被修剪，但可以通过滚动条来查看隐藏部分
auto有浏览器来决定如何处理
<!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.0">
    <title>content-overflow属性</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        <h3>定义和用法</h3>
        <p>overflow属性规定当内容溢出元素框时发生的情况。</p>
        <hr>
        <h4>说明</h4>
        <p> 如果为scroll，则不论是否需要，用户代理都会提供一种滚动机制。
            所以，可能即使元素框中可以放下所有内容，也还是会出现滚动条。</p>
    </div>
</body>
</html>

在这里插入图片描述

三、边框（border）

  • 就是围绕着元素的内容和内边距的一条或者多条线，每条边框又有宽度、颜色、样式、圆角等特征。
  • 元素的边框样式包括宽度、样式、颜色等。

1、边框宽度border-width

  • 取值范围是指定的关键字或数值；指定的关键字有：thin（细边框）、medium（默认值，中等边框）、thick（粗边框）。
  • 边框的参数可以是1~4个：
参数个数表示含义
当边框参数是4个时按照上–》右–》下–》左 顺时针作用到边框上（TRBL原则：Top、Right、Bottom、Left）
当边框参数是3个时按照上–》左+右-》下 顺时针作用到边框上
当边框参数是2个时按照上+下–》左+右 顺时针作用到边框上
当边框参数是1个时指的是四个边框宽度都是一样的

2、边框样式border-style

值描述
none无边框
hidden隐藏边框
dotted点状边框，在大多数浏览器中呈现实线
dashed虚线，在大多数浏览器中呈现实线
solid实线
double双线，双线的宽度等于border-width的值
groove3D边框凹，取决于border-color的值
ridge3D边框凸，取决于border-color的值
inset3D整体凹，取决于border-color的值
outset3D整体凸，取决于border-color的值
<!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.0">
    <title>border</title>
    <style>
        h3 {
            border-style: solid dashed;   
            /* solid 实线   dashed 虚线 */
        }

        div {
            border-top-style: solid;
            border-bottom-style: double;
            border-left-style: dashed;
            border-right-style: dotted;
            /* double 双线  dotted 点线 */
        }

        p {
            border-style: outset;
            border-color: rgb(111, 111, 202);
            border-width: 10px;
            /* outset 整体凸 */
        }

        span {
            border-style: inset;
            border-color: rgb(90, 203, 218);
            border-width: 10px;
            /* inset 整体凹 */
        }

        .d1 {
            width: 100px;
            height: 100px;
            border-width: 20px;
            border-style: groove;
            /* groove 边框凹 */
        }

        .d2 {
            width: 100px;
            height: 100px;
            border-width: 20px;
            border-style: ridge;
            /* ridge 边框凸 */
        }
    </style>
</head>
<body>
    <h3>边框与背景</h3>
    <div>CSS规范指出，边框绘制在“元素背景之上”。</div>
    <p>样式是边框最重要的一个方面。如果没有样式，那么就没有边框。</p>
    <span>CSS没有定义3个关键字具体的宽度，所以每个用户可能把thin、medium、thick设置的不一样。</span>
    <br>
    <br>
    <div class="d1"></div>
    <br>
    <div class="d2"></div>
</body>
</html>

在这里插入图片描述

3、圆角边框border-radius

  • 在CSS3中，还提供了圆角边框的属性。通过border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius属性分别对左上角、右上角、右下角、左下角的样式进行设置。也可以使用border-radius统一设置。

  • 圆角边框的圆角是一条弧线。HR：椭圆的水平半径；VR：椭圆的垂直半径。当HR和VR相同时，就会变成一个1/4圆弧。
    在这里插入图片描述

  • 当HR = VR时：

参数个数表示含义
当参数是4个时按照左上角、右上角、右下角、左下角的样式进行设置
当参数是3个时按照左上角、右上角+左下角、右下角的样式进行设置
当参数是2个时按照左上角+右下角、右上角+左下角的样式进行设置
当参数是1个时指的是四个角度都是一样的
  • 当HR≠VR时：需要用斜线（/）隔开。
参数个数表示含义
一个水平 / 一个垂直四个角的水平半径和e垂直半径都相等
两个水平 / 两个垂直左上角+右下角采用水平值1，垂直半径采用垂直值1；右上角+左下角采用水平值2，垂直半径采用垂直值2
三个水平 / 两个垂直左上角采用水平值1；右上角+左下角采用水平值2；右下角采用水平值3；左上角+右下角采用水平值1，垂直半径采用垂直值1；右上角+左下角采用水平值2，垂直半径采用垂直值2
两个水平 / 四个垂直左上角+右下角采用水平值1；右上角+左下角采用水平值2；四个角的垂直值依次对应
<!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.0">
    <title>圆角边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-style: solid;
            border-width: 5px;
            position: absolute;
        }

        .d1 {
            background-color: rgb(240, 156, 156);
            top: 50px;
            left: 20px;
            border-radius: 10px;
        }

        .d2 {
            background-color: rgb(218, 148, 98);
            top: 50px;
            left: 160px;
            border-radius: 10px 30px;
        }

        .d3 {
            background-color: rgb(120, 221, 120);
            top: 50px;
            left: 300px;
            border-radius: 10px 30px 50px;
        }

        .d4 {
            background-color: rgb(109, 109, 219);
            top: 50px;
            left: 440px;
            border-radius: 10px 20px / 30px 40px;
        }

        .d5 {
            background-color: rgb(149, 99, 196);
            top: 50px;
            left: 580px;
            border-radius: 10px 20px 30px / 50px 60px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
</body>
</html>

在这里插入图片描述

4、边框阴影box-shadow

  • 可以为元素的边框添加一个或者多个阴影。 box-shadow的属性值可以由2~6个参数构成。
  • 语法格式：box-shadow：h-shadow v-shadow [blur] [spread [color] [inset] ;
值描述
h-shadow必需–水平阴影的位置–允许负值
v-shadow必需–垂直阴影的位置–允许负值
blur可选–模糊距离
spread可选–阴影的尺寸
color可选–阴影的颜色 --参阅CSS颜色值
inset可选–将外部阴影(outset)改为内部阴影
<!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.0">
    <title>border-shadow</title>
    <style>
        body {
            background-color: rgb(226, 194, 194);
        }
        div {
            border-style: solid;
            border-width: 5px;
            position: absolute;
            left: 100px;
            top: 50px;
        }

        .imgDiv {
            height: 250px;
            padding: 10px 10px 20px 10px;
            border: 1px solid black;
            background-color: rgb(241, 227, 172);
            box-shadow: 10px 6px 10px 5px rgb(107, 106, 109);
            /* 水平阴影位置  垂直阴影位置  模糊距离 阴影尺寸 阴影颜色 */
        }

    </style>
</head>
<body>
    <div class="imgDiv">
        <img src="../img1.jpg" alt="" width="200px" height="200px">
        <p>这是我的博客头像</p>
    </div>
</body>
</html>

在这里插入图片描述

四、内边距（padding）

  • 指内容区与边框之间的距离。通过padding-top、padding-right、padding-bottom、padding-left属性对元素的“上下左右”四个方向的内边距进行设置。
  • 统一设置内边距时，按照TRBL的顺序对内边距进行设置。
<!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.0">
    <title>padding</title>
    <style>
        div {
            border: 1px solid blue;
            position: absolute;
            width: 100px;
            height: 100px;
        }

        img {
            width: 100px;
            height: 100px;
        }
 
        .d1 {         /* 上下左右的内边距都是10px */
            padding: 10px;
            left: 10px;
            top: 50px;
        }

        .d2 {         /* 上下边距为10px，左右边距为20px */
            padding: 10px 20px;
            left: 160px;
            top: 50px;
        }
 
        .d3 {          /* 上边距为10px，左右边距为20px，下边距为30px */
            padding: 10px 20px 30px;
            left: 330px;
            top: 50px;
        }

        .d4 {          /* 上：10px  右：20px  下：30px  左：40px */
            padding: 10px 20px 30px 40px;
            left: 500px;
            top: 50px;
        }

        .d5 {          /* 与d4效果完全相同 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
            left: 700px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="d1"><img src="../img1.jpg" alt=""></div>
    <div class="d2"><img src="../img1.jpg" alt=""></div>
    <div class="d3"><img src="../img1.jpg" alt=""></div>
    <div class="d4"><img src="../img1.jpg" alt=""></div>
    <div class="d5"><img src="../img1.jpg" alt=""></div>
</body>
</html>

在这里插入图片描述

五、外边距（margin）

  • 指元素与元素之间的距离，就是围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。

外边距基本用法

  • 外边距与内边距相似，可以对“上下左右”四个外边距分别进行设定，也可以统一进行设定。
  • 外边距的属性表：
属性描述
margin-top设置元素上面的外边距
margin-right设置元素右侧面的外边距
margin-bottom设置元素下面的外边距
margin-left设置元素左侧面的外边距
margin简写属性，可以在一个声明中设置元素的所有外边距属性
<!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.0">
    <title>margin</title>
    <style>
        .container {
            background-color: rgb(221, 221, 240);
            border: 2px solid #000;
            width: 1000px;
            margin: 0 auto;
        }

        .img1 {
            margin: 10px 20px 30px 40px;
        }

        .img2 {
            margin-left: 10px;
        }

        .img3 {
            margin-left: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="img1" src="../img2.jpg" alt="" width="300px" height="200px">
        <img class="img2" src="../img3.jpg" alt="" width="300px" height="200px">
        <img class="img3" src="../img4.jpg" alt="" width="300px" height="200px">
    </div>
</body>
</html>

在这里插入图片描述

外边距合并

上下元素间的外边距合并

  • 当两个垂直外边距相遇时，将形成一个外边距。合并后的外边距的高度 = 合并前的两个外边距中的较大者。
  • 例如本文章开篇讲的例子。
    在这里插入图片描述

包含元素间的外边距合并

  • 当一个元素包含在另一个元素中，父元素没有内边距和边框，且子元素没有外边距时，父元素和子元素的上边距（或下外边距）也会发生合并。

在这里插入图片描述

空元素的外边距合并

  • 空元素只包含外边距而无边框和填充时，上外边距与下外边距就会碰到一起，元素的上下外边距也会产生合并。
    在这里插入图片描述

  • 当合并后的外边距再次遇到其他元素的外边距时，还会发生合并操作。

在这里插入图片描述

自学前端第九天 : CSS标准盒子模型
weixin_47592060的博客
05-04 1045
标准盒子模型（CSS重点） 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 1.前提了解: ①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;} 因为浏览器是默认使用CSS的stylesheet样式表的,而这个
前端学习 -- Css -- 内联元素的盒模型
A08110123的博客
04-24 157
内联元素不能设置width和height； 设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right； 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局； 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局； 水平外边距内联元素支持水平方向的外边距； 内联元素不支持垂直外边距； 为右...
css核心-盒子模型（Box Model）整理
赠人玫瑰,手留余香.
02-28 2664
1、对盒子模型的不同解释      这里IE6、IE8、IE9相同，火狐和谷歌、遨游等相同。先说盒子模型，CSS将所有的HTML块元素都看成是一个盒子（box),每个盒子有以下几个组成部分：Content(内容）、Padding（补白）、Border（边框）、Margin（边界）。火狐谷歌等较新的的浏览器实行加法运算，“向外扩张”。以高度为例，CSS中设置的高度为内容的高度，当增大padding
CSS内联样式盒模型
一李
10-15 388
内联元素的盒子 内联元素不能设置width和height(没用） 可以设置水平方向的内边距。 可以设置垂直方向的内边距，但是不会影响页面的布局。 可以设置边框，但是垂直方向的边框不会影响布局。 支持水平方向的外边距（水平方向的不会重叠，会求和），不支持垂直方向的外边距。 .s1{ width:200px; height: 200px; /*padding...
css---内联元素的盒子模型
chen_zan_yu_的博客
05-01 450
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; } .box1{ wi...
css盒子模型输出对联,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_补充案例.doc...
weixin_39571219的博客
08-03 1398
博学谷——让IT教学更简单，让IT学习更有效PAGE 18第4章 补充案例【案例4-1】 顶部导航栏1一、案例描述考核知识点边框的复合属性、背景颜色练习目标灵活运用边框的复合属性。掌握背景颜色的定义方法。需求分析制作网页时，经常需要给盒子设置边框，以修饰和美化元素的显示样式，常用方法如下：对盒子的四条边定义不同宽度、颜色、样式的边框盒子背景颜色和边框的合理搭配案例分析效果如图4-1所示。顶部导...
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS 图片横向排列实现代码
12-10
CSS 图片列表，横向 VB定时关机源码示例 一个好用的C++日志生成类 JS+CSS联合打造图文结合动感菜单 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
css盒子模型 - 初识CSS必会的盒子模型，非常详细的讲解，望帮助到初学者。
focuspoints' blog
10-20 1076
初学CSS必须要会的盒子模型：首先，我先给你们介绍一下与盒子模型有关的CSS属性。1.margin： 该属性为外边框，包含四个值：margin-top、margin-right、margin-bottom、margin-left. 分别为上、右、下、左外边框。（要记住这个上右下左的顺序，其他属性也会用到。） margin是可以直接写一个值(即上右下左四个边框都为40px)，例如
css的盒子模型介绍,CSS盒模型详解
weixin_42107561的博客
08-04 567
盒模型基本概念盒模型本质是一个盒子，包括边距，边框，填充，和实际内容。标准盒模型和IE盒模型不同在于高度和宽度计算的不同，标准模型width和height只是指content，IE盒模型的width和height是content、padding、border的和。获取盒模型的宽高JS：dom.style.width/height但是页面中样式有三种设置方式：设置元素中style属性head标签中s...
CSS盒模型
Orz~~Orz
01-24 522
盒模型--边框 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 div{ border-width:2px; border-style:solid; border-color:red; } 注意： 1、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid
CSS盒子模型最详解
qq_37805832的博客
10-31 1190
1:什么是盒子模型? 最重要的一点就是水平方向外边距是会叠加的哈 内容+内边距+边框+外边距==盒子模型; 注意一下:外边距是没有背景颜色的哈.设置不了的哈. 举例子： 结论 1.在HTML中所有的标签都可以设置 宽度/高度 == 指定可以存放内容的区域 内边距 == 填充物 边框 == 手机盒子自己 外边距 == 盒子和盒子之间的间隙 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset
《透视定轴：CSS 3D魔方中视觉层级的秩序法则》
xy520521的博客
07-16 511
本文探讨CSS 3D旋转魔方中视觉层级的构建逻辑，核心解析透视属性如何维持各面的前后秩序。透视通过设定虚拟观察点与原点，将魔方各面的三维空间位置转化为屏幕上的视觉大小与遮挡关系，近处面清晰突出，远处面收缩遮挡。文章介绍了透视参数（距离、原点）的调校原则，以及通过动态Z轴调整、父容器嵌套化解层级冲突的策略，还阐述了光影与透视的匹配方法。最终揭示透视是模拟人类空间感知的核心，让二维屏幕呈现出符合现实逻辑的3D魔方层级效果。
JS获取 CSS 中定义var变量值
最新发布
每天都要努力学习哦~~
07-18 557
一个只读属性，返回文档中所有。
tailwindcss报错
ike_yu的博客
07-17 145
解决办法}),
css 盒子模型
04-10
CSS盒子模型是网页设计和布局中的核心概念之一。它描述了HTML文档结构化的方式以及如何通过样式控制这些元素的空间分配。 #### 1. 盒子模型的组成部分 每个HTML元素都可以看作是一个矩形盒子，该盒子由以下几个部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值