CSS(三)---【盒子模型、边框、外边距合并】

零.前言

本篇主要介绍CSS中最重要的一种概念模型：“盒子模型”。

关于CSS的更多内容，可以查看作者之前的文章：

CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客

CSS(二)---【常见属性、复合属性使用】-CSDN博客

一.盒子模型

1.1基本介绍

在CSS中，所有的标签都被认为是一个盒子，这个盒子有内容、盒子中的空隙、盒子的厚度、盒子外的距离。

对应于CSS术语就是：“内容(content)”、“内边距(padding)”、“边框大小(bord)”、“外边距(margin)”。

如下图所示：

通过盒子模型，我们可以更精确的控制标签。

所以使用CSS来进行页面布局，可以认为就是将盒子摆在合适的位置。

不过值得注意的是，盒子模型只是人为抽象出来的概念，实际在CSS、HTML中并不存在盒子模型，但对于上述四个属性却是实际存在的。

1.2CONTENT

content不用多说，就是标签的内容，根据自己的业务需要编辑即可。

1.3PADDING（内边距）

padding用于设置content(内容)与边框的间距。

padding是一个复合属性，下有四个子属性：

  1. padding-top:上边子属性
  2. padding-right:右边子属性
  3. padding-bottom:下边子属性
  4. padding-left:左边子属性

注意到盒子模型是一个矩形，这说明盒子模型是有四条边的，对应着：“top(上边)、right(右边)、bottom(下边)、left(左边)”。

为此我们可以同时修改四个方向的内边距，也可以只修改某一个方向的内边距，具体根据业务逻辑实现就好。

注意：

在使用padding复合属性一次性设置单个或小于四个方向的属性时，四个方向的属性顺序默认是：“top -> right -> bottom -> left，即顺时针方向转动一圈”。

在这里，我们给定一个配对原则：“上下为一对”、“左右为一对”。

当我们只给定左边距没有给定右边距，那么右边距的值就找左边距的值。

当我们只给定上边距没有给定下边距，那么下边距的值就找上边距的值。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;padding: 25px 50px 75px;background-color: lightblue;
}
</style>
</head>
<body><h1>简写的内边距属性 - 3 个值</h1><div>这个 div 元素的上内边距是 25px，左右内边距是 50px，下内边距是 75px。</div></body>
</html>

效果：

例如:：

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h1>使用单独的内边距属性</h1><div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div></body>
</html>

效果：

1.4BORDER(边框)

由于border边框的内容很多，我们在第二部分讲解。

1.5MARGIN(外边距)

margin主要用来给标签周围创建空间，默认是四个方向(上下左右)同时预留出一部分空白空间。

margin是一个复合属性

margin有四个子属性：

  1. “margin-top”：顶部外边距
  2. “margin-right”：右部外边距
  3. “margin-bottom”：底部外边距
  4. “margin-left”：右部外边距

注意：

当使用margin复合属性来一次性设置四个方向的外边距的时候，遵循的方向是：“上右下左（顺时针绕动一圈）”。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
</style>
</head>
<body><h1>使用单独的外边距属性</h1><div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div></body>
</html>

 效果：

例如：

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin: 25px 50px;background-color: lightblue;
}
</style>
</head>
<body><h1>简写属性 margin - 2 个值</h1><div>div 元素的上下外边距是 25 像素，左右外边距是 50 像素。</div><hr></body>
</html>

效果：

二.border【边框】

2.1border-style【边框样式】

border-style用来指定边框的形状，比如：“实线”、“虚线”、“点线”等等。

它的值可以取为：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

注意：隐藏边框也是存在的，只是我们看不到（隐身了）。

同时，我们也可以指定四条边不同的样式形状，遵循“上下、左右配对原则和顺时针顺序”

例如：

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body><h1>border-style 属性</h1><p>此属性规定要显示的边框类型：</p><p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p></body>
</html>

效果：

2.2border-width【边框宽度(厚度)】

border-width用来设置边框的宽度，单位可以是：“px(像素)”、“英文单词(thin、medium、thick等)”。

border-width也可以同时指定四条边的宽度不同，遵循：“配对原则和顺时针原则”。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid;border-width: 5px 20px; /* 上、下边框 5 像素，左、右边框 20 像素 */
}p.two {border-style: solid;border-width: 20px 5px; /* 上、下边框 20 像素，左、右边框 5 像素 */
}p.three {border-style: solid;border-width: 25px 10px 4px 35px; /* 上 25 像素、右 10 像素、下 4 像素、左 35 像素 */
}
</style>
</head>
<body><h1>border-width 属性</h1><p>border-width 属性可接受一到四个值（依次对应上、右、下、左边框）：</p><p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p></body>
</html>

