CSS盒子模型的认识

前言：

当我们打开一个网页使用F12进行调试时，经常可以看到如下图片，这便是一个盒子。

什么是盒子：

所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。或者说，每一个可见的 HTML 元素都是一个盒子。

                                                                                                                ———来自知乎

常规盒子的基本构造组成：

图解：

结构简说： 
英文名中文名说明
margin

外边距

清除边框外的区域，外边距是透明的。
border

边框

围绕在内边距和内容外的边框。
padding内边距清除内容周围的区域，内边距是透明的。
content内容盒子的内容，显示文本和图像。

盒子模型各部分详解：

margin(外边距)：

用于将各个板块区别开来的组件，在此不过多解释。

可以查看此篇文章浏览：点此跳转

border(边框)：

 解释：

围绕元素内容和内边距的一条或多条线，，可用于区别不同区域的内容，可以直接定义他们的样式，宽度，颜色等，border是一个复合属性。

边框样式：

border-style

设置的属性解释：
属性解释

border-style

对四边同时进行操作

border-top-style

只对上边框进行操作

border-bottom-style

只对下边框进行操作

order-left-style

只对左边框进行操作

border-right-style

只对右边框进行操作
常见的属性值：
属性值解释
none默认值，无边框

dotted

定义一个点线框

dashed

定义一个虚线框

solid

定义实线边界

double

定义两个边界,两个边界的宽度和boder-width的值相同

groove

定义3D沟槽边界,效果取决于边界的颜色值

rigde

定义3D脊边界,效果取决于边界的颜色值

inset

定义一个3D的嵌入边框,效果取决于边界的颜色值

outset

定义一个3D的突出边框,效果取决于边界的颜色值

边界宽度：

border-width

设置属性解释：
属性解释

border-width

对四边同时进行操作

border-top-width

只对上边框进行操作

border-bottom-width

只对下边框进行操作

order-left-width

只对左边框进行操作

border-right-width

只对右边框进行操作
常见的属性值：

与字体大小的设置方法相似。

边界颜色：

border-color

设置属性解释：
属性解释

border-color

对四边同时进行操作

border-top-color

只对上边框进行操作

border-bottom-color

只对下边框进行操作

order-left-color

只对左边框进行操作

border-right-color

只对右边框进行操作
常见的属性值：

与颜色的设置方法一致。

四角边框的设置：

border-radius

设置值解释：
属性值个数/样式解释

1

四只角同时进行操作

2

只对上边框进行操作【左上+右下    左下+右上】

3

分三处进行操作【左上   右上+左下   右下】

4

对四只角分别操作进行操作【按顺时针的顺序】
x/y将其分为水平和数值方向操作

总说：

由于border是一个复合属性，所以写上述几方面时（除border-radius外），可以写在同一个border中。

举例：
<!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>div{border: 10px ridge red;}</style>
</head>
<body><div>这是一个div标签</div>
</body>
</html>

padding(内边距)：

解释：

padding表示盒子的内边距，意思是填充，与外边距不同的是，padding可以设置背景图片和颜色。

设置属性解释：
属性解释

padding

对四边同时进行操作

padding-top

只对上边框进行操作

padding-bottom

只对下边框进行操作

padding-left

只对左边框进行操作

padding-right

只对右边框进行操作

属性值以及用法：

其属性值以及用法与border类似，参考上方border的说明。

举例：
<!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>div{background-color: aquamarine;}div.div1{padding: 20px;}</style>
</head>
<body><div>这是一个div标签，正常情况</div><br><div class="div1">这是一个div标签,通过padding设置</div>
</body>
</html>

图像类使用说明（简说）：

具体使用方法见此篇文章：点此跳转

属性说明

border-image

设置图形边界，简写属性

border-image-source

图形的来源（路径），可以接收一个URL函数或一个渐变作为值。

border-image-slice

图形的切片大小

border-image-width

图形边界的宽度

border-image-repeat

定义图片如何填充边框

border-image-outset

定义边界内部和内边距之间的额外空间的大小

举例： 
<!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>span{border-image-width: 200px;border-image-outset: 100px;border-image-repeat: 100px;border-image-source: url(../img/4.jpg);}</style>
</head>
<body><span></span>
</body>
</html>

content(内容)：

用于存放我们内容的属性，body内的内容

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

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

相关文章

大模型（e.g., ChatGPT)里面的一些技术和发展方向

大模型（e.g., ChatGPT)里面的一些技术和发展方向

