首页 > 其他分享 >20day-HTML&CSS-1~24

20day-HTML&CSS-1~24

时间：2024-03-31 10:00:32浏览次数：27  
标签：24 标签 元素 HTML 20day 选择器 CSS 属性

1，HTML 定义是什么？

HTML（超文本标记语言，HyperText Markup Language）定义是一种用于创建和设计网页的标准标记语言。它允许使用一系列预定义的标签（比如：段落、列表、表格等）来组织文本、图片、视频等多媒体内容，并用于描述网页的结构和呈现样式。浏览器会根据 HTML 代码来解析和渲染网页，使用户能够在计算机或移动设备上查看和交互。HTML 是万维网的基础技术，与 CSS（层叠样式表）和 JavaScript 等技术一起，构成了现代网页的核心组成部分。

2，HTML 文档的基本结构是什么？

HTML 文档的基本结构包括以下几个主要部分：

  1. 文档类型声明（）：它定义了文档的类型和版本，告诉浏览器如何解释这个 HTML 文档。

  2. <html>标签：这是根元素，包含了整个 HTML 文档的内容。

  3. <head>标签：包含了文档的元数据，如标题、字符编码、样式、脚本等。它不会显示在浏览器的可视内容中，但对于文档的处理和显示非常重要。

    • <title>标签：定义了文档的标题，会显示在浏览器的标签页或窗口上。
    • <meta>标签：定义了文档的一些属性，如字符编码（charset）、网页描述（description）、关键字（keywords）等。
    • <link>标签：用于引入外部样式表（CSS 文件）。
    • <script>标签：用于引入或包含 JavaScript 代码。

  4. <body>标签：包含了浏览器中可显示的实际内容，如文本、图片、链接、表格、表单等。

以下是一个简单的 HTML 文档结构示例：

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页标题</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这里是一段简单的文本。</p>
    <img src="example.jpg" alt="示例图片" />
  </body>
</html>

3，标签按照闭合特征怎么分类？按照换行特征又怎么分类？分别举例

标签按照闭合特征可以分为两类：自闭合标签和双闭合标签。

  1. 自闭合标签：自闭合标签意味着不需要使用另一个闭合标签对其进行关闭。这些标签通常不包含任何内容，而是用于在文档中插入一些特定信息，如元数据、图像或分隔线。HTML5 中，常见的自闭合标签有：<meta />（用于插入元数据）、<link />（用于加载外部资源,如 CSS）、<img />（用于插入图像）、<br />（插入换行符）、<input />（用于输入框）等。

例如：

<!-- 插入一张图片 -->
<img src="myimage.jpg" alt="My Image" />

<!-- 插入一个换行 -->
<br />

<!-- 加载一个外部CSS样式表 -->
<link rel="stylesheet" href="styles.css" />
  1. 双闭合标签：双闭合标签有一对开放和关闭的标签，在这些标签之间包含内容，通常用于定义文本、容器或其他可显示元素。
    常见的双闭合标签包括：
<html></html>（用于定义 HTML 文档的整体结构）、
<body></body>（用于定义 HTML 文档的主体内容部分）、
<p></p>（定义文本段落）、
<div></div>（用于定义一个区域容器或分隔符）、
<h1></h1>～<h6></h6>（用于定义 HTML 页面中的标题）、
<a></a>（用于创建链接）等。

例如：

<!-- 设置一个标题 -->
<h1>这是一个标题</h1>

<!-- 定义一个段落 -->
<p>这是一个段落</p>

<!-- 创建一个链接 -->
<a href="https://www.example.com">点击访问</a>

按照换行特征，标签可以分为两类：块级标签和内联标签。

  1. 块级标签：块级标签会在其前后生成新行，相当于在内容周围添加了换行符。这些标签通常用于定义部分内容的主要布局或分隔。常见的块级标签包括： （一个通用的容器元素）、

    （文本段落）、

    ～
    （标题元素）等。

例如：

<div>
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
</div>
<!-- 每个块级元素之间都会换行 -->
  1. 内联标签：内联标签不会生成新行，它们被插入到其他文本或内容中，并且只影响它们包围的内容。常见的内联标签包括：（链接）、（一种通用的内联容器，用于添加样式或执行脚本操作）等。

例如：

<p>这是一个<span style="color: blue;">彩色</span>文本。</p>
<!-- 内联元素不会影响整体的布局和换行 -->

4， HTML5 新增语义化话标签有哪些？新增这些标签有什么使用意义？

