当前位置： 首页 > news >正文

django学习入门系列之第三点《CSS基础样式介绍2》

news 2026/5/19 19:33:16

文章目录

  • 文字对齐方式
  • 外边距
  • 内边距
  • 往期回顾

文字对齐方式

  • 水平对齐方式
text-align: center;
  • 垂直对齐方式
/* 注意，这个只能是一行来居中 */
line-height:/*长度*/ ;
  • 样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c1{height: 100px;width: 100px;border : 1px solid red;text-align: center;line-height: 100px;}</style>
</head>
<body><div class="c1">中国</div>
</body>
</html>

外边距

  • 简单设置外部的距离
    • 我与别人有距离
    • 设置语法margin-内容 像素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{width: 60px;height: 60px;border: 1px solid red;padding: 20px 10px 30px 40px;margin-top: 50px;}</style>
</head>
<body>
<div class="c2"></div>
<div class="c2"></div>
</body>
</html>

在这里插入图片描述

内边距

  • 简单来说就是自己的内部可以设置一点距离（空出多少边距）
    • 我自己内部有距离
    • 设置语法padding-内容 像素

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{width: 60px;height: 60px;border: 1px solid red;padding-top: 50px;padding-left: 50px;padding-right: 50px;}</style>
</head>
<body>
<div class="c2"><div style="background-color: hotpink">text</div>
</div>
</body>
</html>

在这里插入图片描述

  • 如果上下左右都要内边距的话
padding 像素

.c2{width: 60px;height: 60px;border: 1px solid red;padding: 50px;}

或者

/* 按照上右下左的顺序给你安排 */
.c2{width: 60px;height: 60px;border: 1px solid red;padding: 20px 10px 30px 40px;}

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】

相关文章：

django学习入门系列之第三点《CSS基础样式介绍2》

文章目录 文字对齐方式外边距内边距往期回顾 文字对齐方式 水平对齐方式 text-align: center;垂直对齐方式 /* 注意&#xff0c;这个只能是一行来居中 */ line-height:/*长度*/ ;样例 <!DOCTYPE html> <html lang"en"> <head><meta charset…...

编程日记 2024/6/22 8:32:52

分布式光纤测温DTS在工程现场中稳定性与可靠性如何？

20年前&#xff0c;分布式光纤测温(Distributed Temperature Sensing&#xff0c;DTS)技术的发展尚不成熟&#xff0c;设备成本高昂&#xff0c;其稳定性与可靠性也存在一定问题。然而&#xff0c;经过二十多年的不断发展与创新&#xff0c;DTS技术在工程现场应用中取得了显著进…...

编程日记 2024/6/22 8:31:50

PHP多线程模块parallel的编译安装和多线程编程演示

从PHP7开始&#xff0c;多线程编原有的pthreads已经不在维护&#xff0c;而是使用parallel替代。 由于是新的模块&#xff0c;样例代码很少&#xff0c;这里总结一个简单的代码和详细的备注供大家参考。 编译和安装 parallel需要启用ZTS&#xff08;Zend Thread Safety&…...

编程日记 2024/6/22 8:29:48

记录grid布局属性

grid布局 分为容器和项目元素 容器属性 #container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* …...

编程日记 2024/6/22 8:28:47

12.爬虫---PyMysql安装与使用

12.PyMysql安装与使用 1.安装 PyMySQL2.使用PyMySQL2.1创建数据表2.2连接数据库2.3增加数据2.4修改数据2.5查询数据2.6删除数据2.7关闭连接 3.总结 MySQL 安装可以看这篇文章MySql 安装与使用&#xff08;非常详细&#xff09; 1.安装 PyMySQL PyMySQL是Python中用于连接MySQL…...

编程日记 2024/6/22 8:26:45

VS2022遇到的两个问题

问题一&#xff1a;找不到定义的头文件 别的博主说是&#xff1a;在属性页里面进行改写&#xff0c;改成是&#xff0c;我试过之后并不行&#xff1b; 解决思路&#xff1a;但其实在右边视图里面找到你自己定义的头文件加到你运行文件中就行&#xff1b;因为程序就只有一个入口…...

编程日记 2024/6/22 8:24:43

【Android14 ShellTransitions】（六）SyncGroup完成

这一节的内容在WMCore中&#xff0c;回想我们的场景&#xff0c;是在Launcher启动某一个App&#xff0c;那么参与动画的就是该App对应Task&#xff08;OPEN&#xff09;&#xff0c;以及Launcher App对应的Task&#xff08;TO_BACK&#xff09;。在确定了动画的参与者后&#x…...

编程日记 2024/6/22 8:20:39

技术管理转型之战：决策之道-管理中的智慧与策略

