0x01 html和css

news2025/2/27 6:10:24

css

对于三种css使用方式：

第一种：行内样式

<span style="color: grey;">2024年05月15日 20:07</span>

第二种：内部样式

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <style>
    span{
      color: grey;
    }
  </style>
  ...
</head>
<body>
  <span>2024年05月15日 20:07</span>
</body>
</html>

第三种：外部样式

html代码部分，用link标签引入css文件，后面可以在body部分使用

<head>
  ...
  <link rel="stylesheet" href="./css/new.css">
</head>
<body>
  <span>2024年05月15日 20:07</span>
</body>

css代码部分

span {
    color: gray;
}

注意第三种方式css代码每个选择器之间不能有分号，也就是下面代码种span元素选择器和a元素选择器之间没有分号

span {
    color: rgb(178, 178, 178);
}
a {
  text-decoration: none;
}

三种方式在代码复用性方面来说，外部样式>内部样式>行内样式。

css选择器

元素选择器：选择页面上的标签

h1{...}

类选择器：选择页面上某一class的内容

.cls{...}

id选择器：选择页面上某一id属性的内容

#hid{...}

三类选择器的优先级，id选择器>类选择器>元素选择器

盒子模型

盒子模型的组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

1740528714257.png

盒子模型通常方便我们布局，有两个经常使用的标签，一个是div，一个是span

  • div
    • 独占一行
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（默认定义的是content的高度和宽度）
  • span
    • 一行可以显示多个
    • 宽度高度默认由内容撑开
    • 不可以设置宽高
div {
    width: 200px;
    height: 100px;
    background-color: #05a5d2;
    padding: 20px 20px 20px 20px;
    border: 20px solid #6bd5d7;
    margin: 30px 30px 30px 30px;
}

上面四个边框：顺序是上右下左（顺时针），也可以设置为两个，也可以设置为一个

margin：可以设置为auto，可以使盒子居中

#div1 {
      width: 400px;
      height: 300px;
      background-color: #ffff00;
      padding: 30px;
      box-sizing: border-box;
      border: 10px solid #ff0000;
      margin: 30px auto;
    }

flex布局

flex是一种用于按行或按列布局元素的一维布局方法。

存在即合理，flex是为了解决布局问题而存在的工具，flex能实现水平/垂直居中，自动分配子元素的对齐和居中，支持动态调整子元素，代码简洁。

flex中的两大重要概念：Flex容器、Flex项目

Flex容器：通过display:flex来声明，控制其内部子元素（flex项目）的排列方式

Flex项目：容器中的子元素自动成为flex项目，可以通过属性单独控制一个项目

<!-- 示例：外层 div 是容器，内部的 a 和 button 是项目 -->
<div class="container"> <!-- Flex 容器 -->
  <a href="#">链接</a>  <!-- Flex 项目 -->
  <button>按钮</button> <!-- Flex 项目 -->
</div>

flex容器核心属性：

  1. 主轴方向flex-direction
.container {
  flex-direction: row;       /* 默认→ 左到右 */
  flex-direction: row-reverse; /* ←右到左 */
  flex-direction: column;     /* ↓ 上到下 */
  flex-direction: column-reverse; /* ↑ 下到上 */
}
  1. 主轴对齐justify-content
.container {
  justify-content: flex-start;  /* 左对齐（默认） */
  justify-content: flex-end;    /* 右对齐 */
  justify-content: center;      /* 居中 */
  justify-content: space-between; /* 两端对齐，项目间隔相等 */
  justify-content: space-around;  /* 项目两侧间隔相等 */
}
  1. 换行方式
.container {
  flex-wrap: nowrap; /* 默认：不换行，压缩子元素宽度 */
  flex-wrap: wrap;   /* 换行：从上到下排列 */
  flex-wrap: wrap-reverse; /* 换行：从下到上 */
}

1740581849125.png

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

excel单、双字节字符转换函数（中英文输入法符号转换）

excel单、双字节字符转换函数（中英文输入法符号转换）

在Excel中通常使用函数WIDECHAR和ASC来实现单、双字节字符之间的转换。其中 WIDECHAR函数将所有的字符转换为双字节&#xff0c;ASC函数将所有的字符转换为单字节 首先来解释一下单双字节的含义。单字节一般对应英文输入法的输入&#xff0c;如英文字母&#xff0c;英文输入法…
阅读更多...
如何看待 Kaiming He 最新提出的 Fractal Generative Models ？