HTML5 引入了一系列的新标签，以提供更清晰的结构和页面内容的语义化。下面是一些新的语义化标签：

1. <header>：表示页面或区段的头部。通常包括网站标题、导航栏、标识等内容。
2. <nav>：表示页面的导航部分。通常包括导航链接等。
3. <aside>：表示页面的侧边栏部分。通常包括相关信息、广告、注解等内容。
4. <article>：表示文档、页面、应用的独立内容。通常包括博客、新闻、论坛帖子等。
5. <section>：表示文档中的一个内容区段，通常包括与该区段相关的标题。
6. <figcaption> 和 <figure>：表示媒体资源（如图像、视频、音频等）及其描述或说明文字。
7. <footer>：表示页面或区段的底部。通常包括著作权信息、作者、联系方式、链接等。
8. <time>：表示具体的时间日期。
9. <mark>：表示文本的突出显示，通常用于强调与上下文关系紧密的部分。
10. <summary> 和 <details>：表示可折叠的详细信息，用户可选择展开或收起。

使用这些新的语义化标签的意义：

  1. 更清晰的结构：语义化标签提供更清晰的结构，使开发者和设计师更容易理解页面布局和内容的组织方式。
  2. 便于维护：由于结构更清晰，修改和维护页面也变得更容易。
  3. 提高可访问性：语义化标签有助于提高可访问性，使得屏幕阅读器等辅助设备可以更好地识别页面内容，改善残障用户的使用体验。
  4. 搜索引擎优化：搜索引擎可以更好地理解页面内容，从而提高页面在搜索结果中的排名。
  5. 无需额外的 CSS 样式：语义化标签可以使开发者更少地依赖 CSS 样式来控制页面布局，降低了复杂性。同时，使用语义化标签有助于提高网页的加载速度。

5.举例 img 标签的使用，以及 img 标签的常用属性

img 标签可以用来在网页中插入图片。下面是一个关于如何使用 img 标签和常用属性的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Example of img</title>
  </head>
  <body>
    <img src="example.jpg" alt="An example image" width="300" height="200" />
  </body>
</html>

在这个例子中，img 标签使用了以下常用属性：

  1. src：定义图片的来源。这里的值是一个相对路径，表示图片文件在与当前 HTML 文件同一目录下的 example.jpg。你也可以使用绝对路径或者网络 URL。

  2. alt：定义图片的替代文本。alt 属性用于在图片无法加载时提供一个文字描述。它对于无障碍阅读和搜索引擎优化都很重要。

  3. width：定义图片的宽度（像素）。在这个例子中，图片宽度设置为 300 像素。

  4. height：定义图片的高度（像素）。在这个例子中，图片高度设置为 200 像素。

这些属性可以用于指定 img 标签的基本信息和显示方式。还有一些其他属性，如 title（定义鼠标悬停在图片上时的提示信息）和 style（可用于添加内联 CSS 样式）等。

6.举例 a 标签的使用，以及 a 标签的常用属性

a 标签，即锚链接(anchor)标签，用于创建链接，可以链接到其他网页或者网站，也可以链接到同一页面内的某个位置。a 标签的常用属性有 href、target、title 和 download 等。

举例如下：

  1. 链接到外部网站：
<a href="https://www.example.com" title="点击访问示例网站" target="_blank"
  >访问示例网站</a
>

在这个例子中，href 属性表示链接的目标地址，target 属性表示在新的浏览器窗口中打开链接，title 属性表示鼠标悬停在链接上时显示的提示文本。

  1. 链接到内部页面：
<a href="contact.html" title="点击访问联系我们页面">联系我们</a>

在这个例子中，href 属性表示链接到同一网站下的 contact.html 页面，而 title 属性表示鼠标悬停在链接上时显示的提示文本。

  1. 链接到同一页面内的某个位置：
<a href="#section1" title="点击跳转到第一部分">跳转到第一部分</a>
...
<div id="section1">这里是第一部分的内容</div>

在这个例子中，href 属性表示链接的目标位置（通过 ID 选择器指定），而 title 属性表示鼠标悬停在链接上时显示的提示文本。

  1. 链接下载文件：
<a href="download/file.pdf" title="点击下载文件" download="示例文件.pdf"
  >下载文件</a
>

在这个例子中，href 属性表示链接的文件地址，download 属性表示下载文件的名称以及启用下载功能，而 title 属性表示鼠标悬停在链接上时显示的提示文本。

7.举例列表标签的使用，以及属性的使用（写出你知道的所有列表标签）