文章目录 引言一、决策的重要性二、常见的决策方式1. 理性决策&#xff08;Rational Decision Making&#xff09;2. 有限理性&#xff08;Bounded Rationality&#xff09;3. 直觉决策&#xff08;Intuitive Decision Making&#xff09;4. 循证管理&#xff08;Evidence-Base…...

编程日记 2024/6/22 8:19:38

Shell脚本：条件语句（if、case）

目录 硬编码 硬编码的缺点 条件判断 $? 命令行语句 判断指定目录是否存在 判断指定文件是否存在 判断指定对象是否存在 表达式形式语句 判断对象是否存在 判断对象是否有权限 与、或、非 运算 与运算 或运算 非运算 比较大小 判断磁盘利用率实验步骤 字符串…...

编程日记 2024/6/22 8:18:35

在Linux上为Windows目标配置Qt交叉编译

问题描述 我想使用Linux x86_64主机为Windows x86_64目标交叉编译Qt库&#xff08;最终也包括我的应用程序&#xff09;。我觉得自己已经接近成功了&#xff0c;但可能对整个过程有一些基本的误解。 我从在我的Fedora机器上安装所有mingw包开始&#xff0c;并修改了win32-g的…...

编程日记 2024/6/22 8:17:34

Introduction to linear optimization 第 2 章课后题答案 11-15

线性规划导论 Introduction to linear optimization (Dimitris Bertsimas and John N. Tsitsiklis, Athena Scientific, 1997)&#xff0c; 这本书的课后题答案我整理成了一个 Jupyter book&#xff0c;发布在网址&#xff1a; https://robinchen121.github.io/manual-introdu…...

编程日记 2024/6/22 8:16:33

Java——包

一、包 1、简要介绍 在Java编程语言中&#xff0c;包&#xff08;Package&#xff09; 是一种用来组织和管理类&#xff08;Class&#xff09;和接口&#xff08;Interface&#xff09;的机制。包为开发者提供了一种逻辑分组的方式&#xff0c;使代码更加模块化、结构化和易于…...

编程日记 2024/6/22 8:12:29

Pipeline知识小记

在scikit-learn&#xff08;通常缩写为sklearn&#xff09;中&#xff0c;Pipeline是一个非常重要的工具&#xff0c;它允许你将多个数据转换步骤&#xff08;如特征选择、缩放等&#xff09;和估计器&#xff08;如分类器、回归器等&#xff09;组合成一个单一的估计器对象。这…...

编程日记 2024/6/22 8:11:28

postman国内外竞争者及使用详解分析

一、postman简介 Postman 是一款广泛使用的 API 开发和测试工具&#xff0c;适用于开发人员和测试人员。它提供了一个直观的界面&#xff0c;用于发送 HTTP 请求、查看响应、创建和管理 API 测试用例&#xff0c;以及自动化 API 测试工作流程。以下是 Postman 的主要功能和特点…...

编程日记 2024/6/22 8:09:26

人工智能对决：ChatGLM与ChatGPT，探索发展历程

图: a robot is writing code on a horse, By 禅与计算机程序设计艺术 目录 ChatGLM:...

编程日记 2024/6/22 8:05:22

探索Python元类的奥秘及其应用场景

探索Python元类的奥秘及其应用场景 一、引言 在Python中&#xff0c;元类&#xff08;Metaclasses&#xff09;是一个相对高级且容易被忽视的主题。然而&#xff0c;对于深入理解Python的面向对象编程模型以及进行高级框架和库的设计来说&#xff0c;元类是一个不可或缺的工具…...

编程日记 2024/6/22 8:04:20

C语言基础关键字的含义和使用方法

​关键字在C语言中扮演着非常重要的角色&#xff0c;它们定义了语言的基本构造和语法规则&#xff0c;通过使用关键字&#xff0c;开发者可以创建变量、定义数据类型、控制程序流程&#xff08;如循环和条件判断&#xff09;、声明函数等。由于这些字是保留的&#xff0c;所以编…...

编程日记 2024/6/22 8:03:18

【Golang - 90天从新手到大师】Day09 - string

系列文章合集 Golang - 90天从新手到大师 String 一个字符串是一个不可改变的字节序列。字符串可以包含任意的数据&#xff0c;但是通常是用来包含人类可读的文本。 len()返回字符串字节数目&#xff08;不是rune数&#xff09;。 通过索引可以访问某个字节值&#xff0c;0…...

编程日记 2024/6/22 8:01:16

网络安全与区块链技术：信任与安全的融合

# 网络安全与区块链技术&#xff1a;信任与安全的融合 在网络空间&#xff0c;信任是一种宝贵而稀缺的资源。区块链技术以其独特的分布式账本、加密算法和共识机制&#xff0c;为构建网络安全提供了新的解决方案。本文将探讨网络安全与区块链技术如何融合&#xff0c;以增强信…...

编程日记 2024/6/22 8:00:15

