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

news2025/3/4 15:37:35

零.前言

本篇主要介绍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.coloradmin.cn/o/1555456.html

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

相关文章

课时79：流程控制_循环控制_控制解析

课时79：流程控制_循环控制_控制解析

1.4.1 控制解析 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 简介 所谓的流程控制&#xff0c;主要针对的是&#xff0c;当我们处于流程步骤执行的过程中&#xff0c;因为某些特殊的原因&#xff0c;不得不停止既定的操作进行步…
阅读更多...
素材投放效果追踪与精准识别：从数据洞察到策略优化的全方位解析

素材投放效果追踪与精准识别：从数据洞察到策略优化的全方位解析

一、数据洞察&#xff1a;深度解析投放效果的核心指标在数字广告的世界里&#xff0c;数据是投放效果的晴雨表。通过深入的数据洞察&#xff0c;广告主可以清晰地掌握广告的实际表现&#xff0c;为后续的策略调整提供有力的支持。曝光量、点击率、转化率和投资回报率等指标&…
阅读更多...
MS Edge浏览器坏了？网页播放视频的速度不对

MS Edge浏览器坏了？网页播放视频的速度不对

前言 小白是MS Edge浏览器的重度用户。电脑上必须有的两个浏览器&#xff1a;Google Chrome和Microsoft Edge。 前段时间小白在使用MS Edge的时候出了问题&#xff1a;播放视频或者音频的时候总是被莫名其妙加速或者减速&#xff0c;类似于播放视频时候的0.5x或者2.0x。 当时…
阅读更多...
Leetcode的正确打开方式

Leetcode的正确打开方式

很多新手朋友在学习完数据结构与算法之后&#xff0c;都想找个平台磨练自己的技艺。那么LeetCode绝对是不二之选。但是官网刷题不是很友好&#xff0c;那么今天给大家介绍一款刷LeetCode神器。也是未来工作之后的摸鱼神器。 leetcode-editor 本打工人的摸&#xff08;nei&am…
阅读更多...
OSCP靶场--Zipper

OSCP靶场--Zipper

