20、CSS基础——盒模型的应用

已于 2022-08-02 16:19:33 修改
阅读量315 收藏
点赞数 1
分类专栏： web前端学习笔记（HTML+CSS篇） 文章标签： css html html5
于 2021-10-13 16:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvh98/article/details/120730382
版权

盒模型应用

文章目录

1. 改变宽高范围（box-sizing）

默认情况下，width 和 height 设置的是内容盒宽高

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

<!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>Document</title>
    <style>
        div{
            width: 236px;
            height: 51px;
            /*width和height设置的是内容盒的宽高*/
            color: #a7a7a7;
            background-color: #2d2e36;
            line-height: 51px; 
            /*文本的高度设为容器的高度，可以使单行文本水平居中*/  
        }
    </style>
</head>
<body>
    <div>
        页游中心
    </div>
</body>
</html>

显示效果：

内容盒
此时检查网页，选中div元素，可见盒模型的宽高即设定的数值（236px*51px），此时显示的效果是我们期望看到的效果。
检查

但是若再加填充以及边框，例如

加填充（内边距）：

<!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>Document</title>
    <style>
        div{
            width: 236px;
            height: 51px;
            /*width和height设置的是内容盒的宽高*/
            color: #a7a7a7;
            background-color: #2d2e36;
            line-height: 51px; 
            /*文本的高度设为容器的高度，可以使单行文本水平居中*/
            padding-left: 46px;
            /*左内边距为46个像素*/ 
        }
    </style>
</head>
<body>
    <div>
        页游中心
    </div>
</body>
</html>

效果：
加左内边距
可以看到盒模型宽236+46=282px，高51px，此时显示的是填充盒，而内容盒的宽高并没有改变。

再加边框：

<!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>Document</title>
    <style>
        div{
            width: 236px;
            height: 51px;
            /*width和height设置的是内容盒的宽高*/
            color: #a7a7a7;
            background-color: #2d2e36;
            line-height: 51px; 
            /*文本的高度设为容器的高度，可以使单行文本水平居中*/
            padding-left: 46px;
            /*左内边距为46个像素*/ 
            border: 3px solid rgb(30, 181, 252);
            /* 边框为上下左右宽度均为3px的淡蓝色实线 */
        }
    </style>
</head>
<body>
    <div>
        页游中心
    </div>
</body>
</html>

效果：
加入边框
边框盒
此时显示的是边框盒，宽为236+46+3+3=288px，高为51+3+3=57px。

而真正做项目的时候，我们希望显示出来的盒模型的宽高能够直接通过设置参数来确定，单单设定内容盒的宽高在很多时候是非常不方便的。

解决办法：

  1. 精确计算

层层计算，设计正确的内容盒宽高来满足整个盒模型的宽高。

  1. CSS3：box-sizing
<!-- 改变宽高的影响范围 -->
box-sizing: border-box;
<!-- 将宽高属性在边框盒生效 -->

利用box-sizing 可以直接规定相应盒的宽高，例如

