CSS盒子模型（三）

最新推荐文章于 2024-11-01 12:26:05 发布
最新推荐文章于 2024-11-01 12:26:05 发布
阅读量218 收藏
点赞数
分类专栏： # CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/115270301
版权
本文详细介绍了CSS盒子模型的基本概念，包括盒子的组成（内容、内边距、边框和外边距）、边框样式、padding设置、margin用法、以及如何实现块级元素的居中对齐、背景图片、圆角和阴影效果。同时涵盖了盒模型在布局稳定性和CSS书写规范中的应用。
摘要由CSDN通过智能技术生成

css盒子模型

网页布局的关键点：盒子

盒子模型组成部分

盒子的组成

  • margin(外边距)
  • border(边框)
  • padding(内边距)
  • content(内容)
    在这里插入图片描述

border

  • border-width:边框的宽度
  • border-style:边框的样式 默认值：none(无样式) solid(实线) dashed(虚线) dotted(点线)
  • border-color:边框的颜色

简写方式

    border:border-width  border-style  border-color

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: blue;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

border边框的综合写法

在这里插入图片描述

border-collapse

border-collapse:表格合并

因为表格中的行标签和单元格标签都拥有自己的边框 因此需要合并边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table,
        tr,
        td,
        th {
            border-collapse: collapse;
            text-align: center;
        }
        
        .t-red {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500">
        <caption>
            <h2>小说排行耪</h2>
        </caption>
        <tr class="t-red">
            <th>排名</th>
            <th>关键词</th>

            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>

            <td>345</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>

            <td>34555</td>
            <td>123444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>

            <td>24555</td>
            <td>13444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr class="t-red">
            <td>4</td>
            <td>东游记</td>

            <td>3455</td>
            <td>3444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>

            <td>3555</td>
            <td>1444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>

            <td>355</td>
            <td>12344</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr class="t-red">
            <td>7</td>
            <td>三国演义</td>

            <td>3555</td>
            <td>13444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>


    </table>
</body>

</html>

在这里插入图片描述

padding

padding：盒子距离内容之间的距离 使用内边距之后盒子会变大

padding设置

在这里插入图片描述

padding简写

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            padding: 20px;
            text-align: center;
            line-height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>Hello Word</div>
</body>

</html>

在这里插入图片描述

新浪导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            height: 42px;
            line-height: 42px;
            background-color: hotpink;
            text-align: center;
        }
        
        .nav a {
            display: inline-block;
            color: gray;
            padding: 0px 20px;
            text-decoration: none;
        }
        
        a:hover {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新浪网</a>
        <a href="#">客户端</a>
        <a href="#">登录</a>
        <a href="#">微博</a>
        <a href="#">博客</a>
    </div>
</body>

</html>

效果图

在这里插入图片描述

盒子实际尺寸

    盒子的宽度：Elements width= content Width + padding Width + border
    盒子的高度：Elements height= ontent height + padding height +border

内边距是一定要真实存在的，只能减去盒子的宽高，来维持盒子的宽高不变


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的实际尺寸</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h2 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 20px;
            margin: 200px auto;
            background-color: burlywood;
            /* 盒子的宽度：200px+20px+20px+2px = 242px */
            /* 盒子的高度：200px+20px+20px+2px = 242px*/
        }
    </style>
</head>

<body>
    <h2></h2>
</body>

</html>

在这里插入图片描述

padding不影响盒子大小的情况下

