什么是盒子模型

什么是盒子模型

盒子模型，也可以称为框模型。

所有 HTML 元素可以看作盒子。在 CSS 中，“box model” 这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

不同部分的说明:

  • Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。
  • Border（边框）: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。
  • Padding（内边距）: 清除内容周围的区域。会受到框中填充的背景颜色影响。
  • Content（内容）: 盒子的内容，显示文本和图像。

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

元素的宽度和高度

下面的例子中的元素的总宽度为 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

完整的 HTML 代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title></title>
<style>div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}
</style>
</head><body><div class="ex">The picture above is 250px wide.The total width of this element is also 250px.</div></body>
</html>

上述示例运行的结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

值得注意的是: 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距。

边框

CSS 边框属性允许指定一个元素边框的样式和颜色。

CSS 边框属性常见如下:

  • border-width: 设置边框的宽度
  • border-color: 设置边框的颜色
  • border-style: 边框的样式

设置边框的宽度

如果设置一个值，则同时设置边框的四个方向的宽度。如下代码:

border-width: 10px;

上述代码则表示同时四个方向的边框宽度为 10px。

如果设置两个值，则第一个值表示设置边框的上下方向宽度，第二个值表示设置边框的左右方向宽度。

border-width: 10px 20px;

如果设置三个值，则第一个值表示设置边框的上边宽度，第二个值表示设置边框的左右方向宽度，第三个值表示设置边框的下边宽度。

border-width: 10px 20px 30px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框宽度。

border-width: 10px 20px 30px 40px;

除了上述方式设置边框宽度，CSS 还提供如下方式分别设置上、右、下和左边框的宽度。

属性名称描述
border-top-width设置一个元素的顶部边框的宽度。
border-right-width设置一个元素的右边框的宽度。
border-bottom-width设置一个元素的底部边框的宽度。
border-left-width设置一个元素的左边框的宽度。

设置边框的颜色

如果设置一个值，则同时设置边框的四个方向的颜色。如下代码:

border-color: red;

上述代码则表示同时四个方向的边框颜色为 red。

如果设置两个值，则第一个值表示设置边框的上下方向颜色，第二个值表示设置边框的左右方向颜色。

border-color: red orange;

如果设置三个值，则第一个值表示设置边框的上边颜色，第二个值表示设置边框的左右方向颜色，第三个值表示设置边框的下边颜色。

border-color: red orange yellow;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框颜色。

border-color: red orange yellow blue;

除了上述方式设置边框颜色，CSS 还提供如下方式分别设置上、右、下和左边框的颜色。

属性名称描述
border-top-color设置一个元素的顶部边框的颜色。
border-right-color设置一个元素的右边框的颜色。
border-bottom-color设置一个元素的底部边框的颜色。
border-left-color设置一个元素的左边框的颜色。

设置边框的样式

边框样式的常用备选想如下:

边框样式描述
none定义无边框。
hidden与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
inherit规定应该从父元素继承边框样式。

如果设置一个值，则同时设置边框的四个方向的样式。如下代码:

border-style: dotted;

如果设置两个值，则第一个值表示设置边框的上下方向样式，第二个值表示设置边框的左右方向样式。

border-style: dotted solid;

如果设置三个值，则第一个值表示设置边框的上边样式，第二个值表示设置边框的左右方向样式，第三个值表示设置边框的下边样式。

border-style: dotted solid dashed;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框样式。

border-style: dotted solid dashed double;

除了上述方式设置边框样式，CSS 还提供如下方式分别设置上、右、下和左边框的样式。

属性名称描述
border-top-style设置一个元素的顶部边框的样式。
border-right-style设置一个元素的右边框的样式。
border-bottom-style设置一个元素的底部边框的样式。
border-left-style设置一个元素的左边框的样式。

简写设置边框

CSS 提供了 border 属性允许同时设置边框的宽度、颜色和样式。

border: 5px solid red;

值得注意的是: 设置的顺序没有明确要求。

除了上述方式设置边框，CSS 还提供如下方式分别设置上、右、下和左边框。

属性名称描述
border-top设置一个元素的顶部边框。
border-right设置一个元素的右边框。
border-bottom设置一个元素的底部边框。
border-left设置一个元素的左边框。