文章目录 如何炼成ChatGPT如何调教ChatGPT如何武装ChatGPT一些大模型的其他方向prompt tuningInstruction tuning 这个是基于视频 https://www.bilibili.com/video/BV17t4218761&#xff0c;可以了解一下大模型里面的一些技术和最近的发展&#xff0c;基本都是2022你那以来的发…
阅读更多...
【超简单实用】Zotero 7 内置pdf背景颜色更改插推荐以及安装

【超简单实用】Zotero 7 内置pdf背景颜色更改插推荐以及安装

Zotero beta7 pdf 内置颜色更换 zetore 6 很多成熟的插件在 zetore 7都不能用了。版本回退看起来内置文章的注释会被消除&#xff0c;所以又不想退回去。前几个月在找beta 7 的pdf 护眼色的插件一直没有&#xff0c;今天终于发现了&#xff01;&#xff01;&#xff01;&#…
阅读更多...
黑龙江—等保测评三级安全设计思路

黑龙江—等保测评三级安全设计思路

需求分析 6.1、 系统现状 6.2、 现有措施 目前&#xff0c;信息系统已经采取了下述的安全措施&#xff1a; 1、在物理层面上&#xff0c; 2、在网络层面上&#xff0c; 3、在系统层面上&#xff0c; 4、在应用层面上&#xff0c; 5、在管理层面上&#xff0c; 6.…
阅读更多...
STM32点灯大师（点了一颗LED灯，轮询法）

STM32点灯大师（点了一颗LED灯，轮询法）

配置操作&#xff1a; 一、使用CubeMX配置到大致的操作 1.1 选择芯片 1.2 选择引脚&#xff08;根据电路图&#xff09; 1.3 配置gpio口 1.4 配置系统 1.5文件项目操作 最后就是点击 二、点击CubeMX生成的代码&#xff0c;并且修改代码 2.1 看看效果 2.2 写代码
阅读更多...
听力知识|小耳朵，你了解多少？

听力知识|小耳朵，你了解多少？

每天接收好多讯息和知识 那么小耳朵是如何做到的呢&#xff1f; 我们每一个人都有一双独一无二的耳朵。 你知道吗&#xff1f; 即使每一个人的耳朵看起来都很相似&#xff0c; 可是从来也没有一模一样的耳朵 即便是你的左右耳也不完全相同。 人体五种感觉是指&#xff1a;…
阅读更多...
故障诊断 | 基于1DCNN和2DCNN的智能诊断模型—用于机械设备故障诊断

故障诊断 | 基于1DCNN和2DCNN的智能诊断模型—用于机械设备故障诊断

传统机械设备状态监测方法的局限性 严重依赖专家经验： 对于机泵振动信号，时频分析如小波变换、维格纳分布及自适应分解EEMD等方法被用来提取特征，神经网络、支持向量机、决策树、模糊逻辑等方法被用于对机泵的运行状态进行分类。 但由于特征值是根据专家经验进行提取的，对…
阅读更多...
若依ruoyi-vue前端页签缓存设置

若依ruoyi-vue前端页签缓存设置

页签缓存 利用路由元信息&#xff08;meta&#xff09; 在路由配置中&#xff0c;为需要缓存的路由设置 keepAlive 属性为 true。例如&#xff1a; {path: /system/user,name: User,component: () > import(/views/system/user/user.vue),meta: { keepAlive: true } }注意…
阅读更多...
【C++】C++中的构造函数和析构函数详解

【C++】C++中的构造函数和析构函数详解

欢迎来到CILMY23的博客 本篇主题为&#xff1a;C中的构造函数和析构函数详解 个人主页&#xff1a;CILMY23-CSDN博客 系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 写在前头&#xff1…
阅读更多...
stm32_HAL_串口不定长数据接收发送

stm32_HAL_串口不定长数据接收发送

串口代码思路//不包括初始化 变量 uint8_t tx1[256];//缓冲区uint8_t Tx1_size0;//记录数据的个数 接收 产生第一个数据接收-----进入中断----复制数据-----继续接收----在进入中断----复制数据---在接收直到串口第一次数据全部接收完 中断源码 利用中断经行计算字符个数…
阅读更多...
社交媒体数据恢复：KaokaoTalk

社交媒体数据恢复：KaokaoTalk

KaokaoTalk数据恢复方法 一、数据恢复的基本步骤 在进行KaokaoTalk数据恢复时&#xff0c;首先需要确保你已经停止使用该设备&#xff0c;以防止新的数据覆盖丢失的数据。接下来&#xff0c;你可以按照以下步骤进行操作&#xff1a; 备份数据&#xff1a;在尝试恢复数据之前&a…
阅读更多...
深入理解Vue插槽