OSCP靶场–Zipper 考点(php zip:// rce[文件上传] CVE-2021-4034提权7z 通配符提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.249.229 -sV -sC -Pn --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-29 07:40 EDT …
阅读更多...
知识图谱-图数据库-neo4j （1）踩坑记录

知识图谱-图数据库-neo4j （1）踩坑记录

1、neo4j 安装 材料 &#xff1a; openjdk11 (neo4j 最低jdk版本要求) neo4j-community-4.4.30 CentOS 7.8 Release Date: 25 January 2024 Neo4j 4.4.30 is a maintenance release with many important improvements and fixes. Neo4j Deployment Center - Graph Database…
阅读更多...
使用node爬取视频网站里《龙珠》m3u8视频

使用node爬取视频网站里《龙珠》m3u8视频

1. 找到视频播放网站 百度一下 龙珠视频播放 精挑细选一个可以播放的网站。 如&#xff1a;我在网上随便找了一个播放网站&#xff0c;可以直接在线播放 https://www.xxx.com/play/39999-1-7.html 这里不具体写视频地址了&#xff0c;大家可以自行搜索 2.分析网页DOM结…
阅读更多...
【php程序开发从入门到精通】——搭建PHP开发环境

【php程序开发从入门到精通】——搭建PHP开发环境

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…
阅读更多...
大数据学习-2024/3/29-oracle安装

大数据学习-2024/3/29-oracle安装

oracle安装 1、检查windows环境是否支持&#xff0c; 企业版和旗舰版。 右键点击属性后查看 2、检查环境中是否存在oracle数据。 此电脑右键点击管理 看开始菜单是否存在Oracle 文件夹。 3、正式安装oracle a、解压我分享的百度网盘数据&#xff0c;&#xff08;也可以…
阅读更多...
目标检测评价标准

目标检测评价标准

主要借鉴&#xff1a;https://github.com/rafaelpadilla/Object-Detection-Metrics?tabreadme-ov-file 主要评价指标、术语&#xff1a; Intersection Over Union (IOU)&#xff1a;两个检测框交集面积与并集面积的比值 True Positive (TP)&#xff1a;IOU大于阈值的检测框…
阅读更多...
车道线检测_Canny算子边缘检测_1

车道线检测_Canny算子边缘检测_1

Canny算子边缘检测&#xff08;原理&#xff09; Canny算子边缘检测是一种经典的图像处理算法&#xff0c;由John F. Canny于1986年提出&#xff0c;用于精确、可靠地检测数字图像中的边缘特征。该算法设计时考虑了三个关键目标&#xff1a;低错误率&#xff08;即尽可能多地检…
阅读更多...
空气压缩机介绍

空气压缩机介绍

空气压缩机介绍
阅读更多...
《QT实用小工具·三》偏3D风格的异型窗体

《QT实用小工具·三》偏3D风格的异型窗体

1、概述 源码放在文章末尾 可以在窗体中点击鼠标左键进行图片切换&#xff0c;项目提供了一些图片素材&#xff0c;整体风格偏向于3D类型&#xff0c;也可以根据需求自己放置不同的图片。 下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; 头文件部分&#xff…
阅读更多...
基于微信小程序的日语词汇学习设计与实现(论文+源码)_kaic

基于微信小程序的日语词汇学习设计与实现(论文+源码)_kaic

日语词汇学习小程序 摘 要 日语词汇学习小程序是高校人才培养计划的重要组成部分&#xff0c;是实现人才培养目标、培养学生科研能力与创新思维、检验学生综合素质与实践能力的重要手段与综合性实践教学环节。本学生所在学院多采用半手工管理日语词汇学习小程序的方式&#x…
阅读更多...
【c++】类和对象（五）赋值运算符重载

【c++】类和对象（五）赋值运算符重载

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本篇文章带大家认识赋值运算符重载&#xff0c;const成员&#xff0c;取地址及const取地址操作符重载等内容 目录 1.赋值运算符重载1.1运算符重载1.1.1特性&#…
阅读更多...
鸿蒙OS开发实战：【打造自己的搜索入口】

鸿蒙OS开发实战：【打造自己的搜索入口】

背景 几乎每家应用中都带有搜索功能&#xff0c;关于这个功能的页面不是特别复杂&#xff0c;但如果要追究其背后的一系列逻辑&#xff0c;可能是整个应用中最复杂的一个功能。今天主要实践目标&#xff0c;会抛开复杂的逻辑&#xff0c;尝试纯粹实现一个“搜索主页”&#xf…
阅读更多...
ES学习日记(五)-------插件head安装

ES学习日记(五)-------插件head安装

接上回,必要的git和node已经装完了,现在开始装head 回到es集群项目里找到plugins(插件文件夹下), 存在安装在plugins启动es报错的情况,报错信息如图一,解决方案就是换个目录,不要放在plugin目录下 git clone https://github.com/mobz/elasticsearch-head.git 打开远程登陆,默…
阅读更多...
云原生（七）、Kubernetes初学 + 裸机搭建k8s集群

云原生（七）、Kubernetes初学 + 裸机搭建k8s集群

Kubernetes简介 Kubernetes&#xff08;通常简称为K8s&#xff09;是一个开源的容器编排平台&#xff0c;最初由Google设计和开发&#xff0c;现在由Cloud Native Computing Foundation&#xff08;CNCF&#xff09;维护。它旨在简化容器化应用程序的部署、扩展和管理。 Kube…
阅读更多...
鸿蒙OS开发教学：【编程之重器-装饰器】

鸿蒙OS开发教学：【编程之重器-装饰器】

HarmonyOS 有19种装饰器 必须【2】 绘制一个页面&#xff0c;这两个肯定会用到 EntryComponent 可选【17】 StatePropLinkObjectLinkWatchStylesStoragePropStorageLinkProvideConsumeObservedBuilderBuilderParamLocalStoragePropLocalStorageLinkExtendConcurrent 如果…
阅读更多...
2013年认证杯SPSSPRO杯数学建模B题(第一阶段)流行音乐发展简史全过程文档及程序

2013年认证杯SPSSPRO杯数学建模B题(第一阶段)流行音乐发展简史全过程文档及程序

2013年认证杯SPSSPRO杯数学建模 B题 流行音乐发展简史 原题再现&#xff1a; 随着互联网的发展&#xff0c;流行音乐的主要传播媒介从传统的电台和唱片逐渐过渡到网络下载和网络电台等。网络电台需要根据收听者的已知喜好&#xff0c;自动推荐并播放其它音乐。由于每个人喜好…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023