Pre-Lesson 8

2401_87121330

于 2024-09-17 23:49:30 发布

阅读量864

点赞数 7

文章标签： html5

本文链接：https://blog.csdn.net/2401_87121330/article/details/142208921

版权

一、css

1.1概述

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。

所谓样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。

1.2组成

CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素的一组样式规则。这里面提到了两个概念，一是特定元素，二是样式规则。对应CSS的语法，也就是选择器（selects）和声明（eclarations）。

选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。
声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。
- 属性：指示文体特征，例如font-size，width，background-color。
- 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。

1.3引入方式

（1）内联样式

内联样式是CSS声明在元素的style属性中，仅影响一个元素：

格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

（2）内部样式表

将CSS样式放在style标签中，通常 <style>编写在 HTML 的head标签内部。

格式:

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

（3）外部样式表

外部样式表是 CSS 附加到文档中的最常见和最有用的方法，可以将 CSS 文件链接到多个页面，从而使用相同的样式表设置所有页面的样式。

外部样式表是指将 CSS 编写在扩展名为 .css 的单独文件中，并从HTML <link> 元素引用它，通常 <link> 编写在HTML 的head标签内部。

格式:

<link rel="stylesheet" href="css文件">

rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入 css 文件固定值为stylesheet。

href：属性需要引用某文件系统中的一个文件。

优先级比内部样式低，会被内部样式表覆盖掉。

（4）浏览器缺省设置

优先级最低

1.4选择器

（1）分类

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	`div{ }`
	类选择器	`.`	基于class属性值匹配元素	`.center{ }`
	ID选择器	`#`	基于id属性值匹配元素	`#username{ }`
属性选择器	属性选择器	`[]`	基于某属性匹配元素	`[type]{ }`
伪类选择器	伪类选择器	`:`	用于向某些选择器添加特殊的效果	`a : hover{ }`
组合选择器	后代选择器	`空格`	使用`空格符号`结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	`.top li{ }`
	子级选择器	`>`	使用 `>` 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	`.top > li{ }`
	同级选择器	`~`	使用 `~` 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后续兄弟元素	`.l1 ~ li{ }`
	相邻选择器	`+`	使用 `+` 结合两个选择器，基于第一个选择器，匹配第二个选择器相邻的后续兄弟元素	`.l1 + li{ }`
	通用选择器	`*`	匹配文档中的所有内容	`*{ }`

（2）基本选择器

（3）属性选择器

（4）伪类选择器

格式：

标签名:伪类名{ }

（5）组合选择器

（6）伪元素选择器

CSS伪元素选择器是一种特殊的选择器，它允许你为元素的某个部分设置样式，而不需要在HTML中添加额外的标签。伪元素选择器通常以双冒号(::)开头。以下是一些常见的CSS伪元素选择器：

::before：用于在元素内容之前插入生成的内容。
::after：用于在元素内容之后插入生成的内容。
::first-letter：用于为元素的第一个字母设置样式。
::first-line：用于为元素的第一行文本设置样式。
::selection：用于为用户选中的文本设置样式。
::placeholder：用于为输入框的占位符文本设置样式。
::marker：用于为列表项的标记设置样式。
::file-selector-button：用于为文件输入元素的选择按钮设置样式。

一般常用::before和::after

二、页面布局

2.1盒模型

盒模型主要包括以下四个部分：

内容区域（content）：这是元素实际显示内容的区域，如文本、图片等。内容区域的宽度和高度可以通过 width 和 height 属性来设置。
内边距（padding）：内边距位于内容区域与边框之间，它的宽度可以通过 padding-top、padding-right、padding-bottom和 padding-left 属性来分别设置。内边距会影响元素的实际尺寸，但不会影响其他元素的布局。
边框（border）：边框位于内边距与外边距之间，它的宽度、样式和颜色可以通过 border-width、border-style 和 border-color 属性来分别设置。边框会影响元素的实际尺寸，也会影响元素周围的布局。
外边距（margin）：外边距位于边框与其他元素之间，它的宽度可以通过 margin-top、margin-right、margin-bottom 和 margin-left 属性来分别设置。外边距会影响元素的布局，但不会影响元素的实际尺寸。