列表标签用于创建一个有序或无序的项目列表。以下是我知道的所有列表标签及其属性：

  1. <ul>：表示无序列表，使用type属性来指定列表符号的类型（disc、circle、square）。
  2. <ol>：表示有序列表，使用type属性来指定编号类型（1、A、a、I、i）。
  3. <li>：表示项目，只能在<ul>和<ol>标签内使用。
  4. <dl>：定义列表，用于描述名字/值（键值对）的列表。
  5. <dt>：定义列表中项目的名字或标题。
  6. <dd>：定义列表中项目的值或描述信息。
  7. <menu>：表示上下文菜单列表，其中每个项目链接到某个命令或文档。
  8. <dir>：已废弃，同<menu>，不应再使用。
  9. <nav>：表示页面导航区域，其中每个项目链接到其他页面或区域。
  10. <ul>、<ol>、<dl>、<menu>、<dir>和<nav>均支持start属性，可用于指定列表从哪个数字开始计数。

8.举例表单与表单元素的使用，尽量列举你知道的表单元素

表单是 HTML 中交互性最强的一部分，它允许用户向网站提交数据。以下是我知道的表单及表单元素：

HTML 表单使用<form>元素来包裹所有的表单内容，<form>元素必须带有一个 action 属性和一个 method 属性来指定表单提交的 URL 和 HTTP 请求方法。

常用的表单元素有：

  1. <input> ：用于接收用户输入的一个标准输入字段，可以有多种类型，如文本、密码、日期、时间、邮件等。常用属性有 type、name、value、placeholder、required 等。
  2. <textarea>：用于接收多行文本输入的文本框，可以指定列数和行数。 常用属性：name、cols、rows、placeholder 等。
  3. <select>：用于创建下拉列表选择框。常用属性有 name、size、multiple、value 等。它还需要包含一个或多个<option>标签，其中每个<option>标签都包含一个选项的值和显示文本。
  4. <button>：用于在 HTML 表单中创建可点击的按钮，可使用 type 属性来指定 button、submit 或者 reset 三种类型。常用属性有 name、value 等。
  5. <label>：用于给表单元素添加标签，以提高用户体验。使用for属性指定所对应表单元素的id属性值即可关联上。

其它常见的表单元素还包括：

  1. <fieldset>：用于将表单元素分组显示，以达到更直观的操作风格。
  2. <legend>：用于为元素定义一个标题。
  3. <optgroup>：用于将选项按成组进行分组。
  4. <datalist>：用于定义一个输入框的选项列表。
  5. <progress>：用于表示运行中的进度信息。
  6. <meter>：用于表示一个已知范围内的度量标准，如温度、湿度等。
  7. <input> 的多个类型，如 radio、checkbox、file 等。

9.你能列出一个或者多个 meta 标签的使用方式吗？

META 标签是一种非常重要的 HTML 标签，它提供关于 HTML 文档的元信息，包括文档的编码方式、描述内容、关键词、作者、视窗设置等。以下是一些 META 标签的使用方式：

  1. <meta charset="编码类型">：设置文档的编码方式。常见编码类型有 UTF-8、GB2312、ISO-8859-1 等。
  2. <meta name="description" content="内容描述">：用来描述网页内容，通常是一个简短的句子或段落。
  3. <meta name="keywords" content="关键词1,关键词2,关键词3">：指定关键词标签，通常是一些逗号隔开的关键词或短语，用于帮助搜索引擎识别网页关键字。
  4. <meta name="author" content="作者姓名">：用于标记网页开发者的姓名。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">：定义视口用于移动设备，使页面在移动设备上看起来更加清晰和规整。
  6. <meta http-equiv="refresh" content="时间;URL">：用于定期刷新页面。
  7. <meta name="robots" content="index,follow">：指定搜索引擎采集网页中哪些内容。比如，如果设置为 noindex，则代表搜索引擎不应对此网页进行收录。
  8. <meta name="google-site-verification" content="..."> ：用于验证网站的所有权和授权，这种方法通常用于提交站点到 Google 搜索引擎的 Webmaster 工具。
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ：告诉 IE 浏览器使用最新的渲染模式，以避免某些浏览器版本兼容性问题。
  10. <meta name="format-detection" content="telephone=no">：禁止 iOS 自动将电话号码转换为可以直接拨打的链接。

这些 META 标签的使用都可以提高网站的 SEO 和用户体验，具有非常重要的作用。

10.CSS 定义是什么?

