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

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

news 2026/3/31 11:15:39

文章目录

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

文字对齐方式

水平对齐方式

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;垂直对齐方式 /* 注意，这个只能是一行来居中 */ line-height:/*长度*/ ;样例 <!DOCTYPE html> <html lang"en"> <head><meta charset…...

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

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

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

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

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

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

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

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 安装与使用（非常详细） 1.安装 PyMySQL PyMySQL是Python中用于连接MySQL…...

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

VS2022遇到的两个问题

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

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

【Android14 ShellTransitions】（六）SyncGroup完成

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

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

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

文章目录引言一、决策的重要性二、常见的决策方式1. 理性决策（Rational Decision Making）2. 有限理性（Bounded Rationality）3. 直觉决策（Intuitive Decision Making）4. 循证管理（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库（最终也包括我的应用程序）。我觉得自己已经接近成功了，但可能对整个过程有一些基本的误解。我从在我的Fedora机器上安装所有mingw包开始，并修改了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)， 这本书的课后题答案我整理成了一个 Jupyter book，发布在网址： https://robinchen121.github.io/manual-introdu…...

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

Java——包

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

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

Pipeline知识小记

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

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

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

一、postman简介 Postman 是一款广泛使用的 API 开发和测试工具，适用于开发人员和测试人员。它提供了一个直观的界面，用于发送 HTTP 请求、查看响应、创建和管理 API 测试用例，以及自动化 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中，元类（Metaclasses）是一个相对高级且容易被忽视的主题。然而，对于深入理解Python的面向对象编程模型以及进行高级框架和库的设计来说，元类是一个不可或缺的工具…...

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

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

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

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

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

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

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

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

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

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

MySQL之复制(九)

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

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

父子进程变量地址相同值却不同？图解Linux写时拷贝与页表机制

父子进程变量地址相同值却不同？图解Linux写时拷贝与页表机制你是否曾在Linux环境下遇到过这样的现象：通过fork()创建的子进程与父进程打印同一个全局变量的地址时，两者的地址值完全相同，但实际读取的变量值却不同？这个…...

编程新知 2026/3/31 10:10:23

MagiskHide Props Config：设备属性管理的3大维度与安全检测绕过全指南

MagiskHide Props Config：设备属性管理的3大维度与安全检测绕过全指南【免费下载链接】MagiskHidePropsConf This tool is now dead... 项目地址: https://gitcode.com/gh_mirrors/ma/MagiskHidePropsConf 一、价值定位：为什么每个root用户都需要…...

编程新知 2026/3/31 10:06:22

s2-proGPU部署方案：多模型共存时s2-pro显存隔离与QoS保障策略

s2-proGPU部署方案：多模型共存时s2-pro显存隔离与QoS保障策略 1. 引言在GPU服务器上同时运行多个AI模型已成为常态，但这也带来了显存资源竞争和性能波动的问题。本文将详细介绍如何在多模型共存环境下，为s2-pro语音合成模型实现显存隔离与…...

编程新知 2026/3/31 9:44:11

抖音批量下载终极指南：3分钟掌握高效无水印下载技巧

抖音批量下载终极指南：3分钟掌握高效无水印下载技巧【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

编程新知 2026/3/31 9:32:07