前端---CSS的盒模型
文章目录
- 什么是盒模型?
- 设置边框
- 设置内边距
- 设置外边距
- 块级元素水平居中
什么是盒模型?
页面上的每个HTML元素都是一个一个的“盒子”,这些盒子由:内容、内边距、边框、外边距组成。

我们可以和住的房子联系起来,更好的理解这四部分的含义:
外边距:房子和房子之间的距离
边框:墙的厚度
内边距:墙和家具之间的距离
内容:家具
设置边框
基础属性:边框的粗细border-width: 10px;边框的样式:border-style: ;border-style: solid; 实线边框border-style: dashed; 虚线边框border-style: dotted; 点线边框边框的颜色border-color: green;
设置边框的大小:border: 10px;box-sizing: border-box;分别设置边框每个方向的大小:border-top: 1px;border-right: 2px;border-bottom: 3px;border-left: 4px;
注:只设置边框会把元素撑大,需要连同设置 box-sizing: border-box 使边框不撑大元素而是压缩一点内容的大小
设置内边距
设置内边距的大小:padding: 2px;box-sizing: border-box;分别设置内边距每个方向的大小:padding-top: 1px;padding-right: 2px;padding-bottom: 3px;padding-left: 4px;
注:只设置内边距会把元素撑大,需要连同设置 box-sizing: border-box 使内边距不撑大元素而是压缩一点内容的大小
设置外边距
设置外边距的大小:margin: 2px;分别设置外边距每个方向的大小:margin-top: 1px;margin-right: 2px;margin-bottom: 3px;margin-left: 4px;
注:不会撑大元素
块级元素水平居中
方式一:
margin-left: auto; margin-right: auto;方式二:
margin: auto;方式三:
margin: 0 auto;
注:
- 垂直居中不能使用margin设置
- 使用margin水平居中是给块级元素用的;使用text-align水平居中是给行内元素或者行内块元素用的。
相关文章:
前端---CSS的盒模型
文章目录 什么是盒模型?设置边框设置内边距设置外边距块级元素水平居中 什么是盒模型? 页面上的每个HTML元素都是一个一个的“盒子”,这些盒子由:内容、内边距、边框、外边距组成。 我们可以和住的房子联系起来,更好…...
Linux可以投屏到电视吗?用网页浏览器就能投屏到电视!
Linux系统的电脑如果要投屏到安卓电视屏幕上,可以使用投屏工具AirDroid Cast的网页版和TV版一起实现。 首先,在Linux系统的电脑里用chrome浏览器或edge浏览器打开webcast.airdroid.com。这就是AirDroid Cast的网页版。你可以看到中间白色框框的右上角有个…...
云汇优想:抖音矩阵系统有哪些类型?
抖音作为中国最热门的短视频分享平台之一,不断推陈出新,在内容管理和展示方面也进行了创新。其中,抖音矩阵系统是一项重要的功能,它提供了多种类型的矩阵,帮助用户更好地管理和展示自己的内容。那么,抖音矩…...
XSS 漏洞的理解
谈一谈你对XSS 漏洞的理解 1.漏洞描述 跨站脚本攻击是一种Web安全漏洞。攻击者利用该漏洞,在网页中注入恶意代码,等待受害者访问被注入恶意代码的网页。网页中的恶意代码会被浏览器识别,并执行。恶意代码通常是Javascript脚本,由…...
cocosCreator 之内存管理和释放
版本: 3.4.0 语言: TypeScript 环境: Mac 回顾 前面有两篇博客说明了: cocosCreator 之 resources动态加载、预加载 讲述了静态引用资源,动态加载和预加载相关cocosCreator 之 Bundle 讲述了AssetManager关于对内置…...
飞天使-template模版相关知识
遇到报错django.template.exceptions.TemplateSyntaxError: ‘staticfiles’ is not a registered tag library. Must ROOT_URLCONF TEMPLATES [{BACKEND: django.template.backends.django.DjangoTemplates,DIRS: [os.path.join(BASE_DIR, templates)],APP_DIRS: True,OPTI…...
一、Hadoop3.1.3集群搭建
一、集群规划 hadoop01(209.2)hadoop02(209.3)hadoop03(209.4)HDFSNameNode DataNodeDataNodeSecondaryNameNode DataNodeYARNNodeManagerResourceManager NodeManagerNodeManager NameNode和SecondaryNameNode不要放在同一台服务器上 二、创建用户 useradd atguigu passwd *…...
QML16、从 C++ 定义 QML 类型
从 C++ 定义 QML 类型 当使用 C++ 代码扩展 QML 时,可以向 QML 类型系统注册 C++ 类,以使该类能够用作 QML 代码中的数据类型。 虽然任何 QObject 派生类的属性、方法和信号都可以从 QML 访问,如将 C++ 类型的属性暴露给 QML 中所讨论的,但在向类型系统注册之前,此类类不能…...
【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用
Redis高并发高可用 复制 在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他机器,满足故障恢复和负载均衡等需求。Redis也是如此,它为我们提供了复制功能,实现了相同数据的多个Redis 副本。复制功能是高可用Re…...
LeetCode(12)时间插入、删除和获取随机元素【数组/字符串】【中等】
目录 1.题目2.答案3.提交结果截图 链接: 380. O(1) 时间插入、删除和获取随机元素 1.题目 实现RandomizedSet 类: RandomizedSet() 初始化 RandomizedSet 对象bool insert(int val) 当元素 val 不存在时,向集合中插入该项,并返回…...
前端面试题 计算机网络
文章目录 ios 7层协议tcp协议和udp协议的区别tcp协议如何确保数据的可靠http和tcp的关系url输入地址到呈现网页有哪些步骤post和get本质区别,什么时候会触发二次预检GET请求:POST请求:触发二次预检(CORS中的预检请求)&…...
windows aseprite编译指南(白嫖)
aseprite是画像素图的专业软件,steam上有售卖,不过官方也在github开源了,需要自己编译。 1. 首先获取源码 直接在github上clone源码到本地指定目录 需要先下载git,下载好后在git.bash中执行(需要腾一个用来安放源码的…...
生活污水处理一体化处理设备有哪些
生活污水处理一体化处理设备有多种类型,包括但不限于以下几种: 鼓风机:提供曝气系统所需的气流。潜水污水提升泵:将污水从低处提升到高处。旋转式滚筒筛分机:对污水中的悬浮物进行分离和筛选。回旋式格栅:…...
JSON可视化管理工具JSON Hero
本文软件由网友 zxc 推荐; 什么是 JSON Hero ? JSON Hero 是一个简单实用的 JSON 工具,通过简介美观的 UI 及增强的额外功能,使得阅读和理解 JSON 文档变得更容易、直观。 主要功能 支持多种视图以便查看 JSON:列视图…...
P6入门:项目初始化7-项目详情之代码/分类码Code
前言 使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等&…...
跨国企业如何选择安全靠谱的跨国传输文件软件?
随着全球化的不断发展,跨国企业之间的合作变得越来越频繁。而在这种合作中,如何安全、可靠地将文件传输给合作伙伴或客户,成为了跨国企业必须面对的问题。 然而,跨国文件传输并不是一件容易的事情,由于网络物理条件的…...
Command Injection
Command Injection "Command Injection"(命令注入),其目标是通过一个应用程序在主机操作系统上执行任意命令。当一个应用程序将用户提供的数据(如表单、cookies、HTTP头等)传递给系统shell时,就可能发生命令注入攻击。在…...
LeetCode | 20. 有效的括号
LeetCode | 20. 有效的括号 OJ链接 这道题可以使用栈来解决问题~~ 思路: 首先我们要使用我们之前写的栈的实现来解决此问题~~如果左括号,就入栈如果右括号,出栈顶的左括号跟右括号判断是否匹配 如果匹配,继续如果不匹配&#…...
英语语法 - 祈使句 | 虚拟语气
目录 [ 祈使句 ] 1. [ 及物动词原形 宾语 (状语) | 不及物动词原形 (状语) | be 表语 (状语) ] 2. [ Dont 及物动词原形 宾语 | dont 不及物动词原形 ] 3. [ dont be 表语 ] 4. 特殊 you [ 虚拟语气 ] 1. [ 条件状语从句 - 虚拟语气 ] 现在时态虚拟语气 将来…...
记录pytorch实现自定义算子并转onnx文件输出
概览:记录了如何自定义一个算子,实现pytorch注册,通过C编译为库文件供python端调用,并转为onnx文件输出 整体大概流程: 定义算子实现为torch的C版本文件注册算子编译算子生成库文件调用自定义算子 一、编译环境准备…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
Python常用模块:time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...
高效的后台管理系统——可进行二次开发
随着互联网技术的迅猛发展,企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心,成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统,它不仅支持跨平台应用,还能提供丰富…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么? 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元(地址),其核心含义与能力如下: 1. 核心定义 地址位宽:CPU或内存控制器用32位…...