<!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>Document</title>
    <style>
        div{
            width: 236px;
            height: 51px;
            /*width和height默认设置的是内容盒的宽高*/
            color: #a7a7a7;
            background-color: #2d2e36;
            line-height: 51px; 
            /*文本的高度设为容器的高度，可以使单行文本水平居中*/
            padding-left: 46px;
            /*左内边距为46个像素*/ 
            border: 3px solid rgb(30, 181, 252);
            /* 边框为上下左右宽度均为3px的淡蓝色实线 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        页游中心
    </div>
</body>
</html>

效果：
盒模型
可以看到此时的盒模型（显示出来的是边框盒）的宽高就是我们想要的236*51px。

其实此时文本不是垂直居中的，因为文本的容器是内容盒，而此时的内容盒的高不再是51px。可以计算一下此时内容盒的高度是51-3*2=45px，所以将line-height改为45px即可使文本再次垂直居中。
垂直居中

2. 改变背景覆盖范围（background-clip）

默认情况下，背景覆盖边框盒。

例如：

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 150px;
            background-color: #008c8c;
            border: 10px dashed #f40;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur.
    </div>
</body>
</html>

显示效果：
在这里插入图片描述

可以看到马尔斯绿的背景颜色覆盖了内容盒、填充和边框区域，验证了前面说的，背景颜色覆盖边框盒。

这种效果可以通过background-clip进行修改。

例如添加样式background-clip: content-box;，效果如下：
在这里插入图片描述
添加样式background-clip: padding-box;，效果如下：
在这里插入图片描述

3. 溢出处理（overflow）

有时盒子的内容会超出盒子的范围，造成溢出。不设定盒子宽高一般不会发生溢出，盒子的宽高会根据内容多少自动进行调节。

例如：

<!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>Document</title>
    <style>
        div{
            border: 3px solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias tempore suscipit expedita esse ea hic necessitatibus consequuntur veniam nemo. Illo iure expedita quidem consectetur accusantium nobis molestias porro aspernatur.
    </div>
</body>
</html>

生成网页：
无限制
此时，盒宽高根据内容多少自动调节，没有发生溢出。

接下来，如果我们给出的盒宽高不足以容纳这么多内容，则会发生溢出。

<!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>Document</title>
    <style>
        div{
            border: 3px solid;
            padding: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias tempore suscipit expedita esse ea hic necessitatibus consequuntur veniam nemo. Illo iure expedita quidem consectetur accusantium nobis molestias porro aspernatur.
    </div>
</body>
</html>

效果：
溢出
overflow，控制内容溢出边框盒后的处理方式

默认情况下，溢出的内容是显现出来能够看到的，此时overflow的默认值是visible，即overflow: visible;。

overflow的其他取值：

  • hidden：溢出部分隐藏
    当样式overflow: hidden;，效果如下：
    溢出隐藏
  • scroll：生成滚动条
    当样式overflow: scroll;，效果如下：
    滚动条
  • auto：需要滚动条时出现滚动条，不需要时隐藏滚动条
    当样式overflow: auto;，效果如下：
    auto
    可以看到，横向不需要滚动条，则界面中没有横向滚动条出现；而纵向需要滚动条，界面中则出现了纵向滚动条。

overflow是个速写属性，可以通过设置overflow-x和overflow-y来分别设置横向纵向的溢出处理方式。

4. 断词规则(word-break)

word-break，会影响文字在什么位置被截断换行

取值：

  • normal（默认）：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）

CJK字符：中日韩统一表意文字

例如：（div元素里的文本都是用乱数假文生成的，英文lorem，中文jw，关于乱数假文在笔记4（文本元素）中介绍过）

<!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>Document</title>
    <style>
        div{
            padding: 30px;
            border: 10px solid;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>非CJK字符</p>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
    </div>
    <p>CJK字符</p>
    <div>
        老马畴学才张临韩主不，诗逃叹，陀俭了后俭九承到冷他行流次是了资你，量让极间前们他，弄变但尝，什以此原可一如接，得一觉手盲中回才里文穿量友，订疾救担对仍病入子才切落世命，助光马责，落迷爱竟人同出车哥宫洪出过尚，样承釜夭领也帝我生打友勉说肯非头一，以负哉找韩。
    </div>
</body>
</html>

默认效果：
nomal

可以看到，一行的最后一个单词如果将要溢出内容盒，那么这个单词会放到下一行。

  • break-all：截断所有。所有字符都在文字处截断。

现在在上面的程序中将word-break设置为break-all：

<!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>Document</title>
    <style>
        div{
            padding: 30px;
            border: 10px solid;
            width: 400px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <p>非CJK字符</p>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
    </div>
    <p>CJK字符</p>
    <div>
        老马畴学才张临韩主不，诗逃叹，陀俭了后俭九承到冷他行流次是了资你，量让极间前们他，弄变但尝，什以此原可一如接，得一觉手盲中回才里文穿量友，订疾救担对仍病入子才切落世命，助光马责，落迷爱竟人同出车哥宫洪出过尚，样承釜夭领也帝我生打友勉说肯非头一，以负哉找韩。
    </div>
</body>
</html>

效果如下：
break-all
可以看出，在内容盒宽度达到上限后，一个完整的英文单词会被截断，CJK字符则没有效果。

  • keep-all：保持所有。所有文字都在单词之间截断。这个规则对于英文或者说非CJK字符相当于默认情况（nomal），因为在默认情况下，非CJK字符的完整单词也不会被截断。而CJK字符不是一个字一个单词，而是看字间有无分隔符（空格，逗号等）。
<!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>Document</title>
    <style>
        div{
            padding: 30px;
            border: 10px solid;
            width: 400px;
            word-break: keep-all;
        }
    </style>
</head>
<body>
    <p>非CJK字符</p>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
    </div>
    <p>CJK字符</p>
    <div>
        老马畴学才张临韩主不，诗逃叹，陀俭了 后俭九承到冷他行流次是了资你，量让极间前们他，弄变但尝，什以此原可一如接，得一觉手盲中回才里文穿量友，订疾救担对仍病入子才切落世命，助光马责，落迷爱竟人同出车哥宫洪出过尚，样承釜夭领也帝我生打友勉说肯非头一，以负哉找韩。
    </div>
</body>
</html>

这里将word-break设置为keep-all，并在中文的乱数假文“陀俭了”后面加了一个空格。

效果如下：
keep-all
中文的乱数假文中，两个分隔符之间的文字视为一个单词，例如“诗逃叹”、“陀俭了”、“后俭九承到冷他行流次是了资你”等。

现实应用中，一般不用修改默认的word-break，因为默认格式是最符合排版逻辑的。

5. 空白处理

<!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>Document</title>
    <style>
        li{
            /* 下边框：虚线、粗2像素、灰色 */
            border-bottom: dashed 2px #ccc;
            /* 行高为2 */
            line-height: 2;
            /* 左边框：实线、粗3像素、马尔斯绿 */
            border-left: solid 3px #008c8c;
            /* 左内边距：10像素 */
            padding-left: 10px;
            /* 盒子之间上下1个字体大小、左右为0 */
            margin: 1em 0;
            /* 设置内容盒宽度 */
            width: 400px;
        }
    </style>