效果：

2.3border-color【边框颜色】

border-color用来设置边框的颜色，属性值可以是：“英文单词（yellow、blue等）”、“RGB值”、“十六进制值”、“HSL值”。

border-color也可以同时设置四条边不同的颜色，遵循：“配对原则、顺时针原则”。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid;border-color: red;
}p.two {border-style: solid;border-color: green;
} p.three {border-style: dotted;border-color: blue;
} p.four {border-style: dotted;border-color: red green blue yellow;
} 
</style>
</head>
<body><h1>border-color 属性</h1><p>此属性规定四条边框的颜色：</p><p class="one">红色实线边框</p>
<p class="two">绿色实线边框</p>
<p class="three">蓝色点状边框</p>
<p class="four">四种颜色点状边框</p><p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p></body>
</html>

效果：

2.4border【复合属性】

border复合属性允许我们一次写出“单独的某条边”、“所有的边”的所有属性。

但不允许我们一次写出两条、三条边的所有属性，这是不被认可的。

border属性有三个子属性：

  • border-width
  • border-style（必需）
  • border-color

如果我们想要一次性写出所有边的属性为：“宽度5px、实线、蓝色”，则可以这样写：

<!DOCTYPE html>
<html>
<head>
<style>
p {border: 5px solid blue;
}
</style>
</head>
<body><h1>border 属性</h1><p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p></body>
</html>

效果：

如果我们只想给上边一个：“宽度5px、点线、蓝色”，那么可以这样写：

<!DOCTYPE html>
<html>
<head>
<style>
p {border-top: 5px solid blue;
}
</style>
</head>
<body><h1>border 属性</h1><p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p></body>
</html>

效果：

注意，在我们想要编辑上面某条边的时候，我们没有用到border复合属性，因为border复合属性默认操作的是所有的边，我们只要操作一条边，所以要使用border的子属性“border-top”表示上边。

那如果我想要给上边使用：“宽度5px、实线、蓝色”，下边使用：“宽度5px、点线、蓝色”，可能有些读者会这样写：

//错误用法
<style>
p {border: 5px solid dotted blue;    //这样是错误的,因为border默认操作所有边,同时赋予solid和dotted两种边框样式会让程序出错无法正常显示
}
</style>
//正确用法
p {border-top: 5px solid blue;   border-right: 5px dotted blue;
}
</style>

2.5border-radius【圆角边框】

使用border-radius可以使我们的边框变得更圆滑，而不是方方正正的。

border-radius的属性值是一个数值长度，单位是：“px(像素)”

数值越大，边框越圆。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {border: 2px solid red;
}p.round1 {border: 2px solid red;border-radius: 5px;
}p.round2 {border: 2px solid red;border-radius: 8px;
}p.round3 {border: 2px solid red;border-radius: 12px;
}
</style>
</head>
<body><h1>border-radius 属性</h1><p>此属性用于为元素添加圆角：</p><p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p></body>
</html>

效果：

三.外边距合并【重要】

外边距合并的意思是：

“当两个垂直外边距相遇时，它们将合并成一个外边距，合并后的外边距的高度等于合并前两者的最大值”。

例如：

3.1两个垂直方向上的盒子相遇：

3.2一个盒子包含另一个盒子时：

当一个盒子包含一个盒子，并且外部盒子没有设置内边距就会发生合并：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;margin-top:20px;
}#inner {width:50px;height:50px;background-color:blue;margin-top:10px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div><p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>

效果：

但当外部盒子设置了内边距，就不会发生合并了。

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;margin-top:20px;padding: 10px;
}#inner {width:50px;height:50px;background-color:blue;margin-top:30px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div><p>注释：设置 div内边距和边框，那么内部div的上边距将不会发生合并，并且此时内部div的上边距实际上是div上边距加外部div的内边距的和</p>
</body>
</html>

效果:

3.3外边距自我合并

一个标签的外边距甚至可以发生自我合并，这取决与标签是否设置了边框，如果没有设置边框，那么外边距就会自我合并。 

3.4注意

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/779777.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

WebCopilot：一款功能强大的子域名枚举和安全漏洞扫描工具

WebCopilot：一款功能强大的子域名枚举和安全漏洞扫描工具

关于WebCopilot WebCopilot是一款功能强大的子域名枚举和安全漏洞扫描工具&#xff0c;该工具能够枚举目标域名下的子域名&#xff0c;并使用不同的开源工具检测目标存在的安全漏洞。 工具运行机制 WebCopilot首先会使用assetsfinder、submaster、subfinder、accumt、finddom…
阅读更多...
Jamba：AI21 实验室发布首个应用级的 Mamba 架构 AI 模型