2.2相对单位（rem、%、em）

px是绝对单位，每台电脑屏幕尺寸不一致，网页要相对地进行缩放，用相对单位进行参照。

（1）rem

rem 是相对于根元素（<html>）的字体大小的单位。它的基准值是根元素的字体大小。一般html内的font-size是16px，默认情况下是1rem=16px，更改font-size则更改了rem值的大小。

（2）em

em 是相对于当前元素的字体大小的单位。它的基准值是当前元素的字体大小。例如，如果当前元素的字体大小为16px，那么1em等于16px。

一般情况下不用em。

（3）%

% 是相对于父元素的某个属性值的单位。它的基准值是父元素的相应属性值。例如，如果父元素的宽度为 200px，那么 50% 等于 100px

如果不设置html的width，则该块元素会随着网页的缩放而缩放它自己的宽度。

2.3文本居中

水平居中：text-align:center/left/right

垂直居中：line-height设置为元素的高度

2.4文本超出border时

overflow

overflow-wrap: break-word;

允许在长单词或URL内部换行，以防止内容溢出容器边界。

2.5display

display 属性是 CSS 中用于控制元素的显示类型的重要属性。它可以改变元素的默认显示行为，使其在页面上以不同的方式进行布局。以下是 display 属性的一些常见值及其作用：

block：将元素显示为块级元素。块级元素会独占一行，宽度默认为父元素的宽度，可以设置宽度、高度、内外边距等属性。常见的块级元素有<div>、<p>、<h1>等。
inline：将元素显示为行内元素。行内元素不会独占一行，宽度仅为内容的宽度，不能设置宽度、高度、内外边距等属性。常见的行内元素有<span>、<a>、<img>等。
inline-block：将元素显示为行内块元素。行内块元素既不会独占一行，也可以设置宽度、高度、内外边距等属性，类似于块级元素。常见的行内块元素有<input>、<button>等。
none：将元素隐藏，不占据任何空间。通常用于隐藏不需要显示的元素。
flex：将元素显示为弹性盒子。弹性盒子是一种现代布局方式，可以轻松实现响应式布局和自适应对齐。需要注意的是，display: flex 应用于父元素，而不是子元素。
grid：将元素显示为网格容器。网格布局是一种二维布局方式，可以轻松实现复杂的布局需求。需要注意的是，display: grid 应用于父元素，而不是子元素。

2.6弹性布局（Flexbox）

弹性布局（Flexbox）是 CSS 中的一种布局模式，它可以让我们更简单、直观地实现元素的排列和对齐。Flexbox 布局主要用于一维布局，即在水平或垂直方向上排列元素。

以下是 Flexbox 布局的一些常见概念和属性：

容器（Flex Container）：应用了 display: flex 或 display: inline-flex 属性的元素被称为弹性容器。弹性容器内的子元素将按照弹性布局进行排列。
项目（Flex Item）：弹性容器的子元素被称为弹性项目。它们将按照弹性布局进行排列和对齐。
主轴（Main Axis）：弹性容器内的项目沿着主轴排列。主轴的方向由 flex-direction 属性决定。
侧轴（Cross Axis）：弹性容器内的项目沿着侧轴对齐。侧轴的方向与主轴垂直。
flex-direction：用于设置弹性容器的主轴方向。可选值有 row（默认值，水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）和 column-reverse（垂直方向，反向排列）。
flex-wrap：用于设置弹性容器内的项目是否换行。可选值有 nowrap（默认值，不换行）、wrap（换行）和 wrap-reverse（换行，反向排列）。
justify-content：用于设置弹性容器内的项目在主轴上的对齐方式。可选值有 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。
align-items：用于设置弹性容器内的项目在侧轴上的对齐方式。可选值有 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）和 stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。
align-content：用于设置弹性容器内的多行项目在侧轴上的对齐方式。可选值与 align-items 相同。
order：用于设置弹性项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：用于设置弹性项目的放大比例。默认为0，即如果存在剩余空间，也不放大。
flex-shrink：用于设置弹性项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。
flex-basis：用于设置弹性项目在主轴方向上的初始大小。可以是长度值（如 200px）或百分比（如 50%）。
flex：flex-grow、flex-shrink 和 flex-basis 的简写属性。默认值为 0 1 auto。
align-self：用于设置单个弹性项目在侧轴上的对齐方式，覆盖 align-items 属性。可选值与 align-items 相同。