CSS 是 Cascading Style Sheets 的缩写，中文翻译为层叠样式表，它是用来描述网页内容的样式和布局的一种标记语言。CSS 可以控制 HTML 标记的颜色、字体、大小、布局、背景等各种方面，从而实现网页的各种艺术需求。

CSS 定义主要分为三个部分：

  1. 选择器：指定要样式化的 HTML 元素。选择器通常是 HTML 标记的名称、ID 属性或者 class 属性值。例如，指定 p 元素的样式可以使用选择器p，而指定 ID 为example元素的样式可以使用选择器#example。
  2. 属性：定义元素的样式。常见的 CSS 属性包括：color、font-size、background、border 等。如设置一个段落元素的文字颜色为红色可以使用属性color: red;。
  3. 值：给属性指定具体的值。CSS 的取值可以是具体的数值或字符串，也可以是标准的预定义名称。如将 p 元素的背景颜色设置为灰色可以使用：background: gray;。

可以通过在 HTML 文档中使用<link>元素来引用一个外部的 CSS 文件，也可以在 HTML 标记中使用style属性来指定局部的样式。CSS 定义具有非常灵活的方式，适用于各种不同的网站需求。

11.CSS 引入方式有几种？分别举例

CSS 引入方式有三种：

  1. 外部样式表（External stylesheets）：将样式表写在一个外部的 CSS 文件中，通过<link>标签引入到 HTML 文件中。

示例代码：

在 HTML 文件的<head>标签中添加如下代码：

<link rel="stylesheet" type="text/css" href="styles.css">
  1. 内部样式表（Internal stylesheets）：将样式表写在 HTML 文件中的<style>标签中，可以放在<head>标签或者页面任何位置。

示例代码：

在 HTML 文件的<head>标签中添加如下代码：

<style>
    p {
        color: red;
    }
</style>
  1. 行内样式（Inline styles）：通过 HTML 标记的style属性来指定该元素的样式。

示例代码：

在 HTML 文件的标记中添加如下代码：

<p style="color: red;">这是一个段落。</p>

以上三种方式都可以定义 CSS 样式，但外部样式表的方式最常用，因为它可以将样式与 HTML 文件分离，使得维护和升级变得更加容易。

12.常见浏览器内核有哪些？对于的 css 前缀是什么

常见的浏览器内核主要有以下几种：

  1. Trident 内核：这是由微软开发的浏览器内核，被用于 Internet Explorer 浏览器。它的 CSS 前缀为-ms-。

  2. Gecko 内核：这是由 Mozilla 组织开发的浏览器内核，被用于 Firefox 浏览器。它的 CSS 前缀为-moz-。

  3. WebKit 内核：这是由苹果公司开发的浏览器内核，被用于 Safari、Chrome 等浏览器。它的 CSS 前缀为-webkit-。

  4. Blink 内核：这是由 Google 公司开发的浏览器内核，目前被用于 Chrome、Opera 等浏览器。它的 CSS 前缀为-webkit-。

  5. Presto 内核：这是由 Opera Software 开发的浏览器内核，被用于早期版本的 Opera 浏览器。它的 CSS 前缀为-o-。

当我们需要针对不同浏览器内核写特定的 CSS 样式时，需要加上相应的 CSS 前缀，以保证样式在不同的浏览器内核下能够正确渲染。这种方式被称为“CSS Hack”，但它并不是一种最佳的解决方案。一些前缀也会在未来被废弃，因此，一些现代的 CSS 预处理器（如 Sass、Less 等）已经自动添加浏览器前缀，极大地方便了我们的开发。

13.尽可能多的列举你知道的选择器（例如：1.类名选择器 .some-class）

下面是一些常见的 CSS 选择器：

  1. 类名选择器：.class

  2. ID 选择器：#id

  3. 标签选择器：tagName

  4. 包含选择器（父子选择器）：parentTag childTag

  5. 属性选择器：[attribute], [attribute=value], [attribute^=value], [attribute$=value], [attribute*=value]

  6. 伪类选择器：:hover, :visited, :active, :focus, :nth-child(n), :nth-of-type(n), :first-child, :last-child, :not(selector), :checked

  7. 伪元素选择器：::before, ::after, ::first-line, ::first-letter

  8. 相邻兄弟选择器：A + B

  9. 后继兄弟选择器：A ~ B

  10. 通用选择器：*

  11. :root 伪类选择器：:root

  12. :empty 伪类选择器：:empty

  13. :target 伪类选择器：:target

  14. :checked 伪类选择器：:checked