</head>
<body>
    <div>
        <!-- ul>li*10>lorem5 -->
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Nam esse iure ullam rerum.</li>
            <li>Officiis veritatis cupiditate maiores aspernatur.</li>
            <li>Dolor veniam quisquam magni nemo.</li>
            <li>Laboriosam aliquam velit nostrum voluptatum?</li>
            <li>Odit sequi voluptatibus voluptatum a!</li>
            <li>Velit id fugit eveniet qui!</li>
            <li>Ullam, magnam rerum. Tempora, officiis!</li>
            <li>Architecto, est. Blanditiis, est nulla!</li>
            <li>Dolores delectus consectetur laborum accusantium.</li>
        </ul>
    </div>
</body>
</html>

现在有一个程序，显示效果如下：
原效果
但是如果内容盒的宽度比字符串长度小，字符串就会换行。我们把上面程序的width改为200px，则画面就会变为：

换行

现在我们希望文字不换行（white-space: nowrap; ），且隐藏溢出部分（overflow: hidden; ），单词显示不完的部分用“…”代替（text-overflow: ellipsis; ）。

<!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>Document</title>
    <style>
        li{
            /* 下边框：虚线、粗2像素、灰色 */
            border-bottom: dashed 2px #ccc;
            /* 行高为2 */
            line-height: 2;
            /* 左边框：实线、粗3像素、马尔斯绿 */
            border-left: solid 3px #008c8c;
            /* 左内边距：10像素 */
            padding-left: 10px;
            /* 盒子之间上下1个字体大小、左右为0 */
            margin: 1em 0;
            /* 设置内容盒宽度 */
            width: 200px;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 溢出部分用“...”代替 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        <!-- ul>li*10>lorem5 -->
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Nam esse iure ullam rerum.</li>
            <li>Officiis veritatis cupiditate maiores aspernatur.</li>
            <li>Dolor veniam quisquam magni nemo.</li>
            <li>Laboriosam aliquam velit nostrum voluptatum?</li>
            <li>Odit sequi voluptatibus voluptatum a!</li>
            <li>Velit id fugit eveniet qui!</li>
            <li>Ullam, magnam rerum. Tempora, officiis!</li>
            <li>Architecto, est. Blanditiis, est nulla!</li>
            <li>Dolores delectus consectetur laborum accusantium.</li>
        </ul>
    </div>
</body>
</html>

效果如下：

空白处理

想要实现上面的效果，记住这三条：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

但是这种方法只能用于单行文本，多行文本想实现这种效果得用到JS。

对于空白处理white-space，默认值是nomal，此时会发生空白折叠（空白折叠在笔记4文本元素的pre元素中介绍过）。
之前介绍空白折叠时，知道pre元素中不会发生空白折叠。因为pre元素的样式中white-space默认为pre。若想在pre元素以外的地方消除空白折叠，就在相应的样式表中设置：white-space: pre;
前面的white-space设为了nowrap也会发生空白折叠，只不过有了不换行的特点。

对于css属性white-space，目前学到了三个取值

  • nomal，默认值
  • pre，消除空白折叠
  • nowrap，文字不换行
lvh98
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS常用样式——盒模型及其扩展应用
weixin_71617136的博客
08-25 187
CSS常用样式——盒模型：宽度（width）、高度（hegiht）、内边距（padding）、边框（border）、外边距（margin）及其扩展应用：清除默认样式、height应用、居中、margin塌陷现象
Css盒模型的应用
MrGuo_的博客
02-22 308
       我是一名在疫情期间逆战班坚持学习的学员，在这里我想跟大家分享一下关于css盒模型的应用。        什么是盒模型？顾名思义，就像是一个用来存放东西的盒子，其中放的东西称之为元素。在网页中盒模型规定元素是如何显示的，并且规定了元素之间的关系。在...
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
CSS：盒模型
雷爷的博客
09-01 139
盒模型 box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型： 行盒，display等于inline的元素 块盒，display等于block的元素 行盒在页面中不换行、块盒独占一行 display默认值为inline 浏览器默认样式表设置的块盒：容器元素、h1~h6、p 常见的行盒：span、a、img、video、audio 盒子的组成部分 无论是行盒、还是块盒，都由下面几...
动态调用css文件——jquery的应用
10-31
标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...
下一代Web应用模型——ProgressiveWebApp
02-25
导读：2016年，Google提出了PWA，志在增强Web体验。可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息……等等这些特性可使Web应用渐进...Babel、PostCSS这样的转译工具；TypeScript、Elm这样转
CSS——border基础知识.docx
02-27
通过结合其他CSS属性，如盒模型、背景色和过渡效果，可以实现更复杂的布局和动态效果。 总之，理解并熟练掌握CSS边框的使用对于创建美观、响应式的网页至关重要。通过灵活运用边框样式、宽度和颜色，开发者可以精确...
自适应css布局——流动布局新时代
08-18
流动布局的实现涉及到对CSS布局规则的深入理解和灵活运用，包括盒模型、媒体查询、flexbox或grid布局等技术。例如，媒体查询允许我们在不同屏幕尺寸下应用不同的CSS规则，确保在小屏幕设备上也能实现良好的用户体验...
CSS——盒模型应用
终成大师的博客
03-13 118
盒模型的应用 改变宽和高范围 默认情况下，width和height设置的是内容盒宽高 矛盾：衡量设计稿的时候往往使用的是边框盒，但设置weight和height，则设置的是内容盒 方法： 精确计算 CSS3属性：box-sizing 改变背景覆盖范围 默认情况下，背景覆盖边框盒 可以通过background-clip进行修改 background-clip:content-box(只覆盖内容区...
盒子模型应用
kxindouhao5491的博客
08-24 1174
什么是盒子模型？   边框 border-color border-width border-style   border-color: 属性 说明 示例 border-top-color  上边框颜色 border-top-color:#369;  ...
CSS盒子模型-盒子模型应用
Leemin_ios的博客
08-12 621
.html 盒子模型应用 .css /*通配符，把所有的内边距，外边距调为0*/ *{ margin: 0
CSS基础（8）- 盒模型应用
m0_43416592的博客
08-19 148
本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。
CSS盒子的运用
LYC010727的博客
11-26 206
CSS盒子的运用
第012讲 盒子模型经典应用
enlyhua的专栏
06-28 658
1. 盒子模型 ul 中 li 默认有距离： .faceul{ width:300px; height:250px; border:1px solid red; padding-left:0px; //清边距 }<html> <head> <link rel="stylesheet" type="text/css" href="aa.css"> </head
css基础知识：
qq_41302958的博客
09-27 1804
文章目录CSS 基础使用一、CSS介绍二、CSS使用方式1. 行内样式/内联样式2. 内嵌样式3. 外链样式表三、样式表特征1. 层叠性2. 继承性3. 样式表的优先级四、CSS 选择器1. 作用2. 分类 :1. 标签选择器2. id选择器3. class选择器/类选择器4. 群组选择器5. 后代选择器6. 子代选择器7. 伪类选择器3. 选择器的优先级五、标签分类及嵌套1. 块元素2. 行内元素3. 行内块元素4. 嵌套原则六、尺寸单位七、颜色单位八、背景属性1. 背景颜色2. 背景图片相关1） 设置背
css中盒子模型的使用方法
weixin_49474155的博客
07-30 309
案例 1.边框 属性:nth-of-type()：选择每个 <p> 元素是其父级的第二个 <p> 元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .a{ border: 1px solid #3C3C3C; width: 300px; ..
HTML基础笔记之CSS盒子模型1（布局）
bruce_suxin的博客
10-26 620
盒子模型 HTML示例 div{ width:200px; height:100px; border:2px solid blue;/*t统一设置*/ } #div2{ border-right:2px dashed red; }
css盒子模型 - 初识CSS必会的盒子模型，非常详细的讲解，望帮助到初学者。
focuspoints' blog
10-20 989
初学CSS必须要会的盒子模型：首先，我先给你们介绍一下与盒子模型有关的CSS属性。1.margin： 该属性为外边框，包含四个值：margin-top、margin-right、margin-bottom、margin-left. 分别为上、右、下、左外边框。（要记住这个上右下左的顺序，其他属性也会用到。） margin是可以直接写一个值(即上右下左四个边框都为40px)，例如
css盒子模型的简单介绍
qq_41254149的博客
03-03 1261
一、什么是盒子模型？ 盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是 HTML元素的内容。或者说这个盒子模型就是用来做页面布局的，其实就是我们做布局的一个思想，我们称它是盒模型 二、盒子模型的组成部分 内容区 content + 填充补白（里面的） + padding（内边距） + margin（外边距）+border（边框） 三、盒子模型的相关元素 1、margin的使用...
CSS从入门到精通——盒模型
最新发布
09-11
CSS（层叠样式表）是一种用于描述网页上元素样式的语言。在CSS中，盒模型是一个...了解盒模型的概念对于理解和掌握CSS布局和样式非常重要。可以通过设置元素的宽度、高度、内边距、边框和外边距来实现不同的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值