如何看待 Kaiming He 最新提出的 Fractal Generative Models ？

何恺明团队提出的分形生成模型（Fractal Generative Models） 引发了广泛关注，其核心思想是通过递归调用生成模型模块构建自相似结构，类似数学中的分形概念（如雪花结构），从而高效生成高分辨率数据（如图像）。 Fractal Generative Models即分形生成模型，是一种新型的生成…
阅读更多...
AOP进阶-04.切入点表达式-@annotation

AOP进阶-04.切入点表达式-@annotation

一.annotation注解 我们在最后一个切入点表达式中要匹配多个无规则的方法&#xff0c;这样的写法有些冗余了。而annotation注解就是来解决这一问题的。 annotation注解使用特定的注解来匹配方法。我们首先自定义一个注解&#xff0c;该注解就相当于一个标签&#xff0c;目标对…
阅读更多...
C高级（shell）

C高级（shell）

思维导图
阅读更多...
Ubuntu20.04之VNC的安装使用与常见问题

Ubuntu20.04之VNC的安装使用与常见问题

Ubuntu20.04之VNC的安装与使用 安装图形桌面选择安装gnome桌面选择安装xface桌面 VNC-Server安装配置开机自启 VNC Clientroot用户无法登入问题临时方案永久方案 安装图形桌面 Ubuntu20.04主流的图形桌面有gnome和xface两种&#xff0c;两种桌面的安装方式我都会写&#xff0c…
阅读更多...
Python 科学计算

Python 科学计算

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…
阅读更多...
2024中国信通院“集智”蓝皮书合集（附下载）

2024中国信通院“集智”蓝皮书合集（附下载）

【目 录】 1. 数字政府一体化建设蓝皮书&#xff08;2024年&#xff09; 2. 数字乡村发展实践蓝皮书&#xff08;2023年&#xff09; 3. 中国工业互联网发展成效评估报告&#xff08;2024年&#xff09; 4. 云计算蓝皮书&#xff08;2024年&#xff09; 5. 具身智能发展报告…
阅读更多...
nvm 1.2.2 报错解决方法 The system cannot find the file specified.

nvm 1.2.2 报错解决方法 The system cannot find the file specified.

安装了最新版本nvn1.2.2后&#xff0c;安装老版本node时报错&#xff08;安装新版本没问题&#xff09;&#xff0c;报错内容如下&#xff1a; error installing 14.16.0: open C:\Users\admin\AppData\Local\Temp\nvm-npm-430098699\npm-v6.14.11.zip: The system cannot fin…
阅读更多...
OpenEuler学习笔记（三十五）：搭建代码托管服务器

OpenEuler学习笔记（三十五）：搭建代码托管服务器

以下是主流的代码托管软件分类及推荐&#xff0c;涵盖自托管和云端方案&#xff0c;您可根据团队规模、功能需求及资源情况选择&#xff1a; 一、自托管代码托管平台&#xff08;可私有部署&#xff09; 1. GitLab 简介: 功能全面的 DevOps 平台&#xff0c;支持代码托管、C…
阅读更多...
平台设备驱动之gpio子系统（写驱动实现在/sys/...目录下用echo命令点灯）

平台设备驱动之gpio子系统（写驱动实现在/sys/...目录下用echo命令点灯）

1、 关键函数&#xff08;include/linux 及 driver目录下&#xff09; ​ module_platform_driver(leds_drv); //平台设备驱动入口//获取匹配成功后设备树节点中的 property ​ of_get_named_gpio_flags(node, "led_gpio", 0, &flags); //在/sys/目录下创建文…
阅读更多...
JavaScript将:；隔开的字符串转换为json格式。使用正则表达式匹配键值对，并构建对象。多用于解析cssText为style Object对象

JavaScript将:；隔开的字符串转换为json格式。使用正则表达式匹配键值对，并构建对象。多用于解析cssText为style Object对象

// 使用正则表达式匹配键值对&#xff0c;并构建对象 let string2Json(s)>{const r {};s.replace(/&#xff1b;/g, ;).replace(/\;/g, \n).replace(/&#xff1a;/g, :).replace(/\n/g, \n)//合并多个换行符.split(\n).forEach(item > {const [k, v] item.split(:);(k…
阅读更多...
2025年追觅科技社招校招入职测评北森题库商业推理测试内容与技巧