内边距

CSS Padding（内边距）属性定义元素边框与元素内容之间的距离。

如果设置一个值，则同时设置内边距的四个方向。如下代码:

padding: 25px;

如果设置两个值，则第一个值表示设置内边距的上下方向，第二个值表示设置内边距的左右方向。

padding: 25px 50px;

如果设置三个值，则第一个值表示设置内边距的上边，第二个值表示设置内边距的左右方向，第三个值表示设置内边距的下边。

padding: 25px 50px 75px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的内边距。

padding: 25px 50px 75px 100px;

除了上述方式设置内边距，CSS 还提供如下方式分别设置上、右、下和左边的内边距。

属性名称描述
padding-top设置一个元素的顶部内边距。
padding-right设置一个元素的右边内边距。
padding-bottom设置一个元素的底部内边距。
padding-left设置一个元素的左边内边距。

外边距

CSS Margin（外边距）属性定义元素周围的距离。

外边距不会影响元素的可见大小，但是会影响元素的位置。

属性名称描述
margin-top设置元素的上外边距。
margin-right设置元素的右外边距。
margin-left设置元素的左外边距。
margin-bottom设置元素的下外边距。

设置上和左外边距

margin-top: 100px;
margin-left: 50px;

由于元素在 HTML 页面中默认是靠左靠上显示的。所以默认情况下，修改左外边距和上外边距时，会影响当前元素的位置。

设置下和右外边距

margin-bottom: 100px;
margin-right: 50px;

修改右和下外边距时会影响其他元素相对于当前元素的位置。

简写设置外边距

如果设置一个值，则同时设置外边距的四个方向。如下代码:

margin: 25px;

如果设置两个值，则第一个值表示设置外边距的上下方向，第二个值表示设置外边距的左右方向。

margin: 25px 50px;

如果设置三个值，则第一个值表示设置外边距的上边，第二个值表示设置外边距的左右方向，第三个值表示设置外边距的下边。

margin: 25px 50px 75px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的外边距。

margin: 25px 50px 75px 100px;

外边距重叠

当同时为两个相邻的 <div> 标签设置外边距，为第一个 <div> 标签设置下外边距，为第二个 <div> 标签设置上外边距。具体代码如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 100px;height: 100px;background-color: red;/*为上边的元素设置一个下外边距*/margin-bottom: 100px;}		.box2{width: 100px;height: 100px;background-color: blue;/*为下边的元素设置一个上外边距*/margin-top: 100px;}</style></head><body><div class="box1"></div><div class="box2"></div>	</body>
</html>

上述示例代码，最终运行的结果是: 两个 <div> 之间的距离为 100px。

垂直方向的相邻的外边距会发生外边距的重叠现象，兄弟元素的相邻外边距会取最大值。

值得注意的是: 外边距的重叠现象只会出现在垂直方向，而水平方向并不存在外边距重叠现象。

如果定义两个 <div> 标签是父子关系的话，当为作为子元素的 <div> 设置上外边距，该上外边距会传递给作为父元素的 <div>。具体代码如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>		<style type="text/css">		.box3{width: 300px;height: 200px;background-color: skyblue;}.box4{width: 100px;height: 100px;background-color: red;/*设置一个margin-top*/margin-top: 100px;}			</style></head><body>		<div class="box3"><div class="box4"></div></div></body>
</html>

上述外边距的重叠现象，可以通过为作为父元素的 <div> 下内边距解决。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>		<style type="text/css">		.box3{width: 300px;height: 100px;background-color: skyblue;padding-top: 100px;}.box4{width: 100px;height: 100px;background-color: red;}			</style></head><body>		<div class="box3"><div class="box4"></div></div></body>
</html>

内联元素的盒子模型

内联元素的宽度和高度

内联元素不支持设置宽和高，内联元素元素的大小由内容决定。

内联元素的内边距

  • 内联元素支持水平方向的内边距。
  • 内联元素可以设置垂直方向的内边距，但是不会影响布局。

内联元素的边框

  • 内联元素支持水平方向的边框。
  • 内联元素可以设置垂直方向的边框，但是不会影响布局。