深入理解Vue插槽

子组件ChildComp.vue <template><slot></slot><slot name"slot1"></slot><slot name"slot2" msg"hello world"></slot> </template>父组件App.vue <script setup> import { ref } from…
阅读更多...
【SpringCloud】OpenFeign服务接口调用快速入门

【SpringCloud】OpenFeign服务接口调用快速入门

【SpringCloud】OpenFeign服务接口调用快速入门 文章目录 【SpringCloud】OpenFeign服务接口调用快速入门1. 概述2. 引入依赖3. 配置、测试 1. 概述 官网地址&#xff1a;点击跳转 Feign是一个声明性web服务客户端。它使编写web服务客户端变得更容易。使用 Feign 创建一个接口…
阅读更多...
Nginx（一）

Nginx（一）

web服务器&#xff0c;负载均衡&#xff0c;API网关&#xff0c;DDoS防御&#xff0c;反向代理&#xff0c;web应用防火墙&#xff0c;缓存.. service nginx status [rootcodeYan ~]# service nginx status Redirecting to /bin/systemctl status nginx.service ● nginx.serv…
阅读更多...
第十五届蓝桥杯省赛第二场C/C++B组A题【进制】题解（AC）

第十五届蓝桥杯省赛第二场C/C++B组A题【进制】题解（AC）

解题思路 按照题意进行模拟&#xff0c;计算 x x x 的 b b b 进制过程中&#xff0c;若出现余数大于 9 9 9&#xff0c;则说明 x x x 的 b b b 进制一定要用字母进行表示。 #include <iostream> #include <cstring> #include <algorithm> #include &l…
阅读更多...
rysnc 通过文件输入密码的设置方法

rysnc 通过文件输入密码的设置方法

在使用 rsync 进行文件同步时&#xff0c;你可以通过一个文件输入密码来避免在命令行中显示或手动输入密码。这在自动化脚本中特别有用。下面是详细的步骤和方法&#xff1a; 创建密码文件 创建一个包含密码的文件&#xff1a; 打开一个文本编辑器&#xff0c;输入远程服务器的…
阅读更多...
Python | Leetcode Python题解之第49题字母异位词分组

Python | Leetcode Python题解之第49题字母异位词分组

题目&#xff1a; 题解&#xff1a; class Solution:def groupAnagrams(self, strs: List[str]) -> List[List[str]]:mp collections.defaultdict(list)for st in strs:counts [0] * 26for ch in st:counts[ord(ch) - ord("a")] 1# 需要将 list 转换成 tuple …
阅读更多...
ubuntu下boa服务器编译运行

ubuntu下boa服务器编译运行

一.下载boa源码并解压 官网网站&#xff1a;BOA源码 点击箭头所指的位置即可下载 解压&#xff1a; tar -xvf boa-0.94.13.tar.gz 解压完成得到目录&#xff1a; 二.安装环境所缺依赖&#xff0c;否则编译会报错 sudo apt install bison sudo apt install flex 三.编译 1…
阅读更多...
利用地理矢量数据进行路径规划

利用地理矢量数据进行路径规划

文章目录 概要绘制osm安装和编译更改配置节点运行概要 地理矢量数据通常是指包括点（如地标、位置坐标）、线（如街道、河流）和多边形（如行政区划、建筑物轮廓）这样的基本几何构造，这些都是构成空间数据的基本要素。在路径规划中，这些矢量数据可以被用来表示网络中的节点…
阅读更多...
PC-3000 Mobile Pro: 智能手机及平板设备数据提取工具

PC-3000 Mobile Pro: 智能手机及平板设备数据提取工具

天津鸿萌科贸发展有限公司从事数据安全业务20余年&#xff0c;在数据恢复、数据取证、数据备份等领域有丰富的案例经验、前沿专业技术及良好的行业口碑。同时&#xff0c;公司面向取证机构及数据恢复公司&#xff0c;提供数据恢复实验室建设方案&#xff0c;包含数据恢复硬件设…
阅读更多...
性能优化：如何高效使用虚拟DOM

性能优化：如何高效使用虚拟DOM

优化虚拟DOM的性能是一项重要的任务&#xff0c;下面是一些实际技巧和最佳实践&#xff0c;可以帮助开发者提高虚拟DOM的性能&#xff1a; 减少渲染次数&#xff1a;虚拟DOM的性能优化的关键是尽量减少渲染次数。避免不必要的渲染&#xff0c;比如只有在数据发生真正改变时才进…
阅读更多...
最新文章

Copyright @ 2022~2023