2025年追觅科技社招校招入职测评北森题库商业推理测试内容与技巧

在追觅科技的招聘流程中&#xff0c;无论是校园招聘还是社会招聘&#xff0c;应聘者都需要通过北森测评题库的商业推理部分。这部分的测评旨在评估应聘者的商业推理能力&#xff0c;是评估考生综合能力的重要工具。考试时间为40分钟&#xff0c;需要完成28题&#xff0c;题型以…
阅读更多...
【工具变量】公司企业数字领导力（2004-2023年）

【工具变量】公司企业数字领导力（2004-2023年）

数据简介&#xff1a;企业数字化领导力是指在数字经济时代&#xff0c;领导者通过战略性地使用数字资产、引领组织变革&#xff0c;使企业在数字化环境中获得持续成功的能力。对于上市公司而言&#xff0c;这种领导力尤为重要&#xff0c;因为它直接关系到企业的战略方向、市场…
阅读更多...
【Vue工作原理】VueCli4 模板文件template不存在会生产一个默认文件原理

【Vue工作原理】VueCli4 模板文件template不存在会生产一个默认文件原理

Vue CLI 4 的 HtmlWebpackPlugin 在模板文件缺失时&#xff0c;‌不会中断构建流程‌&#xff0c;而是自动生成一个‌极简 HTML 结构‌&#xff08;DeepSeek回答&#xff09; ‌&#x1f4d8; 官方资料来源解析&#xff08;基于 2025 年存档数据&#xff09;‌ 当前时间&#…
阅读更多...
数据开发的简历及面试

数据开发的简历及面试

简历 个人信息: 邮箱别写QQ邮箱, 写126邮箱/189邮箱等 学历>>本科及以上写,大专及以下不写 专业>>非计算机专业不写 政治面貌>>党员写, 群众不用写 掌握的技能: 精通 > 熟悉 > 了解 专业工具: 大数据相关的 公司: 如果没有可以写的>>金融服…
阅读更多...
如何在docker上部署前端nginx服务（VUE）

如何在docker上部署前端nginx服务（VUE）

目录结构 clean.sh docker stop rszWeb; docker rm rszWeb; start.sh docker run -d \ --name rszWeb \ -p 7084:80 \ -m 500m \ --privileged=true \ --restart=always \ -v /home/rsz/ui/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /home/rsz/ui/logs:/meta/logs \ -v /…
阅读更多...
模型和数据集的平台之在Hugging Face上进行模型下载、上传以及创建专属Space

模型和数据集的平台之在Hugging Face上进行模型下载、上传以及创建专属Space

模型下载 步骤&#xff1a; 注册Hugging Face平台 https://huggingface.co/ 新建一个hf_download_josn.py 文件 touch hf_download_josn.py 编写hf_download_josn.py文件 import os from huggingface_hub import hf_hub_download# 指定模型标识符 repo_id "inter…
阅读更多...
[Web 信息收集] Web 信息收集 — 手动收集 IP 信息

[Web 信息收集] Web 信息收集 — 手动收集 IP 信息

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01&#xff1a;通过 DNS 服务获取域名对应 IP DNS 即域名系统&#xff0c;用于将域名与 IP 地址相互映射&#xff0c;方便用户访问互联网。对于域名到 IP 的转换过程则可以参考下面这篇…
阅读更多...
排序算法（3）：

排序算法（3）：

这是我们的最后一篇排序算法了&#xff0c;也是我们的初阶数据结构的最后一篇了。 我们来看&#xff0c;我们之前已经讲完了插入排序&#xff0c;选择排序&#xff0c;交换排序&#xff0c;我们还剩下最后一个归并排序&#xff0c;我们今天就讲解归并排序&#xff0c;另外我们还…
阅读更多...
TypeScript - 泛型

TypeScript - 泛型

泛型允许在定义函数、类或接口时&#xff0c;使用类型参数来表示未指定的类型&#xff0c;这些参数在具体使用时&#xff0c;才被指定具体的类型&#xff0c;泛型能让同一段代码适用于多种类型&#xff0c;同时仍然保持类型的安全性。 举例&#xff1a;如下代码中 <T> 就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023