以上是一些常见的 CSS 选择器，其中类名选择器、ID 选择器、标签选择器用得最为广泛。

14.列举常见的设置文本样式的 css 属性

以下是一些常用的设置文本样式的 CSS 属性：

  1. color: 设置文本颜色

  2. font-size: 设置字体大小

  3. font-family: 设置字体

  4. font-weight: 设置字体的粗细程度

  5. font-style: 设置字体的样式（正常、斜体、倾斜等）

  6. text-align: 设置文本对齐方式

  7. text-decoration: 设置文本装饰（如下划线、中划线等）

  8. text-transform: 设置文本大小写转换（如大写、小写等）

  9. line-height: 设置行高

  10. letter-spacing: 设置字符间距

  11. word-spacing: 设置单词间距

  12. white-space: 设置空白字符处理方式（如空格、换行等）

  13. text-shadow: 设置文本阴影效果

这些样式属性能够帮助我们更好地控制文本样式，提升页面的可读性和美观程度。

15.Css 中 display 属性的取值分别有哪些?

display属性用于控制 HTML 元素的布局方式。以下是常见的display属性取值：

  1. block：将元素呈现为块级元素，占据一行且排在前面，可设置宽度和高度。

  2. inline：将元素呈现为行内元素，不占据一行，仅根据内容的大小来确定元素的宽度和高度。

  3. inline-block：将元素呈现为行内块级元素，不换行，但可设置元素的宽度和高度。

  4. none：不显示元素，即将元素从页面中删除。

  5. table：将元素呈现为表格。

  6. table-row：将元素呈现为表格行。

  7. table-cell：将元素呈现为表格单元格。

  8. flex：将元素呈现为弹性布局容器。

  9. grid：将元素呈现为网格布局容器。

  10. list-item：将元素呈现为列表项。

  11. inherit：继承父元素的display属性。

这些取值可以根据元素的实际需求进行设置，以达到最佳的页面效果。

16.Css 中表示颜色的方法有哪些？分别解释下

在 CSS 中，我们可以使用三种不同的方法表示颜色。

  1. 颜色名称方法：可以使用已经定义好的颜色名称，如 red、green、blue 等。这种方法有一定的局限性，只能使用一些较为基础的颜色。

  2. 十六进制方法：使用颜色的红、绿、蓝三原色值来来表示颜色，如 #000000 表示黑色，#FFFFFF 表示白色。十六进制方法的一个优点是可以自定义任何颜色，还可以使用简写形式，如 #FFF 表示#FFFFFF。

  3. RGB 方法：使用红、绿、蓝三原色的数值表示颜色，如 rgb(255, 255, 0) 表示黄色。在 RGB 中，每个颜色分量的取值范围是 0~255，包括了十六进制中所有的颜色，但是记忆起来相对要麻烦一些。

三种方法各有优缺点，可以根据实际需求选择不同的方法。主要建议使用十六进制方法和 RGB 方法，因为这两种表达方法具有足够的灵活性和扩展性。

17.描述下盒子模型是设计到的 css 属性有哪些?分别解释下含义

盒子模型（Box Model）是 CSS 中一个重要的概念，它描述了一个元素在页面中的呈现方式的基本结构。盒子模型涉及到的相关 CSS 属性如下：

  1. width 和 height: 定义盒子模型的宽度和高度。它们默认只包含内容（Content），但是边框（Border）、内边距（Padding）和外边距（Margin）的值也会影响最终呈现的尺寸。

  2. border: 定义盒子模型的边框，由边框的宽度、样式和颜色三个属性组成。

  3. padding: 定义盒子模型的内边距，即内容与边框之间的距离。

  4. margin: 定义盒子模型的外边距，即元素与相邻元素之间的距离。

  5. box-sizing: 定义元素的盒子模型的解析模式，默认是 content-box，即只包含内容。可选值还有 border-box，即边框和内边距也包含在盒子模型内，这样一来，修改元素的 width 和 height 的值时，不需要考虑边框和内边距对最终尺寸的影响。

这些属性共同定义了元素的基本结构，也就是盒子模型。在实际开发中，必须理解盒子模型的概念及相关属性，才能根据实际需求设计出合适的布局。

18.浮动属性怎么设置,以及如何清楚浮动?

浮动（float）是 CSS 中用于实现布局的一个重要属性，可以将元素向左或向右移动，并且仍然占据其原有的空间。设置浮动属性可以使用 float 属性，该属性有以下取值：

  1. left: 元素向左浮动。

  2. right: 元素向右浮动。

  3. none: 元素不浮动，这是默认值。