Jamba：AI21 实验室发布首个应用级的 Mamba 架构 AI 模型

AI21 实验室发布了 Jamba&#xff0c;这是全球首个基于 Mamba 架构的、可用于实际应用的 AI 模型。目前大多数模型&#xff08;例如 GPT、Gemini 和 Llama&#xff09;都基于 Transformer 架构。Jamba 结合了 Mamba 结构化状态空间模型 (SSM) 和传统 Transformer 架构的优点&am…
阅读更多...
属性选择器

属性选择器

1.[title]{background:yellow;}&#xff1a;所有带title标签设置成黄色 2.div[class]{background:yellow;}&#xff1a;所有div中带class标签设置成黄色 3.div[classbox1]{border:1px solid blue; }&#xff1a;div中包含class并且classbox1的设置成蓝边框 4. class…
阅读更多...
Postman Tests设置Global读取不是最新值，跟Tests执行顺序有关（踩坑笔记）

Postman Tests设置Global读取不是最新值，跟Tests执行顺序有关（踩坑笔记）

前言 在执行Run Collection的时候&#xff0c;发现设置的全局变量每次读取都是旧值&#xff0c;没有读取到最新的值。 背景 有2个地方需要动态参数&#xff0c;一个URL&#xff0c;一个Body&#xff0c;因此需要设置Tests脚本。 url动态参数 url&#xff1a;动态参数projec…
阅读更多...
【Java】打包：JAR、EAR、WAR

【Java】打包：JAR、EAR、WAR

打包&#xff1a;JAR、EAR、WAR war 是一个 Web 模块&#xff0c;其中需要包括 WEB-INF&#xff0c;是可以直接运行的 WEB 模块。而 jar 一般只是包括一些 class 文件&#xff0c;在声明了 main_class 之后是可以用 java 命令运行的。 它们都是压缩的包&#xff0c;拿 Tomcat …
阅读更多...
【基于springboot分析Quartz（v2.3.2）的启动流程】

【基于springboot分析Quartz（v2.3.2）的启动流程】

基于springboot分析Quartz&#xff08;v2.3.2&#xff09;的启动流程 最近公司的定时任务使用了Quartz框架&#xff0c;在开发中经常出现定任务不执行了的问题&#xff0c;但是我又找不到原因所在&#xff0c;可把我愁坏了。于是我决定看看Quartz框架是怎么调度任务的。&#x…
阅读更多...
C# wpf 实现底部嵌入HwndHost

C# wpf 实现底部嵌入HwndHost

WPF Hwnd窗口互操作系列 第一章 嵌入Hwnd窗口 第二章 嵌入WinForm控件 第三章 嵌入WPF控件 第四章 底部嵌入HwndHost&#xff08;本章&#xff09; 文章目录 WPF Hwnd窗口互操作系列前言一、如何实现&#xff1f;1、底部创建窗口&#xff08;1&#xff09;、创建透明窗口&…
阅读更多...
FebHost：什么是哈萨克斯坦.KZ域名？

FebHost：什么是哈萨克斯坦.KZ域名？

哈萨克斯坦&#xff0c;作为中亚地区重要的一员,其国家域名”.kz”正成为这个独立国家在网络世界中的代表。作为一个经济快速发展的国家,哈萨克斯坦的互联网基础设施和网络应用也在蓬勃发展。而.kz域名正是哈萨克斯坦网络身份的重要体现。 作为注册和管理.kz域名的主要机构,哈…
阅读更多...
2020年30米二级分类北京市土地利用数据

2020年30米二级分类北京市土地利用数据

引言 北京市省土地利用数据产品是指基于Landsat TM/ETM/OLI遥感影像&#xff0c;采用遥感信息提取方法&#xff0c;并结合野外实测&#xff0c;以及参照国内外现有的土地利用/土地覆盖分类体系&#xff0c;经过波段选择及融合&#xff0c;图像几何校正及配准并对图像进行增强处…
阅读更多...
Elasticsearch 开放 inference API 增加了对 Cohere Embeddings 的支持

Elasticsearch 开放 inference API 增加了对 Cohere Embeddings 的支持

作者&#xff1a;来自 Elastic Serena Chou, Jonathan Buttner, Dave Kyle 我们很高兴地宣布 Elasticsearch 现在支持 Cohere 嵌入&#xff01; 发布此功能是与 Cohere 团队合作的一次伟大旅程&#xff0c;未来还会有更多合作。 Cohere 是生成式 AI 领域令人兴奋的创新者&…
阅读更多...
SpringBoot+Prometheus+Grafana实现应用监控和报警