内联元素的外边距

内联元素支持水平方向的外边距 , 不支持垂直方向的外边距。

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

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

相关文章

8. 损失函数与反向传播

8. 损失函数与反向传播

8.1 损失函数 ① Loss损失函数一方面计算实际输出和目标之间的差距。 ② Loss损失函数另一方面为我们更新输出提供一定的依据。 8.2 L1loss损失函数 ① L1loss数学公式如下图所示&#xff0c;例子如下下图所示。 import torch from torch.nn import L1Loss inputs torch.tens…
阅读更多...
Django静态文件媒体文件文件上传

Django静态文件媒体文件文件上传

文章目录 一、静态文件和媒体文件1.在django中使用静态文件实践2.在django中使用媒体文件 二、文件上传单文件上传实践多文件上传 一、静态文件和媒体文件 媒体文件: 用户上传的文件&#xff0c;叫做media 静态文件:存放在服务器的css,js,image,font等 叫做static1.在django中…
阅读更多...
【Locomotor运动模块】瞬移

【Locomotor运动模块】瞬移

文章目录 一、原理二、两种类型1、Instant(立刻)2、Dash&#xff08;猛冲&#xff09; 三、瞬移区域、瞬移点1、瞬移区域2、瞬移点 一、原理 抛物线指针选择好目标位置&#xff0c;然后告诉瞬移预设体&#xff1a;你想法把游戏区域弄到目标位置来 解释&#xff1a;抛物线指针选…
阅读更多...
JS中的new操作符

JS中的new操作符

文章目录 JS中的new操作符一、什么是new&#xff1f;二、new经历了什么过程&#xff1f;三、new的过程分析四、总结 JS中的new操作符 参考&#xff1a;https://www.cnblogs.com/buildnewhomeland/p/12797537.html 一、什么是new&#xff1f; 在JS中&#xff0c;new的作用是通过…
阅读更多...
React笔记（八）Redux

React笔记（八）Redux

一、安装和配置 React 官方并没有提供对应的状态机插件&#xff0c;因此&#xff0c;我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录&#xff0c;然后执行以下命令下载 Redux npm i redux 2、创建配置文件 在 React 中&#xff0c;…
阅读更多...
FreeRTOS的信号量和互斥量之间的区别和联系

FreeRTOS的信号量和互斥量之间的区别和联系

文章目录 信号量信号量简介信号量特征 互斥量互斥量的上锁机制互斥量的优先级继承机制 二值信号量和互斥量的作用二值信号量的作用互斥量的作用 二值信号量和互斥锁关系相同点不同点 如何根据场景选择回答信号量和互斥锁之间的区别&#xff1a; 信号量 信号量简介 队列(queue)…
阅读更多...
大集合按照指定长度进行分割成多个小集合，用于批量多次处理数据

大集合按照指定长度进行分割成多个小集合，用于批量多次处理数据

&#x1f4da;目录 拆分案例拆分的核心代码 通常我们对集合的更新或者保存都需要用集合来承载通过插入的效率&#xff0c;但是这个会遇到一个问题就是你不知道那天那个集合的数量可能就超了&#xff0c;虽然我们连接数据库进行批量提交会在配置上配置allowMultiQueriestrue,但是…
阅读更多...
类和对象(下)

类和对象(下)

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…
阅读更多...
【uniapp】 实现公共弹窗的封装以及调用

【uniapp】 实现公共弹窗的封装以及调用

图例&#xff1a;红框区域为 “ 内容区域 ” 一、组件 <!-- 弹窗组件 --> <template> <view class"add_popup" v-if"person.isShowPopup"><view class"popup_cont" :style"{width:props.width&&props.width&…
阅读更多...
mybatis源码学习-1-调试环境

mybatis源码学习-1-调试环境

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…
阅读更多...
Spring源码解析-总览

Spring源码解析-总览

1、前言 Spring源码一直贯穿我们Java的开发中&#xff0c;只要你是一个Java开发人员就一定知道Spring全家桶。Spring全家桶为我们一共一站式服务&#xff0c;IOC、AOP更是Spring显著特性。但是Spring到底怎么为我们提供容器&#xff0c;管理资源的呢&#xff1f;下来&#xff0…
阅读更多...
Ubuntu学习---跟着绍发学linux课程记录（第二部分）