清除浮动通常使用 clear 属性，该属性确定元素下方的浮动元素的限制。常见的 clear 属性取值如下：

  1. both: 元素不允许左右两侧都有浮动元素。

  2. left: 元素不允许左侧有浮动元素。

  3. right: 元素不允许右侧有浮动元素。

有时候，在父元素中使用 overflow: hidden 属性也可以清除浮动，但是需要注意这种方法有时候会出现容器尺寸被裁切的情况。

例如，可以通过以下代码设置元素的浮动属性：

.float {
  float: left;
}

以下是清除浮动的方法：

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

这里使用了伪元素 ::after，并为其添加了 clear: both 属性来清除浮动效果。此外，height: 0; 和 display: block; 主要为了兼容旧浏览器。该方法是一种常用的清除浮动的技巧。

19.Css 中的自定义动画与过渡动画如何设置，分别举例

CSS 中的自定义动画（Animation）和过渡动画（Transition）可以为网页添加更多交互效果，并且可以通过相应的属性进行调整和控制。

自定义动画是基于关键帧（Keyframes）来设置的，可以使用 @keyframes 关键字定义，其中可以设置动画开始、结束时的状态。例如，以下代码定义了一个名为 example 的自定义动画：

@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

上述代码表示，在动画开始时，背景颜色为红色，动画结束时背景颜色为蓝色。接下来，可以使用 animation 属性将动画与元素关联起来，设置动画持续时间、动画名称和动画播放方式等属性，例如：

