CSS笔记(一)炉石传说卡牌设计1

目标

我要通过html实现一张炉石传说的卡牌设计

问题

其中必须就要考虑到各个元素的摆放,形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。

1️⃣ 基本概念

在CSS里面有行元素,块元素,内联元素,常见的行元素有buttoninput等,块级元素有divh1p等,内联元素有span

  • 行元素:多个行元素放在一起会自动排成一行,不会垂直排列。且行元素不能设置widthheight
  • 块元素:独占一行,可以设置 width, height, margin, 和 padding
  • 内联元素:可以与其他元素在一行显示,也能设置widthheight

可以通过设置style = "display:inline" 来改变某个元素的显示方式,例如:

<div style="display: inline;">这是行内显示的内容</div>
<div style="display: inline;">这是另一个行内内容</div>

该代码就把块级元素的显示方式改成了行元素显示方式。

  • inline:行元素
  • block:块元素
  • inline-block:内联元素
  • none:不设置

2️⃣ flex

flex就是用来对容器内的元素进行对齐排列的
语法说明:

  • dispaly:flex
  • flex-direction
    • row将内部元素横向排列
      哈哈哈

    • column将内部元素纵向排列
      在这里插入图片描述

  • justify-content:垂直排列
  • align-items:水平排列

justify-content参数

首先我们要知道主轴方向,flex-direction:row的主轴方向是从左到右,flex-direction:column的主轴方向是从上到下。当然我们也可以让主轴方向从右到左,例如row-reverse

  • flex-end
    在这里插入图片描述
    这里主轴方向是column从上到下,而flex-end表示靠着底部排列元素
    我们把主轴方向改成row看看有什么不同在这里插入图片描述
    显然内部元素贴着右边排列有点像右对齐的感觉,但是这里我们发现内部元素被拉伸到和容器的高度一致。原因是我们没有设置align-items,如果我们设置该参数则
    在这里插入图片描述
    其根本原因是align-items如果不被设置,则它的默认值就是stretch,它的作用就是把元素拉伸跟容器一样的属性。
  • space-between:子元素之间的空间平均分布
  • space-around:每个子元素周围的间距相等,两侧分配的间距是子元素间距的一半。
  • space-evenly:子元素之间的空间和子元素到容器边缘的空间都均匀分布

flex-wrap:wrap

  • 子元素在容器空间不足时换行。
  • 新行的排列方向与主轴方向一致(从左到右或从上到下)。
    一般默认是nowrap即容器空间不足也不换行如下:在这里插入图片描述
    这样十分拥挤,也会让元素丧失原本的长宽属性,如果改成wrap即十分美观:
    在这里插入图片描述

3️⃣ 居中显示

<style>body{width:200px;height:300px;position:relative;}//水平居中显示.box1{position:absolute;top:5px;left:50%;//偏移到容器的对称轴transform:translateX(-50%)//让图片的对称轴和容器的对称轴重合}//垂直居中显示.box2{position:absolute;top:50%;//偏移到容器的对称轴transform:translateY(-50%)//让图片的对称轴和容器的对称轴重合}
</style>

4️⃣ transform

在我要插入一张图片到左上角的时候,我得到了以下的知识

	<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1)  // 缩小十倍</style>

其次transform属性会被覆盖,如果我要让一张缩小10倍后的图片居中我需要把缩小和坐标偏移写在一起。

	<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1) translateX(-50%) // 把两句写在一起,不然两句只能生效一句</style>

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

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

相关文章

文本搜索程序(Qt)

头文件 #ifndef TEXTFINDER_H #define TEXTFINDER_H#include <QWidget> #include <QFileDialog> #include <QFile> #include <QTextEdit> #include <QLineEdit> #include <QTextStream> #include <QPushButton> #include <QMess…

GAMES101:现代计算机图形学入门-笔记-09

久违的101图形学回归咯 今天的话题应该是比较轻松的&#xff1a;聊一聊在渲染中比较先进的topics Advanced Light Transport 首先是介绍一系列比较先进的光线传播方法&#xff0c;有无偏的如BDPT&#xff08;双向路径追踪&#xff09;&#xff0c;MLT&#xff08;梅特罗波利斯…

【C++篇】排队的艺术:用生活场景讲解优先级队列的实现

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

【unity】WebSocket 与 EventSource 的区别

WebSocket 也是一种很好的选择&#xff0c;尤其是在需要进行 双向实时通信&#xff08;例如聊天应用、实时数据流等&#xff09;时。与 EventSource 不同&#xff0c;WebSocket 允许客户端和服务器之间建立一个持久的、全双工的通信通道。两者的区别和适用场景如下&#xff1a;…

Oracle 数据库 IDENTITY 列

IDENTITY列是Oracle数据库12c推出的新特性。之所以叫IDENTITY列&#xff0c;是由于其支持ANSI SQL 关键字 IDENTITY&#xff0c;其内部实现还是使用SEQUENCE。 不过推出这个新语法也是应该的&#xff0c;毕竟MyQL已经有 AUTO_INCREMENT列&#xff0c;而SQL Server也已经有IDENT…

前端学习笔记之文件下载(1.0)

因为要用到这样一个场景&#xff0c;需要下载系统的使用教程&#xff0c;所以在前端项目中就提供了一个能够下载系统教程的一个按钮&#xff0c;供使用者进行下载。 所以就试着写一下这个功能&#xff0c;以一个demo的形式进行演示&#xff0c;在学习的过程中也发现了中文路径…