2.7网格布局（Grid Layout）

网格布局（Grid Layout）是CSS中的一种新型布局方式，它允许我们在二维空间中对元素进行精确定位和对齐。网格布局的主要目的是实现复杂的布局需求，使页面的布局更加简单、直观和易于维护。

网格布局主要包括以下几个部分：

容器（Container）：网格容器是网格布局的最外层元素，它用于包裹整个网格。要将一个元素设置为网格容器，需要将其 display 属性设置为 grid。
行和列（Rows and Columns）：网格布局中的行和列用于定义网格的结构。行和列的数量和宽度可以通过 grid-template-rows 和 grid-template-columns 属性来设置。
单元格（Cells）：单元格是网格布局中的基本单位，用于放置实际的内容。单元格的位置和大小由行和列的宽度和数量决定。
项目（Items）：项目是放置在单元格中的实际内容。项目的位置和对齐可以通过 grid-row、grid-column、justify-self 和 align-self 等属性来设置。
间距（Gaps）：网格布局中的行和列之间可以设置间距，以便在元素之间留出空白。间距可以通过 grid-row-gap 和 grid-column-gap 属性来设置。

在CSS网格布局中，1fr 是一个表示剩余可用空间的单位。fr 是 "fraction" 的缩写，表示一个分数部分。当我们在 grid-template-rows 或 grid-template-columns 属性中使用 fr 单位时，它会根据网格容器的可用空间来分配行和列的宽度。

在示例中，我们使用了 repeat(3, 1fr) 来定义网格的行和列。这意味着我们创建了一个 3x3 的网格，每行和每列的宽度都是 1fr。由于我们没有指定网格容器的宽度和高度，它们将自动适应其父元素的大小。因此，1fr 将根据网格容器的可用空间来分配每行和每列的宽度，从而实现均匀分布。

需要注意的是，fr 单位可以与其他长度单位（如 px、em、% 等）混合使用，以实现更复杂的布局需求。例如，我们可以使用 grid-template-columns: 1fr 2fr 1fr 来创建一个 3 列的网格，其中第二列的宽度是第一列和第三列的两倍。

2.8float

（1）float概述

float是CSS中的一个浮动属性，它可以使元素脱离正常的文档流，并根据指定的方向（左或右）浮动到其父元素的边缘。float布局主要用于实现文本环绕图片等效果，但也可以用于布局页面中的其他元素。

以下是float属性的一些常见值及其作用：

left：将元素浮动到其父元素的左边缘，文本和其他元素将围绕该元素排列。
right：将元素浮动到其父元素的右边缘，文本和其他元素将围绕该元素排列。
none：取消元素的浮动效果，使其回到正常的文档流中。

（2）float 塌陷

float 塌陷是指浮动元素的父元素高度不能自动适应浮动元素的高度，导致父元素高度塌陷的现象。这会影响到后续元素的布局，使它们与浮动元素重叠。

（3）解决办法

使用 overflow 属性：我们可以为父元素设置 overflow 属性（如 overflow: auto 或 overflow: hidden），以创建一个新的块格式化上下文（BFC）。这样，父元素的高度就能自动适应浮动元素的高度，避免塌陷。
清除浮动（clearfix）：清除浮动是最常用的解决方法。我们可以为父元素添加一个伪元素（::after），并设置 clear: both 属性，以清除浮动效果。这样，父元素的高度就能自动适应浮动元素的高度，避免塌陷。
使用 Flexbox 或 Grid 布局：现代布局中，我们更推荐使用 Flexbox 或 Grid 布局来替代 float 布局。这些布局方式可以更简单、直观地实现元素的排列和对齐，同时避免了 float 塌陷的问题