.animationClass {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

上述代码表示将名为 example 的动画应用于 .animationClass 类，设置了动画持续时间为 5 秒，动画的播放方式为线性，播放延迟为 0 秒，无限循环播放，并且动画播放方式为“来回”播放。

过渡动画是基于元素状态之间的变化来设置的，可以使用 transition 属性来设置，定义当前状态到下一状态之间的过渡效果。例如，以下代码定义了一个名为 example 的过渡动画：

.example {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.example:hover {
  width: 200px;
}

上述代码表示，在鼠标悬停在 .example 元素上时，该元素的宽度从原先的值过渡到 200px 大小，过渡时间为 1 秒，动画播放方式为 ease，没有播放延迟。

综上所述，上述代码是两种不同的动画效果，在实际开发中，可以根据需要选择使用自定义动画或过渡动画来实现不同的交互效果。

20.详细列举下 transform 属性的使用

transform 是一个 CSS 属性，通常用于改变元素的形状、大小、位置或方向。transform 属性可以与其他 CSS 属性（如 position、width 和 height）一起使用，可以用于创建各种动画效果、3D 渐变转换等。下面列举了 transform 常见的使用场景及示例：

  1. translate: 移动元素的位置。
transform: translate(50px, 50px);

上述代码表示将元素位置沿 x 轴移动 50px，沿 y 轴移动 50px。

  1. rotate: 旋转元素。
transform: rotate(45deg);

上述代码表示将元素顺时针旋转 45 度。

  1. scale: 缩放元素。
transform: scale(1.2);

上述代码表示将元素沿 x 轴和 y 轴放大 1.2 倍。

  1. skew: 倾斜元素。
transform: skew(30deg, 10deg);

上述代码表示将元素沿 x 轴倾斜 30 度，沿 y 轴倾斜 10 度。

  1. matrix: 可以自定义一个 2D 转换矩阵。
transform: matrix(1, -0.2, 0, 1.2, 0, 0);

上述代码表示自定义一个 2D 转换矩阵，实现复杂的转换效果。其中第一个参数表示水平缩放，第二个参数表示水平倾斜，第三个参数表示垂直倾斜，第四个参数表示垂直缩放，第五个和第六个参数分别表示水平和垂直移动距离。

  1. perspective 和 transform-style: 创建 3D 效果。
perspective: 1000px;
transform-style: preserve-3d;
transform: translate(0, 0, -100px) rotateY(45deg);

上述代码表示设置了一个透视距离为 1000px 的父容器，将子元素的 transform-style 属性设置为 preserve-3d 即可使子元素继承 3D 效果。transform 属性表示先将子元素沿 z 轴移动 -100px，再绕 y 轴旋转 45 度。

综上所述，transform 属性可以实现多种元素效果，通过这些属性的组合使用可以创建出多种复杂的动画效果和 3D 效果。

21.详细列举下 css 中定位的使用

在 CSS 中，定位（Positioning）属性用于设置元素的位置。CSS 中有 5 种定位属性可用，分别为：

  1. static：元素的默认定位方式，不会被特意定位，元素出现在文档的正常流中，不能通过 top、bottom、left 或 right 属性进行偏移或移动。

  2. relative：相对定位，元素相对于它原来的位置进行定位，通过 top、bottom、left 或 right 属性可以进行偏移或移动。

  3. absolute：绝对定位，相对于最近的一个已定位父元素进行定位，如果父元素没有定位，则相对于文档的 body 元素定位，可以通过 top、bottom、left 或 right 属性进行偏移或移动。

  4. fixed：固定定位，相对于浏览器窗口进行定位，不随滚动条滚动而变化。

  5. sticky：粘性定位，元素在滚动到特定位置后固定在页面上，类似固定定位，但当页面滚动过该元素时会将元素解除固定；相对于文档的 flow-root 元素和近来的定位祖先元素（透明的包含块）进行定位。

以下是各种定位属性的常见使用场景：

  1. static：通常不需要使用静态定位，因为它是默认的。

  2. relative：用于相对于自己定位的元素。

.relative {
  position: relative;
  top: 20px;
  left: 20px;
}

上述代码将 .relative 元素相对于原来位置（左移 20px，下移 20px）。

  1. absolute：用于绝对定位的元素。
.container {
  position: relative;
  height: 200px;
}

.absolute {
  position: absolute;
  top: 10px;
  right: 10px;
}

上述代码将 .absolute 元素相对于 .container 元素的位置进行定位，并使其位于 .container 元素的右上角。

  1. fixed：用于固定在页面上的元素。
.fixed {
  position: fixed;
  top: 10px;
  right: 10px;
}

上述代码将 .fixed 元素固定在浏览器窗口的右上角。

  1. sticky：用于在特定位置固定的元素。
.sticky {
  position: sticky;
  top: 0;
}

上述代码将 .sticky 元素粘在页面顶部，当页面向下滚动时，.sticky 元素将保持在最上面。

综上所述，position 属性用于设置元素的定位方式，可以根据具体的需求使用各种定位属性进行元素的定位。

22.你是怎么理解 viewPort 的，相关的 meta 标签如何设置

Viewport 是指浏览器可视窗口的尺寸大小，可以通过 meta 标签来设置 Web 页面在移动端的显示方式，以适应不同移动设备的屏幕。meta viewport 标签可以让开发者 掌控 viewport，并将 CSS 响应式布局做得更加准确。

在 meta 标签中，可以使用“name”属性和“content”属性来设置 viewport。

例如：，其中：

  • width=device-width: 表示 viewport 的宽度等于设备屏幕的宽度，避免原始缩放，即保证页面宽度始终为设备的实际宽度。
  • initial-scale=1.0: 页面默认缩放设置，表示在移动设备上初始时页面的缩放倍数为 1.0。

通过使用 meta viewport 标签，可以方便地使网页在不同的移动设备上呈现出理想的视图效果，并且可以使移动设备的用户以人性化的方式来访问网页内容。

23.简单解释下 em/rem/vw/vh 这几个单位

  • em：是相对于元素的字体大小计算的长度单位（例如 1em 等于字体大小，2em 等于字体大小乘以 2），如果一个元素的字体大小为 16px，那么 1em 就等于 16px。
  • rem：与 em 相似，但是是相对于根元素（即 HTML 元素）的字体大小计算的单位，比 em 更容易控制。如果 html 元素的字体大小为 16px，那么 1rem 就等于 16px。
  • vw：视口宽度的百分比，1vw 等于视口宽度的 1%。例如当前视口宽度为 1000px，那么 1vw 就等于 10px。
    • vh：视口高度的百分比，1vh 等于视口高度的 1%。例如当前视口高度为 800px，那么 1vh 就等于 8px。

em 和 rem 通常用于设置元素的尺寸以及间距等，方便响应式布局； vw 和 vh 则用于自适应布局来设置元素宽高比例，因为它们能够自动根据浏览器窗口的大小来调整元素的大小，方便适应不同大小的屏幕。

24.flex 布局中实现爸爸 div(class=’baba’)中子项垂直方向对齐，水平方向均匀分布（空白在内部）的代码是什么

可以使用 flex 布局来实现该效果，具体的代码如下所示：

<div class="baba">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.baba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

上述代码中，使用了 flex 布局，并且设置了父元素的 flex-direction 为 column，即纵向排布子元素。其中，align-items 属性设置了子元素在垂直方向上居中对齐，justify-content 属性设置了子元素在主轴（此时为纵轴）方向上均匀分布（空白在内部）。需要注意的是，在设置 justify-content 属性时，为了让空白在内部，需要设置父元素的高度，保证子元素在父元素内部均匀分布。同时，子元素在水平方向上均匀分布，这是 flex 的默认行为，使用 width 属性设置子元素宽度即可。

标签：24,标签,元素,HTML,20day,选择器,CSS,属性
From： https://blog.csdn.net/DaB210/article/details/137192629

相关文章

  • 20240330打卡-01构建之法阅读笔记之一
    软件=程序+软件工程。所有的算法在我学习之前就已经实现了，那么我有必要学习算法与数据结构吗？？如何做一个好的程序员，我以前以为就是根据要求将需求实现，但看了第一章概论，我发现这个要求实在是太低了，不是一个一本大学生所追求的目标，书上写到：1.研发出符合用户需求的软件2.通过一定的软......
  • 2024/3/20
    通过K线判断市场的强弱上涨趋势的K线是什么样子的，下跌趋势的K线是什么样子的，然后观察盘面看实际走势是否和自己想的一样，如果一致则维持原猜想以及对应的持股策略那么你要熟悉明白上涨趋势的K线是什么样子的，下跌趋势的K线是什么样子的，并将图像走势和判断标准烂熟于心上涨趋势的K......
  • 24年3月使用VS22编译Telegram Desktop
    0.环境准备，我使用的VS版本是17.9.4，SDK版本是10.0.22621.0，最好不要用太老的版本 1.去下载Python，git，cmake这三个工具，然后在D盘根目录新建TBuild文件夹，里面再建Libraries和ThirdParty这两个文件夹下载地址：Python3.10：https://www.python.org/downloads/Git：https://git-scm.com/......
  • 2024 蓝桥打卡Day27
    D27ccfcsp代码练习材料整理Java中数组复制1.使用clone()方法2.使用System.arraycopy()方法四舍五入Arrays类进制转换十进制转其他进制其他进制转换为十进制保留小数位数使用String.format()使用DecimalFormat的format()方法使用String.formatArrayListHash......
  • 2024/3/30 21点的lambda表达式
    packagecom.atguigu;interfaceMyInterface{intsum(inti,intj);}interfaceMyhaha{inthaha();}//检查注解，帮我们快速检查我们写的接口是否函数式接口@FunctionalInterfaceinterfaceMyhehe{inthehe(inti);}//1.自己写实现类classMyInetfaceI......
  • P5624 [Celeste-A] Black Moonrise 题解
    考虑莫队。记数\(i\)的个数为\(c_i\)，套路地用莫比乌斯函数容斥，发现答案为\(\sum_{i=1}^{10^5}\frac{c_i(c_i+1)}2\sum_{d|i}\mu(\fracid)d\)。先预处理出前面的常数和每个数的因子，每次移动端点枚举因子更新答案即可。因为数是随机的，所以时间复杂度\(\mathcalO(n\sqrtn......
  • 2024-03-30
    2024-03-30扫描线这两天讲课一直提到扫描线，学一下看题解学会的，挺简单的感觉本来以为半个小时就能写完但是状态十分不好小错很多，调了一个半小时/kk注意离散化的是横坐标而线段树存的是切割出来的线段因此左端点要加\(1\)，求长度的时候又得减回来扫描线经典的技巧是将开始......
  • 材料跨考计算机专硕现状及未来规划（二） | 2024年3月30日
    材料跨考计算机专硕现状及未来规划（二）一、目前情况复试备战了三个月，初始结束就马不停蹄的开始准备了，就过年休息了三天，终于取得了不错的结果，拟录取通知出来，结果没有出乎我的意料，有学上了。努力就一定会有回报，复试成绩还算不错，整体排名还提升了40多名是有点出乎我的意料。复......
  • 2024年3月全新超强版本itvboxfast影视APP源码 TV+手机双端源码 新增超多功能 tvbox二
    不要拿烂大街的版本比较,没有可比性,修复大街版本所有bug,增加超多功能。这个版本堪称如意界最强，后台支持某条线路、直播指定账号输入密码观看，VIP会员专用线路，去插播视频的广告，TV端修复套餐金额设置小数点闪退，更改公告显示样式，首页轮播图新增支持显示视频，TV端和手机端分别设......
  • 网络安全（黑客）——2024自学
    01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有W......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99