【阅读记录-章节4】Build a Large Language Model (From Scratch)

文章目录 4. Implementing a GPT model from scratch to generate text4.1 Coding an LLM architecture4.1.1 配置小型 GPT-2 模型4.1.2 DummyGPTModel代码示例4.1.3 准备输入数据并初始化 GPT 模型4.1.4 初始化并运行 GPT 模型 4.2 Normalizing activations with layer normal…

浅谈——深度学习和马尔可夫决策过程

深度学习是一种机器学习方法&#xff0c;它通过模拟大脑的神经网络来进行数据分析和预测。它由多层“神经元”组成&#xff0c;每一层从数据中提取出不同的特征。多层次的结构使得深度学习模型可以捕捉到数据中的复杂关系&#xff0c;特别适合处理图片、语音等复杂数据。 马尔可…

Python PDF转JPG图片小工具

Python PDF转JPG图片小工具 1.简介 将单个pdf装换成jpg格式图片 Tip: 1、软件窗口默认最前端&#xff0c;不支持调整窗口大小&#xff1b; 2、可通过按钮选择PDF文件&#xff0c;也可以直接拖拽文件到窗口&#xff1b; 3、转换质量有5个档位&#xff0c;&#xff08;0.25&a…

「qt交叉编译arm64」支持xcb、X11

完整的交叉编译好支持xcb的qt库&#xff08;qt5.15.2、arm64、xcb、no-opengl&#xff09; 已安装xcb、X11库的交叉编译器&#xff08;x86_64-aarch64-linux-gnu&#xff09; 文章目录 1. 修改qmake.conf&#xff0c;指定交叉编译器2. 配置编译选项&#xff0c;执行configureL…

使用SOAtest进行功能回归测试

持续集成是将所有开发人员的工作副本合并到共享的主线上。这个过程使软件开发对开发人员来说更容易访问、更快、风险更小。 阅读这篇文章&#xff0c;让我们了解如何配置Parasoft SOAtest作为持续集成过程的一部分&#xff0c;来执行功能测试和回归测试。我们将介绍如何使用主…

ais_server 学习笔记

ais_server 学习笔记 一前序二、ais init1、时序图如下2. 初始化一共分为以下几个重要步骤&#xff1a;2.1.1、在ais_server中启动main函数&#xff0c;然后创建AisEngine&#xff0c;接着初始化AisEngine2.1.2、解析/var/camera_config.xml 文件&#xff0c;获取相关配置参数。…

L1G3000 任务-浦语提示词工程

基础任务 (完成此任务即完成闯关) 背景问题&#xff1a;近期相关研究指出&#xff0c;在处理特定文本分析任务时&#xff0c;语言模型的表现有时会遇到挑战&#xff0c;例如在分析单词内部的具体字母数量时可能会出现错误。任务要求&#xff1a;利用对提示词的精确设计&#xf…

Unity之一键创建自定义Package包

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity之一键创建自定义Package包 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; …

Redis开发04:Redis的INFO信息解析

命令解释redis_versionRedis 的版本号&#xff0c;这里是 3.2.100。redis_git_sha1Redis 使用的 Git SHA1 校验值&#xff0c;表示当前代码的版本。redis_git_dirty如果 Redis 当前运行的代码是脏版本&#xff08;未提交的修改&#xff09;&#xff0c;该值为 1&#xff0c;否则…

python的Flask框架使用

python的Flask框架使用 python环境搭建conda安装python自带的虚拟环境&#xff1a;venv python环境搭建 官网地址 点击downloads 选择你需要的版本&#xff0c;我这里使用的3.12.6 选择Windows installer (64-bit) 选择自定义安装&#xff0c;勾选以管理员权限安装&#xff0…

网络原理(一)—— http

什么是 http http 是一个应用层协议&#xff0c;全称为“超文本传输协议”。 http 自 1991 年诞生&#xff0c;目前已经发展为最主流使用的一种应用层协议。 HTTP 往往基于传输层的 TCP 协议实现的&#xff0c;例如 http1.0&#xff0c;http1.0&#xff0c;http2.0 http3 是…

CTF之密码学(Polybius密码)

棋盘密码&#xff0c;也称为Polybius密码或方格密码&#xff0c;是一种基于替换的加密方法。以下是对棋盘密码的详细解析&#xff1a; 一、加密原理 棋盘密码使用一个5x5的方格棋盘&#xff0c;其中填充了26个英文字母&#xff08;通常i和j被视为同一个字母并放在同一个格子中…

二刷代码随想录第16天

513. 找树左下角的值 找到深度最大的点&#xff0c;遍历方式左边节点在右边节点前面&#xff0c;找到就返回&#xff0c;一定就是最左下角的值了 class Solution { public:int max_depth -1;int result 0;int findBottomLeftValue(TreeNode* root) {traversal(root, 0);ret…

Dockerfile docker-compose

1、Dockerfile # 使用官方的Python作为基础镜像 FROM python:3.9 # 设置工作目录 WORKDIR /app # 复制当前目录下的所有文件到容器的工作目录中 COPY . /app # 安装所需的Python库 #RUN pip install --no-cache-dir -r requirements.txt # 复制 requirements.txt 并安装依赖…