在特殊情况下，如果指定的盒子没有给宽高，则盒子不会被padding值撑开。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding不影响盒子的宽高的前提下</title>
    <style>
        .nav {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: blue;
        }
        
        .nav p {
            height: 200px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <p></p>
    </div>
</body>

</html>

在这里插入图片描述

课堂案例

案例1

在这里插入图片描述
盒子的宽度为130

案例2

在这里插入图片描述
盒子宽度为200px+100px+50px+2px=352px

盒子高度为200px+50px+50px+1px+5px=306px

内边距是一定要真实存在的，只能减去盒子的宽高，来维持盒子的宽高不变

margin是外边距，是盒子与盒子之间的距离
在这里插入图片描述

margin的简写

同理和padding值的简写一致

块级盒子水平居中对齐

满足两种条件才能让盒子居中对齐

  1. 盒子必须指定宽度
  2. 左右的外边距margin设置auto

设置auto的三种方法

margin-left:auto margin-right:auto;

margin:auto

margin:0px auto;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子水平居中的方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

在这里插入图片描述

盒子水平居中对齐和文字水平居中对齐

text-align:不仅可以让文字水平居中对齐，还可以让行内块元素和行内元素水平居中对齐

margin:auto :可以让块级盒子水平居中对齐


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子及文本居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            text-align: center;
            line-height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>Hello Word</p>
</body>

</html>

在这里插入图片描述

插入图片与背景图片的区别

插入图片

插入图片一般用于展示类 ，通过盒模型的padding和margin来移动位置


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 600px;
            height: 600px;
            margin: 200px auto;
            border: 1px solid red;
        }
        
        p img {
            width: 400px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <p>
        <img src="./image/desktop.jpg" alt="">
    </p>
</body>

</html>

在这里插入图片描述

背景图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 600px;
            height: 600px;
            margin: 200px auto;
            border: 1px solid red;
            background: url(./image/desktop.jpg) no-repeat scroll 20px 50px;
            background-size: 200px 200px;
            /* background-size:宽  高 */
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

背景图片一般用于做一些精灵图等等，通过background-position来移动位置
在这里插入图片描述

清除元素的默认的内外间距

* {

    margin：0；
    padding:0;
}

注意事项

为了照顾行内元素的兼容性，只设置左右内外边距，不设置上下内外边距；

外边距合并问题

相邻块元素外边距合并问题

相邻块元素合并：取两个块元素外边距合并的较大值，所以只给一个盒子的外边距是最好的解决方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并之相邻块元素</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav,
        .header {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: auto;
        }
        
        .nav {
            margin-bottom: 50px;
        }
        
        .header {
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="nav"></div>
    <div class="header"></div>
</body>

</html>

在这里插入图片描述

嵌套块元素外边距合并问题的三个方法

嵌套块元素外边距合并问题的三个方法

  • 给父元素border值
  • 给父元素padding值
  • 给父元素overfiow:hidden;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
        
            .father {
                width: 600px;
                height: 600px;
                background-color: pink;
                /* border-top: 1px solid transparent; */
                /* padding-top:1px ; */
                overflow: hidden;
            }

            .son {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
               margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>

    </body>
</html>

在这里插入图片描述

盒子布局稳定性

在这里插入图片描述

ps

ps的基本使用

  • ctrl+o:打开文件
  • ctrl+r :打开标尺
  • ctrl+ + ：放大
  • ctrl+ - ： 缩小
  • 按住空格 可以移动视图
  • 吸管工具：吸取颜色
  • 选框工具：测量宽高
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            width: 340px;
            height: 220px;
            margin: 100px auto;
            padding: 0px 15px;
            background: url(./image/line.jpg);
        }
        
        .nav h2 {
            font-size: 16px;
            padding-top: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #cccc
        }
        
        ul li {
            list-style: none;
            line-height: 30px;
            padding-left: 20px;
            background: url(./image/arr.jpg) no-repeat scroll left center;
        }
        
        ul li a {
            color: #4b4b4b;
            font: normal normal 14px '楷体';
            text-decoration: none;
        }
        
        ul li a:hover {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="nav">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘平面设计 网页设计 php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery的世界即将来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程</a></li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

圆角边框

设置圆形

  border-radius:50%;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: pink;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

在这里插入图片描述

设置矩形

border-radius:高度的一半

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius之设置矩形</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 100px;
            margin: 200px auto;
            border-radius: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

在这里插入图片描述

border-radius的简写

border-radius:左上角  右上角 右下角  左下角


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius之简写</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div:nth-of-type(1) {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            border-radius: 50%;
            background-color: red;
        }
        
        div:nth-of-type(2) {
            width: 200px;
            height: 100px;
            background-color: blue;
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

在这里插入图片描述

盒子阴影

box-shadow:盒子阴影

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-show</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            box-shadow: 20px 20px 2px 20px blue inset;
            background-color: red;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

在这里插入图片描述

css书写规范

  • 选择器与{}之间保留空格 属性与属性值之间保留空格
  • 嵌套元素不应该超过三级
  • 属性值应以分号结束
「已注销」
关注
专栏目录
【CSS】实现盒子居中对齐的七种方法
YK菌的博客
05-12 5467
文章目录让盒子垂直居中 让盒子垂直居中 有一个盒子 div { width: 200px; height: 200px; background-color: pink; } 让盒子水平居中比较简单加上 margin: 0 auto; 即可 上面有缝隙，清除一下祖先元素的默认样式 html, body { margin: 0; padding: 0; } 让盒子垂直居中 ...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
CSS盒子居中的6种方法!
bukuaileya的博客
11-15 2万+
1.flex布局设置居中常见的一种方式就是使用flex布局设置居中。利用弹性布局(flex)，实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式写在父元素上这就是定义了一个伸缩容器主轴对齐方式，默认是横轴纵轴对齐方式，默认是纵轴优点： 简单、方便、快速，三行代码搞定。
css居中对齐的几种方式
袁成新（Chauncey Yuan）
10-13 821
第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
web前端开发人员要求，html标签之表格标签，面试必问
m0_56169789的博客
03-18 293
什么是HTML? HTML: ( Hypertext Markup Language )超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 特点: 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便; 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证; 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人
css-动态计算盒子宽度
qq_39111074的博客
08-25 2953
css-计算盒子宽度calc函数 css属性：width: calc() 可以计算盒子的宽度，calc()括号里面可以进行- - -加 减 乘 除 运算 + - * / 1.可以写数值跟数值之间的运算，如：calc(100px + 50px) 2.可以写父盒子的百分比 和 数值 之前的运算，如：calc(100% -50px) 常用方式2，动态计算子盒子宽度，总是比父盒子少多少宽度 代码示例 <!DOCTYPE html> <html lang="en"> <head&gt
css盒子模型
2301_80840100的博客
06-22 3369
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS盒子模型
weixin_64294248的博客
07-27 1054
盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)。我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。
CSS盒子模型详解
热门推荐
weixin_46048542的博客
04-05 4万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三
深入理解 CSS 盒子模型
My_wife_QBL的博客
07-08 841
CSS 盒子模型是网页布局的核心概念，理解盒子模型的各个组成部分及其计算方式，对于进行精确的网页布局至关重要。通过设置widthheightpaddingborder和margin属性，可以控制元素的尺寸和位置。使用box-sizing属性可以选择不同的盒子模型，简化布局计算。在实际开发中，可能会遇到一些常见问题，如外边距重叠、盒子模型的兼容性问题和元素尺寸超出预期。通过合理使用 CSS 属性和技巧，可以有效解决这些问题，创建出美观、高效的网页布局。
理解CSS盒子模型及其应用
WXLink的博客
09-10 2216
在CSS中，盒子模型可以被理解为每一个HTML元素都被看作一个方形的盒子。内容区（Content）：盒子的实际内容区域，可以是文字、图片或其他任何HTML元素。内边距（Padding）：内容区与边框之间的空间。内边距是透明的，会影响到盒子的整体大小。边框（Border）：围绕内容区和内边距的可视边界。边框的宽度和样式可以根据设计需求来调整。外边距（Margin）：边框外部的空间，用于盒子与其他盒子之间的距离。理解CSS盒子模型是成为前端开发者的基石之一。
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
名词（术语）了解--CSSOM (CSS Object Model)
weixin_40539956的博客
10-29 553
/ 1. 定义全局 CSS 变量// 2. 读取 CSS 变量// 3. 动态主题实现light: {},dark: {});
【前端基础】CSS进阶
qq_41413652的博客
11-01 444
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1898
【代码】炫酷的登录框!(附源码)
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 287
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS_定位_网页布局总结_元素的显示与隐藏
2301_80636070的博客
10-27 984
目录目标1. 定位1.1 为什么需要定位1.2 定位组成1. 定位模式2. 边偏移1.3 静态定位 static（了解）1.4 相对定位 relative（重要）1.5 绝对定位 absolute（重要）1.6 子绝父相的由来（重要）1.7 固定定位 fixed （重要）1.8 粘性定位 sticky（了解）1.9 定位的总结1.10 定位叠放次序 z-index1.11 定位的拓展1. 绝对定位的盒子居中2. 定位特殊特性3. 脱标的盒子不会触发外边距塌陷4. 绝对定位（固定定位）会完全压住盒子2. 综合
理解CSS盒子模型：维度、填充与边距
"理解CSS盒子模型对于前端开发至关重要。盒子模型定义了网页元素的布局方式，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。它决定了元素的实际占据空间，从而影响网页的整体布局。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值