MySQL之复制(九)

复制 复制管理和维护 确定主备是否一致 在理想情况下&#xff0c;备库和主库的数据应该是完全一样的。但事实上备库可能发生错误并导致数据不一致。即使没有明显的错误&#xff0c;备库同样可能因为MySQL自身的特性导致数据不一致&#xff0c;例如MySQL的Bug、网络中断、服务…...

编程日记 2024/6/22 7:58:13

如何高效下载B站视频：BiliDownloader终极使用教程

如何高效下载B站视频&#xff1a;BiliDownloader终极使用教程 【免费下载链接】BiliDownloader BiliDownloader是一款界面精简&#xff0c;操作简单且高速下载的b站下载器 项目地址: https://gitcode.com/gh_mirrors/bi/BiliDownloader 想要轻松保存B站上的精彩视频内容…...

编程新知 2026/5/19 18:39:00

AI技术岗机器学习工程师要晋升CTO需要经历哪些职位？各职位年限和薪资？

从机器学习工程师 → CTO 的标准晋升链&#xff0c;含每级任职年限 2026 年真实年薪区间&#xff08;含期权 / 签字费&#xff0c;北上深 AI 大厂 / 独角兽口径&#xff09;。 一、初级阶段&#xff08;纯技术&#xff0c;0–5 年&#xff09; 1&#xff09;机器学习工程师&…...

编程新知 2026/5/19 18:19:36

如何快速掌握大众点评爬虫：解决动态字体加密的终极实战指南

如何快速掌握大众点评爬虫&#xff1a;解决动态字体加密的终极实战指南 【免费下载链接】dianping_spider 大众点评爬虫&#xff08;全站可爬&#xff0c;解决动态字体加密&#xff0c;非OCR&#xff09;。持续更新 项目地址: https://gitcode.com/gh_mirrors/di/dianping_sp…...

编程新知 2026/5/19 18:19:36

MFC老树开新花：手把手教你用CMake配置动态/静态链接库并解决中文编码问题

MFC老树开新花&#xff1a;手把手教你用CMake配置动态/静态链接库并解决中文编码问题 在Windows桌面开发领域&#xff0c;MFC&#xff08;Microsoft Foundation Classes&#xff09;作为微软经典的C框架&#xff0c;虽然常被调侃为"老古董"&#xff0c;但在维护遗留系…...

编程新知 2026/5/19 17:14:14

MPC-BE：Windows平台终极开源多媒体播放器架构深度解析与实战指南

MPC-BE&#xff1a;Windows平台终极开源多媒体播放器架构深度解析与实战指南 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项…...

编程新知 2026/5/19 15:07:51

如何高效掌握FDS：开源火灾模拟的完整实战指南

如何高效掌握FDS&#xff1a;开源火灾模拟的完整实战指南 【免费下载链接】fds Fire Dynamics Simulator 项目地址: https://gitcode.com/gh_mirrors/fd/fds Fire Dynamics Simulator&#xff08;FDS&#xff09;是美国国家标准与技术研究院开发的权威火灾动力学模拟软件…...

编程新知 2026/5/19 14:25:13

Pandas 数据清洗与分析

第一部分&#xff1a;水果销售分析&#xff08;入门篇&#xff09;首先&#xff0c;我们有一个简单的水果销售列表。我们的任务是算出每种水果的总销量&#xff0c;以及每天的销售明细。1. 数据准备我们先造一点数据&#xff1a;import pandas as pd import numpy as npdata {…...

编程新知 2026/5/19 14:18:47

3个神奇步骤：用QRazyBox轻松修复任何损坏的二维码

3个神奇步骤&#xff1a;用QRazyBox轻松修复任何损坏的二维码 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 你是否曾经遇到过这种情况&#xff1a;一张重要的二维码因为打印模糊、表面划伤或…...

编程新知 2026/5/19 13:23:43

Perplexity接入知网文献搜索的5大避坑指南：实测发现92%研究者正在浪费87%检索时间

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Perplexity接入知网文献搜索的底层逻辑与认知重构 Perplexity 作为基于大语言模型的实时问答引擎&#xff0c;其核心能力并非仅依赖于内部参数化知识&#xff0c;而是通过动态检索增强生成&#xff08;…...

编程新知 2026/5/19 13:00:29

HPM6750 RISC-V高性能MCU开发实战：从双核应用到图形加速

1. 项目概述与核心价值最近几年&#xff0c;RISC-V架构在嵌入式领域的声量越来越大&#xff0c;从最初的学术研究到如今在工业控制、边缘计算等场景的落地&#xff0c;生态的成熟度肉眼可见。作为一名长期混迹在嵌入式开发一线的工程师&#xff0c;我对于新架构、新平台总是抱有…...

编程新知 2026/5/19 11:50:54