Ubuntu学习---跟着绍发学linux课程记录（第二部分）

文章目录 7 文件权限7.1 文件的权限7.2 修改文件权限7.3 修改文件的属主 8、可执行脚本8.2Shell脚本8.3python脚本的创建 9Shell9.1Shell中的变量9.2 环境变量9.3用户环境变量 学习链接: Ubuntu 21.04乌班图 Linux使用教程_60集Linux课程 所有资料在 http://afanihao.cn/java …
阅读更多...
学生管理系统VueAjax版本

学生管理系统VueAjax版本

学生管理系统VueAjax版本 使用Vue和Ajax对原有学生管理系统进行优化 1.准备工作 创建AjaxResult类&#xff0c;对Ajax回传的信息封装在对象中 package com.grg.Result;/*** Author Grg* Date 2023/8/30 8:51* PackageName:com.grg.Result* ClassName: AjaxResult* Descript…
阅读更多...
Java抛出异常

Java抛出异常

当某个方法抛出了异常时&#xff0c;如果当前方法没有捕获异常&#xff0c;异常就会被抛到上层调用方法&#xff0c;直到遇到某个try ... catch被捕获为止 调用printStackTrace()可以打印异常的传播栈&#xff0c;对于调试非常有用&#xff1b;捕获异常并再次抛出新的异常时&am…
阅读更多...
项目-IM

项目-IM

tim-server tim-server启动类实现CommandLineRunner接口&#xff0c;重写run()方法 run()方法开启一个线程&#xff0c;创建zk持久父节点&#xff0c;创建临时顺序子节点&#xff0c;将netty-server信息写入 1.1 用户登录 1.2 gateway向认证授权中心请求token 1.3 从zookee…
阅读更多...
在windows上安装Cmake软件

在windows上安装Cmake软件

Cmake是一个跨语言、跨平台、开源的编译工具&#xff0c;可以编译C、C、Note.js、JavaScript、C#、Java、Python、Php、Object-C、Ruby等工程&#xff0c;需要设置对应的src源码目录、ext第三方依赖目录、CMakeList.txt构建列表&#xff0c;再使用cmake命令即可。     2023年…
阅读更多...
程序员自由创业周记#2：前期准备

程序员自由创业周记#2：前期准备

感恩 上次公开了创业的决定后&#xff0c;得到了很多亲朋好友和陌生朋友的鼓励或支持&#xff0c;以不同的形式&#xff0c;感动之情溢于言表。这些都会记在心里&#xff0c;大恩不言谢~ 创业方向 笔者是一名资质平平的iOS开发程序猿&#xff0c;创业项目也就是开发App卖&am…
阅读更多...
Jmeter（二十九）：Jmeter常用场景梳理

Jmeter（二十九）：Jmeter常用场景梳理

一、每秒钟固定调用次数 如果想控制每秒发送请求数量，仅仅通过线程数与循环次数是不够的，因为这只能控制发送总数，而要控制每秒发送数量，需要线程数与常数吞吐量控制器的搭配使用，这种场景在性能测试中使用不多。 例如每秒钟调用30次接口，那么把线程数设置为30，将常数…
阅读更多...
Netty-ChannelPipeline

Netty-ChannelPipeline

EventLoop可以说是 Netty 的调度中心&#xff0c;负责监听多种事件类型&#xff1a;I/O 事件、信号事件、定时事件等&#xff0c;然而实际的业务处理逻辑则是由 ChannelPipeline 中所定义的 ChannelHandler 完成的&#xff0c;ChannelPipeline 和 ChannelHandler应用开发的过程…
阅读更多...
C语言(第三十三天)

C语言(第三十三天)

3.1.2 画图推演 3.2 举例2&#xff1a;顺序打印一个整数的每一位 输入一个整数m&#xff0c;打印这个按照顺序打印整数的每一位。 比如&#xff1a; 输入&#xff1a;1234 输出&#xff1a;1 2 3 4 输入&#xff1a;520 输出&#xff1a;5 2 0 3.2.1 分析和代码实现 这个题目&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023