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

文章目录


文字对齐方式

  • 水平对齐方式
css 复制代码
text-align: center;
  • 垂直对齐方式
css 复制代码
/* 注意,这个只能是一行来居中 */
line-height:/*长度*/ ;
  • 样例
html 复制代码
<!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-内容 像素
html 复制代码
<!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-内容 像素

例子:

html 复制代码
<!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>
  • 如果上下左右都要内边距的话
css 复制代码
padding 像素
css 复制代码
.c2{
            width: 60px;
            height: 60px;
            border: 1px solid red;
            padding: 50px;
        }

或者

css 复制代码
/* 按照上右下左的顺序给你安排 */
.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】

相关推荐
小豆包api10 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
计算机毕业设计木哥10 小时前
计算机毕设选题:基于Python+Django的B站数据分析系统的设计与实现【源码+文档+调试】
java·开发语言·后端·python·spark·django·课程设计
计算机小手10 小时前
AI 驱动数据分析:开源 SQLBot 项目探索,基于大模型和 RAG 实现精准问数与图表挖掘
经验分享·docker·开源软件
布列瑟农的星空10 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天10 小时前
Vue3 实现 B站 视差 动画
前端
KenXu10 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮10 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界10 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说10 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
小鱼儿亮亮10 小时前
使用Redux的combineReducers对数据拆分
前端·react.js