SpringBoot+Prometheus+Grafana实现应用监控和报警

一、背景 SpringBoot的应用监控方案比较多&#xff0c;SpringBootPrometheusGrafana是目前比较常用的方案之一。它们三者之间的关系大概如下图&#xff1a; 关系图 二、开发SpringBoot应用 首先&#xff0c;创建一个SpringBoot项目&#xff0c;pom文件如下&#xff1a; <…
阅读更多...
蓝桥杯嵌入式老竞赛板在MDK5上使用CooCox下载出现unknown device的问题

蓝桥杯嵌入式老竞赛板在MDK5上使用CooCox下载出现unknown device的问题

本文是在参考网上博客并经过实操解决自己遇到的问题总结而成&#xff0c;只是为了让后来者少走弯路。 本文是在在LED闪烁实验时遇到这个问题 蓝桥杯嵌入式老竞赛板在MDK5上使用CooCox下载出现unknown device的问题 环境&#xff1a;win11系统&#xff0c;keil MDK 518 老竞赛…
阅读更多...
【Unity】TextMeshPro富文本

【Unity】TextMeshPro富文本

启用富文本 在Unity里&#xff0c;如果需要使用富文本&#xff0c;首先需要开启Rich Text 如果不开启Rich Text&#xff0c;就会在UI上显示富文本代码 1.粗体 <b>Game</b> Over2.斜体 <i>Game</i> Over3.下划线 <u>Game</u> Over4…
阅读更多...
.Net 知识杂记

.Net 知识杂记

记录平日中琐碎的.net 知识点。不定期更新 目标框架名称(TFM) 我们创建C#应用程序时&#xff0c;在项目的工程文件(*.csproj)中都有targetFramework标签&#xff0c;以表示项目使用的目标框架 各种版本的TFM .NET Framework .NET Standard .NET5 及更高版本 UMP等 参考文档&a…
阅读更多...
Tomcat配置https

Tomcat配置https

前言&#xff1a;本文内容为实操记录&#xff0c;仅供参考&#xff01; 一、证书 CA证书申请下载不赘述了。 二、上传证书 进入tomcat根目录&#xff0c;conf同级目录下创建cert文件夹&#xff0c;并将证书两个文件上传到该文件夹&#xff1b; 三、编辑conf/server.xml文件 ① …
阅读更多...
unity3d for web

unity3d for web

时光噶然 一晃好多年过去了&#xff08;干了5年的u3d游戏&#xff09;&#xff0c;记得最后一次使用的版本好像是 unity 2017。 那个是 unity3d for webgl 还需要装个插件。用起来很蛋疼。 最近做一个小项目 在选择是用 Layabox 还是 cocosCreate 的时候 我想起了老战友 Uni…
阅读更多...
iOS - Runloop的运行逻辑

iOS - Runloop的运行逻辑

文章目录 iOS - Runloop的运行逻辑1. 苹果官方的Runloop执行图2. Mode里面的东西2.1 Source02.2 Source12.3 Timers2.4 Observers 3. 执行流程3.1 注意点 4. Runloop休眠 iOS - Runloop的运行逻辑 1. 苹果官方的Runloop执行图 2. Mode里面的东西 2.1 Source0 触摸事件处理pe…
阅读更多...
中企出海，在地合规、境外支出管理，该怎么做？

中企出海，在地合规、境外支出管理，该怎么做？

从组团出海抢订单,到“新三样”拉动外贸新增长......"出海",已经成了中国企业的关键战略。但企业出海水深浪高,由于在全球税财法管控体系上缺乏经验,在地合规风险、内控管理漏洞、资金支出隐患等方面可能“陷阱”重重。 基于此,分贝通联合安永,以“破局!中国企业出海…
阅读更多...
MTransE阅读笔记

MTransE阅读笔记

Multilingual Knowledge Graph Embeddings for Cross-lingual Knowledge Alignment 用于交叉知识对齐的多语言知识图谱嵌入(MTransE) Abstract 最近的许多工作已经证明了知识图谱嵌入在完成单语知识图谱方面的好处。由于相关的知识库是用几种不同的语言构建的&#xff0c;因…
阅读更多...
Java代码基础算法练习-求偶数和-2024.03.29

Java代码基础算法练习-求偶数和-2024.03.29

任务描述&#xff1a; 编制程序&#xff0c;输入n个整数&#xff08;n从键盘输入&#xff0c;n>0&#xff0c;整数取值范围&#xff1a;0~1000&#xff09;&#xff0c;输出这n个 数当中的偶数和。 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023