参考教程：菜鸟教程

web前端开发四 速通HTML+CSS

HTML和CSS可以看成是一个东西，那就是网页看得到的静态页面！

HTML负责组织内容、框架结构、以及网页基本功能，CSS负责把内容制作样式、动画和布局！现在为了清晰简洁，把两部分分开！CSS原本是依附于HTML，是HTML中的某种属性。

前言

web开发的前端是什么

前端是一个很大的范畴，针对web开发的前端而言，前端主要是开发在浏览器上运行的代码！

浏览器运行这个代码，所显示的页面，就是前端的功能，简而言之浏览器运行的就是前端开发的代码，其中呢，这个代码也分为三个模块，HTML和CSS和JavaScript这三种语言。实现了用户在浏览器中能感知到的内容！

  • HTML是骨架，标题、内容、显示文字图片视频都是这里添加，并且这里去引入CSS和JS！
  • CSS是美化打扮，给网页争光添彩，把不同内容排版在网页可视窗口的不同位置
  • JS是交互，让网页具有生命活动，登录账号，发表评论等

HTML是什么

超文本标记语言，是一种描述语言，用来说明各种内容的关系和层级，是种文本形式，任何浏览器都可以去读取的

  • html内部由head头部结构body主体结构组成
    • “head”的大部分内容在浏览器中都不会显示，但是又是非常重要！
    • “body”里包含了在浏览器中显示的所有信息，所有内容，包括文字图片视频和音频，这些信息需要在特定的结构中呈现，才显示规范，不冗杂。

body决定展示的内容

在body中有一百多个tag标签可以使用，首先最核心的是标签间的层级嵌套，表示内容与内容间的关系，也称为“结构”!

其次是多媒体内容，HTML的核心功能之一就是可以去链接图片、音频和视频

内容

在内容的关系上，用语义tag去包裹，层层包裹，让内容具有层级，最后本身这部分内容，就构成了一个一个模块，再对页面进行划分，用header、bander、aside、main、footer去包裹成通用结构！

设计思路

去设计个网页的时候呢，就是先去定义功能，在功能上去想象这个页面大概内容有哪些内容，再去细化每个内容之间的关系，在设计网页的过程中去找到这些内容，并且把这些内容之间的关系给定义好，最后现在能排布在什么地方呢，就是用更大的更大的容器去包裹，就对形成了整个主体内容。由小到大！由内容到布局！

  • 定义页眉header
  • 定义导航nav
  • 定义主要区域main
  • 定义文章块article
  • 定义附栏aside
  • 定义页脚footer

HTML5

纯文本格式，用字符去说明显示的内容，极度简化编写，通过标签去定义网页的呈现方式！

<html>包含两部分，头部<head>和主体<body>，HTML 运行在浏览器上，由浏览器来解析。

img

**HTML以元素为基本单位 = 标签(开始标签 + 结束标签) + 内容(写在之间) + 属性(写在开始标签)**，其中，把定义样式的属性可以单拎出来，组成CSS文件！

使用<!DOCTYPE html>，对HTML5文档声明，告诉浏览器触发标准解析模式，没有可能会乱码！

<html>中的lang=""属性，可以设置页面语言！

保存文件类型后缀.html，浏览器可识别并执行文件！

一、头部

主要用于浏览器解析时的声明，称为网页元信息

<head>

</head>

使用<meta>标签，添加元信息，并设置属性，来定义文档相关的设置，在网页中是不可见的！

1. 浏览器解析时的字符编码的属性`charset`

<meta charset="utf-8">


2. 设置文档的字符编码、页面语言、刷新时间、缓存时间等，使用属性`http-equiv`和`content`

<meta http-equiv="content-language/refresh/expires" content="">


3. 添加网页的作者、描述、关键字、文档视口等，使用属性`name`和`content`

<meta name="author/description/keywords/viewport" content="">


使用<title>标签，添加网页标题，在网页中是可见的！

<title>这里写标题</title>

案例：vscode默认填充的头部

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里写标题</title>
</head>

二、主体

包括了网页窗口内显示的所有东西，是可见的，主要包括文本、外部引用，各种标签！

通过语义化标签，告诉浏览器来展示内容和结构，内容有文本（在HTML中直接写）、图片和多媒体（外部引用），可以说标签及内容组成的元素，是HTML的基本组成单位！在标签内部，可以添加属性，用于定义网页内容的呈现形式！

img

1、结构标签

对网页视图区域进行划分，通过语义化标签实现，当然使用无语义化的div也可以！

页眉

页面级页眉，可以使用属性role="banner"，帮助屏幕阅读器定位！

<header>

</header>

导航

可以使用属性role="navigation"

<nav>

</nav>

主要区域——只能使用一次

可以使用属性role="main"

<main>

</main>

文章块——可嵌套

<article>

</article>

区块

<section>

</section>

附栏

可以使用属性role="complementary"

<aside>

</aside>

页脚

可以使用属性role="contentinfo"

<footer>

</footer>

role属性不影响解析，但提高残疾人使用体验，通过屏幕阅读器告知，也可以增强语义化和可读性！

2、内容标签

网页提供的丰富信息，包括文本、图像、音频和视频，使用语义化标签来更严谨的展示！

文本标签

在文本标签内的文字内容，放在两标签之间，也就是说文本信息是写在代码中的！

通用文本标签

  1. 标题<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

  2. 段落<p>

描述性文本标签

主要对段落，说明这些词语、句子的语义化含义，通常会改变文本的样式！样式不重要，语义化！

  1. 强调<strong>：粗体显示
  2. 着重点<em>：斜体显示
  3. 加粗<b>
  4. 斜体<i>
  5. 标记细则<small>：小字印刷
  6. 上标和下标<sup>、<sub>
  7. 术语或者概念<dfn>：其后接介绍或者解释
  8. 代码<code>：想维持代码原格式，可以使用<pre>包裹<code>
  9. 预定义格式<pre>：保持文本固有的换行和空格！
  10. 缩写词<abbr>：使用title=""属性来补全描述缩写词
  11. 标注文本<ins>、<del>：表示新增文本和删除内容！样式是下划线和删除线！
  12. 引用标题<cite>：
  13. 引述文本<blockquote>：

特殊用途文本标签

标识特定用途的信息，比如介于文本与图标之间的信息，日期等信息！

  1. 高亮<mark>
  2. 进度<progress>：进度条，通常配合js进行动态更新
  3. 刻度<meter>：表示分值，或范围！
  4. 时间<time>：可以添加datetime=""属性，便于计算机识别
  5. 联系信息<address>：
  6. 字符显示方向<bdo>：添加dir="ltr/rtl"指定显示方向！
  7. 换行断点<wbr>：表示此处可换行，可以在必要时自动换行！
  8. 旁注<ruby>、子元素<rt>/<rp>：<rt>标注的旁注显示在文本头上，<rp>显示在旁边
  9. 展开、收缩详情<details>、子元素<summary>：可以放文字表单等，可添加open="ture"
  10. 对话框<dialog>：默认为隐藏，可以通过open=""属性设置打开，也可以使用JS，show()、close()方法控制！使用showModal()方法可以用模态打开对话框！使用伪类::backdrop

图像标签

通过外部引入，也就是HTML中并不包含这张图片，通过地址找到图片，并通过浏览器展示

插入图片标签<img>——单标签，在页面中，插入一张图片！

必选属性src=""，可选属性：height=""、width=""等

<img src="图片地址" alt="替代文本">

流内容标签<figure>，图片和文字进行关联，也可用于图表和文字进行关联

<figure>
    <figcaption>标题文本</figcaption>
	<img src="图片地址" alt="替代文本">
</figure>

图片容器<picture>，与多个子标签<source>来设置不同媒体查询显示不同图片，以满足第一个条件为准

<picture>
    <source media="(min-width: 650px)" srcset="images/kitten-large.png">
    <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
    <!-- img标签用于不支持picture元素的浏览器 --> 
    <img src="images/kitten-small.png" alt="a cute kitten">
</picture>

属性srcset=""设置图片的路径，属性media=""设置媒体查询

音频标签

通过外部引入，也就是HTML中并不包含这些音频，通过地址找到并展示

插入音频的标签<audio>

可选属性autoplay=""、loop=""、preload=""、src=""、controls=""

<audio src="音频地址" controls="controls"></audio>

可以包裹多个子标签<source>，链接不同音频，浏览器自动筛选一个可以识别的音频文件！

<audio autoplay loop>
    <source src="medias/test.ogg" type="audio/ogg">
    <source src="medias/test.mp3" type="audio/mpeg">
您的浏览器不支持audio标签。
</audio>

视频标签

通过外部引入，也就是HTML中并不包含这些视频，通过地址找到并展示

插入音频的标签<video>

可选属性autoplay=""、loop=""、preload=""、src=""、controls=""、height=""等

<video src="视频地址" controls="controls"></video>

可以包裹多个子标签<source>，链接不同视频，浏览器自动筛选一个可以识别的视频文件！

<video controls>
    <source src="medias/trailer.ogg" type="video/ogg">
    <source src="medias/trailer.mp4" type="video/mp4">
您的浏览器不支持video标签。
</video >

3、内容组织标签

列表标签

用于同等级的项目，分为无序列表、有序列表、描述列表

无序列表标签<ul>，子项目标签<li>

一个列表标签可以有多个子项目标签，多个列表还可以嵌套！常用于导航栏

<ul>
    <li>一级列表项目1
        <ul>
            <li>二级列表项目1</li>
            <li>二级列表项目2
                <ul>
                    <li>三级列表项目1</li>
                    <li>三级列表项目2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>一级列表项目2</li>
</ul>

有序列表标签<ol>，子项目标签<li>

可选属性type 指定标记类型、start 起始值、reversed定义降序，常用于排序，名次等

<ol type="I" start="5" reversed >
    <li>黄鹤楼 <span>崔颢</span> </li>
    <li>送元二使安西 <span>王维</span> </li>
    <li>凉州词（黄河远上） <span>王之涣</span> </li>
    <li> 登鹳雀楼 <span>王之涣</span> </li>
    <li> 登岳阳楼 <span>杜甫</span> </li>
</ol>

描述列表标签<dl>，词条标签<dt>，解释标签<dd>

<dl>
    <dt>软件名称</dt>
    <dd>小时代2.6.3.10</dd>
    <dt>软件大小</dt>
    <dd>2431 KB</dd>
    <dt>软件语言</dt>
    <dd>简体中文</dd>
    <dt>软件类别</dt>
    <dd>国产软件/免费软件/文件共享</dd>
</dl>

表格标签

用于展示行、列结构的二维数据

表格标签<table>、行标签<tr>、单元格标题标签<th>、单元格数据标签<td>

“table” 里有几个 “tr” 就是有几行，每行中，有几个 “th” 或 “td” 就有几列，最多的列就是列表的总列，单元格中可以有 “p” 、” h1 “等文本内容，也可以有” img “等图片多媒体内容！

<table>
    <tr>
        <th>用户名</th>
        <th>电子邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>zhangsan@163.com</td>
    </tr>
</table>
<table>
    <caption>通讯录</caption>
    <tr>
        <th>用户名</th>
        <th>电子邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>zhangsan@163.com</td>
    </tr>
</table>

<td>居中显示，<td>左对齐!

表格标题标签<caption>，必须出现在<table>下，靠在一起

表格行分组标签<thead>、<tbody>、<tfoot>

把表格从上至下，进行多个块组，<thead><tfoot>只有一个，<tbody>可以有多个!
<tfoot>标签有colspan=""属性时！横向合并单元格

<table>
    <caption>
    结构化表格标签
    </caption>
    <thead>
        <tr>
            <th>标签</th>
            <th>说明</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2">* 在表格中，上述标签属于可选标签。</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>&lt;thead&gt;</td>
            <td>定义表头结构。</td>
        </tr>
        <tr>
            <td>&lt;tbody&gt;</td>
            <td>定义表格主体结构。</td>
        </tr>
        <tr>
            <td>&lt;tfoot&gt;</td>
            <td>定义表格的页脚结构。</td>
        </tr>
    </tbody>
</table>

表格列分组标签<col>或<colgroup>

有多少个<col>和<colgroup>标签，就代表多少组，按列顺序分组，每个标签对应顺序那一列组
特别的：专有属性span=""，可以取正整数，来让一组横跨多列！

<table width="100%" border="1">
    <col align="left" />
    <col align="center" />
    <col align="right" />
    <tr>
        <td>慈母手中线，</td>
        <td>游子身上衣。</td>
        <td>临行密密缝，</td>
    </tr>
    <tr>
        <td>意恐迟迟归。</td>
        <td>谁言寸草心，</td>
        <td>报得三春晖。</td>
    </tr>
</table>

”table“ 专属属性——边框

属性 说明
border="" 定义表格边框的粗细，类似单元格的”border”
cellpadding=”” 类似单元格的”padding”
cellspacing=”” 类似单元格的”margin”
width=”” 设置表格的宽度
frame=”” 表格的外边框，对”border”扩展，定义每个单元格上下左右是否显示边框线
rules=”” 单元格的边框，对”border”扩展
summary=”” 定义摘要，不会显示

总之：每个单元格，都可以设置边框、外边距、内边距，也可以通过<table>属性或者CSS设置!

  • 定义分离单元格

先设置边框属性border=""，再设置外边距属性cellspacing=""，当大于时就分开了

  • 添加表格说明，summary=""，搜索引擎可以检索，用户看不到!

“td”、”th“属性，单元格对齐、跨行列

属性 说明
align=”” 单元格中的内容水平对齐方式，类似text-alingn
char=”” 根据字符对齐
charoff=”” 字符对齐的偏移量
colspan="" 横跨列，从此列向右跨几列
rowspan=”” 竖跨行，从此行向下跨几行
headers=”” 单元格相关表头
scope=”” 单元格与表头关联，无任何视觉效果
valign=”” 单元格中的内容垂直对齐方式，类似vertical-alingn
  • 定义跨单元格显示
    colspan横跨列、rowspan横跨行显示，取值为正，当取值为0，则跨至最后一行!
  • 定义表头单元格
    scope属性，关联<th>与<td>。关联<thead><tbody><tfoot>与<td>。关联<col>、<colgroup>与<td>
  • 为单元格指定表头
    <td headers="name"></th>，属性headers的值就是表头的ID，先给表头指定ID.

4、网页功能标签

网页除了展示内容外，还有两个重要功能，跳转链接(各种网页相互连接)、用户与网站交换数据！

超链接标签<a>

包含两个部分：链接目标(跳转的地址)、链接标签(可以是文本、图片等，单击浏览器展示的内容)，激活链接标签就能到达链接目标！

href=""属性链接地址，<a></a>之间存放标签！可以是文本标签，可以是图片标签。

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

a标签的属性

属性 说明
download 此为下载链接
href 链接页面的URL
target 在何处打开新页面

块链接

<a></a>之间标签可以放任何类型的元素或元素组！

锚点链接

指向页面中的特定位置，先在此页面元素设置id属性，作为为锚点标记，然后用”a”标签进行链接！

链接目标

不仅可以链接网页，也可以链接非网页非图片的其它链接，比如email，文件，程序，脚本

下载链接

利用download属性，强制下载，而不是打不开才下载。

图像热点，热点区域标签<map>、图像映射中的区域标签<area>

为一张图的局部定义链接，单击热点区域，就会激活链接，跳转至指定位置！

<img src="images/china.jpg" width="618" height="499" usemap="#Map">
<map name="Map">
    <area shape="circle" coords="221,261,40" href="show.php?name=青海">
    <area shape="poly" coords="411,251,394,267" href="show.php?name=河南">
    <area shape="poly" coords="385,336,371,346" href="show.php?name=湖南">
</map>

插入图片，在图片中设置usemap=""属性，填入<map>标签的id或name与之绑定，再定义<map>热点区域，最重要的是定义图像映射中的区域，可以是不同形状和大小，使用属性设置！

属性 取值 说明
coords 坐标值 热点坐标
href URL 目标链接
nohref nohref 排除
shape rect、circ、poly 热点区域形状
target _blank 在何处打开链接目标

浮动框架标签<iframe>

在浮动框架<iframe>下，可以在页面中显示一个浮动的链接页面！默认大小是220px*120px，可以通过CSS样式修改大小，也有属性可以调整显示的功能！

<iframe src="https://www.bilibili.com"></iframe>

表单标签<form>、表单控件标签<input>

可以向网页提交信息，可以上传数据，是与网站互动的一种方式！表单由”form”包裹，提交的方式涉及到编程语言！核心是定义控件的”input”标签！

<form method="post" action="show-data.php">
    <!-- 各种表单元素 -->
    <fieldset>
        <h2 class="hdr-account">登录</h2>
        <div class="fields">
            <p class="row">
                <label for="first-name">用户名:</label>
                <input type="text" id="first-name" name="first_name" class="field-large" />
            </p>
            <p class="row">
                <label for="last-name">昵称:</label>
                <input type="text" id="last-name" name="last_name" class="field-large" />
            </p>
        </div>
    </fieldset>
    <!-- 提交按钮 -->
    <input type="submit" value="提 交" class="btn" />
</form>

注意：

每个表单都以<form></form>标签开始和结束，标签之间的内容，可以是其它标签<p>、<button>和各种控件<input type="" name="">

form可以把用户填写的数据提交给服务器，发送给服务器端的脚本进行处理！在服务器端，可以通过属性name来获取提交的数据！

表单控件标签

文本框标签<input type="text"/>

用于用户提交单行字符串的控件，提交姓名、住址、爱好等描述文本!

密码框标签<input type="password"/>

密码框和文本框唯一区别就是输入的文本会使用圆点隐藏!
属性size=""定义文本框大小，属性maxlength=""设置最多输入字符数

单选按钮<input type="radio"/>

显示为一个空心圆，顾名思义只能选中一个，并且用户无法输入，所以对多个按钮赋予同一个name值，value值用于提交给服务器处理的值，自己先定义好，再用<label>标签去聚焦，且注明提示文本，让用户知道自己准备选啥！一举两得，当然用<p>也可以！
当然再加上<fieldset>便签<legend>框选和描述更好!

复选框<input type="checkbox"/>

显示为一个方形，顾名思义可以选择多个“框”！
用<label>标签的文本可以不和<input>属性value值一样，value值是提交到服务器端脚本的数据!组内所有复选框使用同一个name值。name="name[]"，当用PHP处理表单，可以创建一个数组。
checked设置默认选择。

文本区域<textarea></textarea>

可以创建一个多行文本框，用于评论反馈等！有多个属性可以设置

属性 说明
maxlength="" 设置输入最大的字符数!
cols="" 用于文本区域宽度!（字符为单位）
rows="" 用于文本区域高度!
placeholder="" 定义用于占位的文本
wrap="hard/soft" 用于提交的文本是否显示自动换行符

没有value属性，使用hard时，包含换行符，必须设置cols属性，文本宽度!

下拉菜单和选择列表框

<select>里设置name属性，<option>里设置value属性

<select id="state" name="state">
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
    ...
</select>

上传文件标签<input type="file">

可以创建文件域，把本地文件上传到服务器。<form>添加multiple，允许上传多个文件!

隐藏字段<input type="hidden" value="提交表单">

提交按钮<input type="submit" value="提交表单">

当type="img"时，可以创建图片提交按钮，scr="地址" width="" height="" alt="替代文本"

总之：基本框架

<input type="" name="" value="">

type=""表示输入框的类型，name=""用于Javascript等脚本获取表单数据，value就是在没有输入任何值时，默认的显示值！

聚焦标签<label>

<label> </label>包裹文本和控件时，点击文本会聚焦到控件，对于单选框和复选框利于选中!

<label for="name"> </label>可以分离控件和文本，实现同样的功能，属性for的值为一个控件的name值时，点击包裹的内容可以聚焦到对于控件上!

<label></label>`或者`<label for="name"></label>

GET请求和POST请求

POST一般用于提交数据，不限内容，GET用于获取数据，提交的数据会出现在浏览器上方地址栏！

综合案例：

<form method="post" action="show-data.php">
    
    <!-- 各种表单元素 -->
    <fieldset>
        <h2 class="hdr-account">登录</h2>
        <div class="fields">
            <p class="row">
                <label for="first-name">用户名:</label>
                <input type="text" id="first-name" name="first_name" class="field-large" />
            </p>
            <p class="row">
                <label for="last-name">昵称:</label>
                <input type="text" id="last-name" name="last_name" class="field-large" />
            </p>
        </div>
    </fieldset>
    
    <!-- 提交按钮 -->
    <input type="submit" value="提 交" class="btn" />
</form>

表单属性

表单form自动补全输入autocomplete，禁止验证使用novalidate

控件input自动获取焦点autofocus="autofocus"

<form>
    <p>
        <input id="ok" type="submit" value="同意" autofocus>
        <input type="submit" value="拒绝" >
    </p>
</form>

控件input所属表单属性form=""

把控件放在表单外部，也可以关联

<form action="" method="get" id="form1">
请输入姓名：<input type="text" name="name1" autofocus/>
<input type="submit"  value="提交"/>
</form>
请输入住址：<input type="text" name="address1" form="form1" />

控件其它的属性

属性 范围 说明
height、width 图像提交控件 设置图像大小
min、max、step 输入最大最小字符数量
multiple 多选
pattern 匹配输入规则
placeholder 提示文本
required 定义必填

数据列表标签<datalist>

即可以选择提供的数据，又可以自己输入数据，与option标签配合使用，并把数据列表绑定到输入框，在输入框标签内，用list=""属性来引用<datalist>的id

<form action="testform.asp" method="get">
    请输入网址：
    <input type="url" list="url_list" name="weblink" />
    
    <datalist id="url_list">
        <option label="新浪" value="https://www.sina.com.cn" />
        <option label="搜狐" value="https://www.sohu.com" />
        <option label="网易" value="https://www.163.com" />
    </datalist>
    
    <input type="submit" value="提交" />
</form>

定义输出结果标签<output>

在浏览器中显示结果！相当于输出框！需javascript

CSS

前言

在每个元素中，添加样式属性，导致不易修改，文件变大加载缓慢，为了解决这个问题，采用分层的思想，即HTML专门用来表示内容组织结构，CSS专门负责网页外观表现！虽然分开写了，但在逻辑上还是一体的，HTML中不同标签自带了各种CSS样式！

原理

CSS本质是定义元素的样式规则，也就是告诉浏览器在网页中如何显示元素！浏览器先解析HTML文件，生成一颗文档对象模型树（DOM树），然后下载CSS文件，找到对应元素的样式也生成一颗DOM树，浏览器最终根据这两颗DOM树绘制并显示网页的元素！

和HTML一样，只需要说明使用样式，浏览器会根据代码自动渲染，由于HTML的结构具有层叠，所以在CSS样式中也包含层叠，对父元素设置样式，子元素会继承样式！

img

在HTML中引入CSS

必须先在HTML中引入CSS文件，CSS文件才会被下载并被解析，主要有两种形式

  1. 内部样式，使用<style>标签
<style>

</style>
  1. 外部样式，使用<link>标签
<link rel="stylesheet" href="css文件路径">

​ 或者使用@import命令

<style>
	@import url(css文件路径);
</style>

使用方法

搞清楚两个步骤就行，第一个步骤，给哪一个元素添加样式——选择器，第二个步骤，添加什么样的样式——声明(规则)，其中声明有包括属性和属性值！

一、选择器

元素选择器

根据元素的结构特征去选择，比如标签名称、id、class、还有就是全选（通用选择器）！

  • 标签选择器：直接引用HTML标签名称，匹配所有同标签元素！
<style>
p { 

}
</style>
  • 类(class)选择器：以点为前缀，后接一个类名，需要先在元素标签中定义class属性，然后再使用类选择器！与标签选择器用法类似，这个是匹配所有同类名元素！
<style>
    .red { }                        	
    .underline { }              
</style>

<body>
    <p class="underline">问君能有几多愁，恰似一江春水向东流。</p>
    <p class="red underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
</body>

  • id选择器：以井号为前缀，后接一个id名，需要先在元素标签中定义id属性，然后再使用id选择器！由于HTML中id属性唯一，所以选择的元素也是唯一！
<style>
    #box {

    }
</style>
  • 通配选择器：使用星号，来匹配所有元素，比如用于清除各种元素的边距！
<style>
    * {

    }
</style>
优先级

内链样式 > id > class > 内部样式 > 外部样式

关系选择器

两个元素间的关系，父子、兄弟，衍生出包含、和相邻！

  • 包含选择器：通过空格连接两个元素选择器！ #main p

  • 子选择器：通过大于号连接 h2 > span

  • 相邻选择器：通过加号连接 h2 + div

  • 兄弟选择器：通过波浪符号连接 h2 ~ p

属性选择器

根据标签的属性来匹配对应元素！使用中括号来定义，一般先指定标签，后接中括号！

  • 指定具有某属性的元素：标签[属性] a[id]
  • 指定具有某属性等于属性值的元素：标签[属性 = “属性值”] a[id="box"]
  • 指定具有某属性，属性值包含某个词的元素：标签[属性 = “属性值”] `a[title=”hello”]`
  • 属性值以什么词开始：标签[属性 ^= “属性值”]
  • 属性值以什么词结束：标签[属性 $= “属性值”]

等等~

伪选择器:

这是特殊的选择器，与元素内容无关，而是与元素的特征、状态、行为相关！具有动态特性，元素具有多种状态，规定其中一个状态下，使用某样式！

主要分为伪类选择器、伪对象选则器，其中核心是伪类选择器！

伪类选择器

主要是对元素不同状态或者行为下，定义不同样式，又分为结构伪类、否定伪类、状态伪类、目标伪类、动态伪类！

使用冒号作为前缀标识符，冒号前限定选择符，冒号后说明伪类对象名！冒号前后没有空格！

  • 结构伪类：根据文档结构相互关系来匹配元素，比如DOM树中父子关系#box li:first-child

  • 否定伪类：排除法，即过滤掉not()函数匹配的特定元素，p:not(.author)

  • 状态伪类：

  • 目标伪类：当元素被URL跳转后，则选中此元素，p:target

  • 动态伪类：是行为类的样式，是用户与元素交互后，才触发元素某种状态，才展示其样式！

链接：:link未访问，:visited已访问

所有元素：:hover鼠标悬停，:active鼠标点击那一刻，:focus鼠标点击后（选中）

伪对象选择器

针对不确定对象，通过特定类型的选择器，比如第一行，第一个字符，前面的内容，后面的内容来选择元素内部的内容！

通过冒号:，或者双冒号::作为语法标识符，冒号前添加选择符，冒号后伪伪对象名称

  • 段落第一个字符：p::first-letter
  • 段落第一行字符：p::first-line

二、样式声明（规则）

对body中显示的元素，规定内容的基本样式，如文本、列表、表格的颜色、大小、排版；每个元素的盒子模型当中：边距、轮廓、边框、阴影、背景；以及元素的动画效果；还有对元素的定位和布局！

通过键值对的方式，写再大括号内，每个声明之间，使用分号隔开！

1、内容样式

字体样式

可以设置文本内容，也就是标签中间的文字粗细、风格、大小、字体族、行高

字体类型font-family:字体名

font-family:"微软雅黑","黑体","宋体";

  • 字体大小font-size:字体大小，默认16px;1em;

  • 字体颜色color:颜色，默认black;#fff;rgb(255,255,255)

  • 字体粗细font-weight:，默认normal;400;

  • 字体风格font-style:，默认normal;

  • 字体修饰线text-decorration:，默认none;

  • 字体变形font-variant:

  • 字体大小写text-transform:，默认none;

其中简写，font:风格 粗细 大小 字体类型;

文本（排版）样式

微调段落的布局，主要是正文的排版效果！包括水平对齐、垂直对齐、行高、首行缩进、字符间距、字间距

  • 水平对齐text-align:

  • 垂直对齐vertical-align:

  • 文本间距letter-spacing:字间距，word-spacing:词间距

  • 行高line-height:，默认1.2em

  • 首行缩进text-indent:，以em为单位

  • 文本溢出text-overflow:，适用于块级元素，当内联内容溢出块，可以选择裁切掉！

  • 文本换行word-break:

高级字体设置

文本阴影text-shadow:

动态生成内容content:

插入文本内容、外部资源（图片、视频、音频等）、计数器、属性值等！

自定义字体@font-face{}

@font-face{
    font-family:
    font-style:
    font-variant:
    font-weight:
    font-stretch:
    font-size:
    src: url(字体地址)   	/* 设置字体文件的路径  */
}

其它综合样式

特殊值

  • 初始化值="initial"
  • 继承值="inherit"
  • 清除用户声明属性值="unset"
  • 继承文字颜色值="currentColor"：适用于背景、边框、盒子阴影设置，实现与文字颜色一致
  • 全透明色彩值="transparent"：等效于rgba(0,0,0,0)
  • 基于根元素字体大小rem单位，先设置根元素html样式，再到其它元素使用rem单位
html{
    font-size:62.5%;
}
p{
    font-size:1.6rem;
}

特殊属性

  • all属性all=""：全部属性都继承或者初始化时可以使用
  • 透明度属性opacity=""：整个元素对象的不透明度！取值[0,1]

注意：使用色彩函数的alpha通道，可以针对元素的内容，比如文字颜色和背景色单独定义不透明度！

色彩

除了颜色名称、十六进制颜色值、RGB，还新增3种！

  • rgba()函数: rgba(r,g,b,<opacity>)
  • hsl()函数: hsl(色调H[-360,360],饱和度S<百分比>,亮度L<百分比>)
  • hsla()函数: hsl(色调H[-360,360],饱和度S<百分比>,亮度L<百分比>,<opacity>)

列表符号样式

  • 列表项目符号类型list-style-type:：实心圆disc、空心圆circle、方块square········

  • 列表项目符号位置list-style-position:：外边outside、里边inside

  • 列表项目自定义符号list-style-image:url()：图标链接！

表格边框样式

表格单元格的边框，当然还可以把每个单元格看成是盒子，可以操控盒子模型布局等来改善表格！

属性 取值 说明
border-collapse separate(分开)、collapse(合并) 单元格的边框是分开还是合并
border-spacing length 单元格间距，边框之间的距离
caption-side top|bottom caption位于顶部还是底部
empty-cells show|hide 单元格无内容，是否显示边框
table-layout auto|fixed 是否是全渲染好才加载表格

其它的文本属性、背景颜色、图片等都可以设置，特别的利用<table><tr><td>来让单元格继承属性！不能继承的，再单独设置!

2、盒子模型

img

认识盒子

每个元素对应着一个四层区域，相互嵌套，称为盒子模型，除了文字、图片多媒体等内容，还可以自己设置内边距、边框、外边距！

img

每个区域又分为上、下、左、右，可以统一设置也可以单独设置，内外边距只能设置大小，而边框可以设置样式、颜色和大小！

盒子大小

元素总大小content(width\height)+2padding+2border+2margin

默认状态下，所有元素的初始状态内容、边框、内边距外边距都是0，也就是说当元素没有内容时，全都为0；当有内容时，宽高为内容宽高，并自动调整边框、内边距、外边距大小，增加元素总尺寸！

盒子边框、内外边距样式

边框border

边框可以设置边框风格、边框宽度、边框颜色，每一种可按顺时针依次设置，也可以统一设置。

  • 边框风格border-style：

  • 边框宽度border-width：

  • 边框颜色border-color:

  • 统一设置：boder:边框宽度 边框风格 边框颜色

  • 当内容为空时，边框宽度大于3px时，呈现为三角形!
    当内容有宽高时，边框宽度大于2px，呈现为梯形！统一颜色后显示为矩形!

外边距margin

只能设置大小

内边距padding

只能设置大小，当设置背景时，可以延伸到内边距！

盒子间合并

盒子垂直外边距合并

盒子按标准流排版，两个挨着的盒子，会合并垂直外边距，以最大的边距为准，如果外边距有负数，合并为外边距之和!

盒子相邻盒子外边距合并

等于两个盒子外边距之和

盒子的层级

盒子内

内容在前一层，背景在后一层，

盒子间

当某些盒子脱离文档流，与其它盒子重叠后，也有层次，会出现遮挡！除非设置透明度！

盒子类型

不同元素类型的盒子模型

分为三种元素，块级元素、行内元素、行内块级元素！在文档流中按下方规则，从上到下依次排列！

  • block：独占一行，垂直排列!

  • inline：不会独占一行，从左到右依次排列，内容宽高和上下外边距无效，宽高由内容撑开，可以设置4个方向的内边距，和左右方向外边距。

  • inline-block：从左到右依次排列，可以设置内容宽高!

  • 使用display属性，改变元素类型，可以把三种元素类型相互转换！

默认盒子边距

  • 视图——body外边距

  • 文本标签——p、h1-h6上下外边距

  • 列表标签——ul、ol上下外边距，样式圆点左边有内填充，dl上下外边距，dl左有内填充

  • img当有边框时，底部默认有1px空隙

设计网页时，先取消元素本身的边距，再自己设置合理的边距！

盒子其它样式

轮廓outline:

与边框不同，不占用页面空间，不一定是矩形；属于动态样式，只有当对象获得焦点，或被激活才出现！一般与动态伪类选择配合！

outline:宽||样式||颜色||偏移值

圆角border-radius：

设计元素的边框以圆角样式显示

/* 圆形显示 */
border-radius:50%;

阴影box-shadow:

设置元素的阴影效果！默认没有！

box-shadow: -10px 0 12px red,  10px 0 12px blue,  0 -10px 12px yellow,
顺序 取值 说明
默认为none inset 默认无阴影，当设置inset为内阴影，有阴影且不设置为外阴影
第一个长度值 长度值 水平偏移，可以为负
第二个长度值 长度值 垂直偏移，可以为负
存在第三个长度值时 长度值 阴影模糊度，不能为负
存在第四个长度值时 长度值 阴影外延值，可以为负
最后是颜色 颜色值 阴影颜色

背景图像background:""：允许同一元素内叠加多张背景图，新增三个相关属性！

  • background-clip：
  • background-origin
  • background-size

渐变背景

主要包含四个渐变函数linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()

线性渐变linear-gradient(angle,color-stop1,color-stop2)：指定方向和颜色

to-left/right/top/bottom

safari引擎使用-webkit-gradient()私有函数

火狐使用-moz-linear-gradient()私有函数

径向渐变radial-gradient(shape size at position,color-stop1,color-stop2)

3、动画

主要包含transform（元素的变形）、transitions（过渡变化）、animations（分步式演示）三大功能模块，实现过渡动画，或者关键帧动画！简单改变元素样式，比如字体大小、颜色、背景等也可以制作动画！

元素形变

transform让元素发生二维形变，主要包括放大、缩小、旋转、位置移动！

/* 分别对应位移、旋转、缩放 */
transform: translate() | rotate() | scale()
  • translate(x,y)：让元素从原始位置，分别沿X、Y方向移动若干像素，取正数向右、下方向移动！
  • rotate(xdeg)：让元素沿其中心，旋转指定的度数！取正数向顺时针转动！
  • scale(w,h)：按照比率，将元素拉伸相应倍数！w表示宽度拉伸比率，h表示高度拉伸比率！

还有一些三维变换属性，scale3d(x,y,z)、rotateX(angle)、rotateY(angle)等！

动画过渡

通常形变transform都要配合transitions过渡属性来使用，形变作为最终状态，过渡属性则负责规定，元素是如何从原始状态过渡到最终状态！

可以单独设置每一个过渡属性，也可以仅通过transitions属性，给出4个子属性的值！

transitions: transitions-property值 | transitions-duration值 | transitions-timing-function值 | transitions-delay值

  • transitions-property:：指定需要过渡效果的属性名称，可以变化的属性都变化，或者指定某几个属性能发生变化！

  • transitions-duration:：完成过渡需要的时间，单位为秒或者毫秒！

  • transitions-timing-function:：过渡变化的速度，整个变化过程的线性效果

  • transitions-delay:：变换效果开始的延迟时间，即多少秒或者毫秒后，才开始过渡变化！

触发动画

一般通过动态伪类触发：

针对链接：:link未访问，:visited已访问

所有元素：:hover鼠标悬停，:active鼠标点击那一刻，:focus鼠标点击后（元素被选中）

也可以用Javascript事件触发！

案例：

div {
	width: 200px;
    height: 200px;
    background: red;
    transitions-property: all;
    transitions-duration: 3s;
    transitions-timing-function: linear;
    transitions-delay: 2s;
}
div:hover {
    background: green;
    border-radius: 50%;
    transform: translate(30px,30px);
    transform: scale(0.8, 0.8);
}

4、布局

标准流排版

一篇网页上，分布着大量的盒子，为了更好的布局这些盒子，CSS规范对盒子给出了多种排版模型，其中默认的排版模型，叫做标准流排版。

盒子之间有嵌套关系，称为父子关系，同级别的称为兄弟关系；同级别的盒子，依次在父级盒子里面，按照块级元素、行内元素以及行内块元素的一个排列方式进行一个排列。以此类推父级盒子在更高一个父级盒子里面进行一个依次排列，层层嵌套，一个一个盒子依次排列！

自定义布局

所谓布局，就是按照自己的主观意愿，把哪些盒子摆放到页面合适得位置，一个好的布局效果，需要让各种元素按照合理的，自己审美方式去规划，布局！

自定义布局方法

最简单直接的办法，就是利用盒子模型，把所有块元素转化为行内块元素，先整体上大概布局，再到盒子内部添加各种子代盒子，再通过调整子代盒子内边距、外边距，实现各种元素按照理想排列！

但是对很多元素添加display:inline-block，这样的代码会带来很多问题，比如低版本浏览器不兼容元素，底部默认有空隙，换行空格会被解析，还是要按照标准流布局，一旦要改变，都要受影响，这些问题会导致不能大量的使用行内块元素，于是就有以下解决办法，原理上类似！

  • 先按标准流大概布置，然后把想移动的盒子设为浮动，脱离标准文档流，专门去自定义位置
  • 还是先整体布局，给父代盒子设置为弹性盒子，通过父代调节，实现子代横向、竖向排列，反正子代盒子由父代管控，层层控制，先整体布局，依次去调整子代、孙子代。。无限细分！
  • 最后通过边距或者定位去解决每个内容盒子的位置！

浮动float=""

用浮动排版能实现块级元素的行内排版！float=""，表示是否浮动，以及如何浮动！

当属性值为left或right时，元素将被视为块级元素！使用浮动排版时，元素会脱离文档流，在标准文档流中就当这个元素不存在！后面的元素会像前弥补位置！相当于在水面上漂浮了一层！

表现特征

  • 让块级元素在一行显示！具有行内元素的特质！
  • 浮动让行内元素变得有块元素特征，可以设置宽高，不设置宽高时，由内容宽高撑开！
  • 向指定方向靠拢，直到碰到包含框或另一浮动元素框！也就是浮动元素会靠齐浮动元素！
  • 浮动元素脱离文档流，无法撑开父元素，父代高度塌陷，父代可以设置高度解决，但不终极
  • 向同一方向浮动的元素，形成流式布局，如果前面排列的元素过宽，一行容不下时，会出现新元素换到下一行排列，上一行尾出现空隙的现象
  • 浮动会影响后续元素的布局，下方元素上移，如果是文字，那么这些文字将会围绕在浮动元素周围，合理布局也有别样效果！
  • 浮动元素脱离文档流，提升Z轴层次！

文字环绕原理

可以把元素看成一层，被元素包裹的内容在上一层，给元素设置为浮动之后，元素层上升到内容层，而原本的内容层就会被占据，导致浮动元素下方内容会挤压出环绕效果！

清除浮动

终极解决下方内容填充，父代高度塌陷，在下方元素的属性中设置:clear: ""; 可以是left、right或both

注意：使用clear时注意，必须是块元素，必须是同级关系，是消除文档流元素上方的浮动元素对自身的影响！当存在于父元素中，可以在子元素，使用空div来清除浮动引起的高度塌陷！

也可以使用伪元素清除父元素高度塌陷:after，注意：伪元素添加的内容为行内元素！

定位position: "";

为解决需要通过设置盒子间的外边距和内边距，才能把子元素内容摆放到父元素的合适位置，CSS提供了更简单的方法——定位position: ; 不同属性值规定不同的定位类型！

"static"静态定位

默认定位，按照块元素，行内元素，行内块元素标准流进行排列！

"relative"相对定位

相对元素的原始位置进行偏移，需要再设置top、right、bottom、left方向的偏移量！

①设置为相对定位，不设置偏移量，不会变化

②不脱离文档流

③提升层次

④相对自身原始位置计算偏移量

"absolute"绝对定位

相对自己最近的有定位的祖先元素，来进行定位，如果祖辈都没有定位，则相对于最外层的包含框定位，会脱离文档流。

①设置为绝对定位，不设置偏移量，会变化

②提升层次

③根据最近祖先元素的定位来计算偏移量（给父元素加上position:relative;让父元素有定位）

④不设置宽度时，由内容撑开

⑤使行内元素变成块级元素!

⑥触发BFC

"fixed"固定定位

相对浏览器可视窗口进行定位，位置固定，不随页面下滑而移动；

①脱离文档流，提升层层级

②固定在可视区的固定位置，不随滚动条的滚动而移动

③偏移量是相对于浏览器可视窗口，不设置偏移量，相当于在左上角。

④行内元素变成块级元素，宽度由内容撑开

⑤触发BFC

定位层级z-index: " ";

①没有z-index时，后定位层级高于前者

②同级的定位元素，有z-index，越大层越高

③不同级别的定位元素的z-index值没有可比性

全屏遮罩

  1. 全屏div

全屏div，也就是div的大小是可视窗屏幕一样大，默认html的宽度由浏览器屏幕大小绝定，body元素的宽度由html元素决定，div元素的宽度由body决定 。同时高度反之，html高度由body决定，body高度由div决定！因此，让宽度继承，即body,div宽度等于100%！同时取消body的外边距！

  1. 透明滤镜opacity: "";

默认元素不透明，使用opacity属性，让元素设置透明度。

①透明度参数是0-1;

②元素设置透明度后，内部所有东西都会变得透明!

对于低版本浏览器，使用filter:alpha(opacity=值);取值范围是0-100的正整数！一般在opacity后面再加上这个!

margin负值

用margin来移动元素位置，当为负值时，并不是为了向某方向移动，而是让元素放弃自身原始位置，让后面的元素跟上来!

弹性盒子display:flex;

使用弹性盒子，可以从大到小的依次排列内部盒子，给父级盒子设置display:flex;，子代就会按照行内元素从左到右依次排列，也可以设置从上到下依次排列，也就是说父代可以管理子代，整个HTML就是无数各父代和子代相互嵌套，只要父代能决定子代横向或纵向排列，就可以自定义布局！

弹性盒子功能

  • 一个弹性盒子，相当于一个容器(称为弹性容器)，内部可以存放很多其它盒子(称为弹性项目)

  • 子元素在父元素内实现对齐分布，子元素可以横向对齐和纵向对齐！

  • 父级盒子可以控制子级盒子的分布；比如居中、两端对齐、靠左靠右、靠上靠下、拉伸还是压缩

弹性容器的布局模式——横向还是纵向

从上到下一条轴，从左到右一条轴，这两根轴有主轴和交叉轴之分，哪一根为主轴，向哪一方排列

  • 主轴：项目（子级盒子）沿主轴排列，从主轴起点到主轴终点！默认横向为主轴！
  • 交叉轴：垂直于主轴！默认纵向为交叉轴！

案例

给父元素设置为弹性盒子，子代盒子默认为横向排列，具有行内元素的特征！

<!-- 可以设置一下子级盒子宽高、边框，便于分辨界限 -->
<div style="display: flex;">
    <div>伸缩项目1</div>
    <div>伸缩项目2</div>
    <div>伸缩项目3</div>
    <div>伸缩项目4</div>
    <div>伸缩项目5</div>
    <div>伸缩项目6</div>
</div>

image-20230509112129960

弹性容器默认样式

/* 主轴对齐方式 */
jistify-content: flex-start;
/* 主轴方向 */
flex-drection: row;
/* 交叉轴对齐方式 */
align-items: stretc;
  • 主轴方向为横向排列（横着排）
  • 沿主轴起点开始（靠左对齐）
  • 沿交叉轴拉伸，不设置弹性项目（子级盒子）大小，弹性项目（子级盒子）自动填充交叉轴！

弹性容器的设置——父级盒子

父级容器对子级盒子的分布，进行总体规划，实现对内部的总体布局！

弹性盒子内部的主轴方向flex-direction:row|row-reverse|coliumn|column-reverse

  • 主轴设置为行，沿着X方向、横着排！左右分布!

  • 设置为列，沿Y方向，按列排，上下分布!

单行排列还是允许多行flex-wrap:nowrap|wrap|wrap-reverse

设置弹性容器的宽高后，再设置内部的弹性项目宽高，当一行排不下时，弹性项目就会压缩自己，挤在一行内，当设置允许多行排列，这样，弹性项目就不会压缩自己，往下一行继续排列

设置对齐——空间分布——弹性核心知识！

分配容器的空白区域，项目是按自己多大占多大位置，从而挤在一堆，还是把容器内空间，均匀分配

  1. 主轴方向的空白区域

无论项目自身多大，去分配容器主轴方向的空间！

justify-content:flex-start|flex-end|center|space-between|space-around
  1. 交叉轴方向的空白区域

不设置项目大小，默认为拉伸沾满交叉轴，当项目设置大小后，可以分配容器交叉轴的空间！

align-itens:flex-star|flex-end|center|baseline|stretch
  1. 换行后，多行分配空白区域

必须是多行情况下，换行后，一行项目与一行项目，在交叉轴分配空间！

align-content:flex-start|flex-end|center|space-between|space-around|stretch

弹性项目设置——子级盒子

内部盒子的CSS属性，子级盒子可以单独对自己的布局样式，脱离父级的统一布局！

单独的交叉轴对齐align-self:flex-star|flex-end|center|baseline|stretch

每个项目可以单独控制自己，在交叉轴上分配的空间，是拉伸，还是其它！类似align-itens

单独的主轴对齐margin:auto

通过外边距来实现，自身在容器中脱离总体布局！一个项目与其它项目在主轴方向的对齐位置！

弹性flex:none|<flex-grow><flex-shrink>||<flex-basis>

用于弹性项目，默认值为“0 1 auto”，其中||为可选参数，

  • 扩展空间flex-grow:<number>：弹性容器剩余空间，按比例扩展

  • 收缩空间flex-shrink:<number>：与之相反，用来定义收缩比率，不允许负数，默认为1

  • 弹性比率 flex-basis:<length>|<percentage>|auto|content：剩余空间按比率进行弹性

显示位置order:<interger>

用整数来定义排列顺序，数值小的排在前面，可以为负值！

元素在页面上的位置——元素的定位

position属性控制元素在页面中的定位方式，和精确定位，来实现元素的布局

position属性由两部分声明组成

第一步：指定元素在文档中定位方式

position: static | relative | fixed | absolute;

第二步：指定元素最终位置

除static外，其余定位方式都可以通过上(top)、下(bottom)、左(left)、右(right)来唯一确认位置！

top: 10px | 30%;
left:30px | 20%;

static

默认值，标准的文档流

relative相对定位

元素不脱离文档流，相对于原本的位置之上移动，不推荐单独使用，当配合absolute有奇效

absolute绝对定位

脱离文档流，相对于static定位以外的第一个父元素进行定位，限定词有点多，可以理解为父元素都是默认static时，相对于页面定位，如果父元素有其它定位方式，相对于这个父元素定位，代表着要和其它定位方式一起使用

最常用：将父元素设置为相对定位，将子元素设置为绝对定位！

fixed

脱离文档流，相对于视口（浏览器窗口和打印页面窗口）进行定位！相对于窗口进行固定定位！

自适应布局和响应式布局

为了在大屏和和小屏幕上浏览网页都有良好的体验，所以在设计网页布局时，考虑多种终端！

自适应布局就是给网页设置多套样式，比如给手机浏览设置一套布局样式，给电脑端设置一套布局和样式，给平板端设置一套布局样式，当检测到对应的屏幕大小时，自动调用相应的布局！问题是麻烦，写几份样式工程量大！

响应式布局就是先按照正常屏幕布局，然后再给不同屏幕大小设置断点，当检测到多大时，需要在原本布局上做出什么样的调整，只调整相应的样式，不需要整体全部编写，所有终端样式集成在一起，文件变大，加载变慢，在手机端加载的布局样式其实也包含了电脑端的布局样式等！优势是无缝拉伸

响应式布局

一个网页是由大大小小不同盒子拼起来的，相互嵌套，也就是说，一个页面中里面全是盒子！只需要修改盒子显示还是隐藏就可以适配不同屏幕，在浏览网页时，屏幕可以滑动下拉条，或滚动，来无限拓展高度，但宽度都是屏幕宽度，所以只需要自适应宽度，或者等比例划分宽度，就能适配不同屏幕

自动调节尺寸

当盒子的宽高大小是与屏幕大小决定时，那么盒子就可以根据屏幕大小自动调节大小了！

image-20230524152611393

固定单位，也就意味着不能调整大小，在响应式布局中是大忌，通过采用相对单位！

%百分比单位，相对父级

子元素相对父元素的大小，根元素相对可视窗口大小，只是盒子大小变化，字体大小不变化！

em单位控制字体，相对父级

当父级设置font-size:字体大小时，子级元素使用 em 单位，是相对父级的字体大小呈倍数变化！

rem单位，相对根元素<html>

当元素设置字体大小，使用 rem 单位时，是相对根元素<html>的字体大小，呈倍数变化！

通过这种方式就统一了全局字体的大小！默认是字体是16px，16 * 62.5% = 10px，这样利于计算

html {
	font-size: 62.5%;
}
p {
    font-size: 1.6rem;
}

vh、vw单位，相对可视窗口

HTML结构就是套娃，每个父元素默认是由子元素撑开的，且最大的父元素就是<html>，所以想要设置全屏背景时，先让<html>为100%，然后子代再100%去继承，最后可视窗口才会被占满！

然后vh/vw单位不需要，它把可视窗口分成了100份，直接设置宽高就能填充相应份儿数！

媒体查询

当盒子大小可以动态改变后，那么就可以开始设置断点来根据屏幕大小使用不同样式，或者可以根据设备的特性，如屏幕的宽度、高度，为设备定义独立的CSS样式表！借助媒体查询实现不同类型设备或者屏幕大小，使用不同样式，一个媒体查询由一个可选的媒体类型和N个限制范围的表达式组成。

使用方式一：通过media=""属性

定义外部样式表

`<link href="css.css" rel="stylesheet" type="text/css" media="handheld"/>`

定义内部样式表

<style media="screen and (min-width:600px)">

</style>

使用方式二：通过@media规则

语法：@media [only | not] <设备类型> [and <媒体特性>] { 样式 }

可以指定媒体类型，然后再指定媒体特性，放在圆括号里，再使用逻辑运算and、not、only、,连接多个表达式！逗号相当于逻辑或，使用min、max代表小于和大于！媒体特性格式也是冒号分隔！

image-20230524155231044

一般是设置不同宽度下，显示不同盒子不同的样式，高度可以通过滚动条查看！

@media screen (min-width:600px) {
    .box {
        background-color: red;
    }
}

总之：响应式布局，就是在不同情况下，决定是否显示某些盒子，显示的大小等

项目练习:后台页面

通过flex弹性盒子，设计后台页面的布局，通过position定位来确认内容位置！

1、去掉默认样式

去掉body的外边距，并赋予底色

body {
    margin: 0;
    /* 视图高度，占100%，填充整个可视窗口大小 */
    height: 100vh;
    background-color: #eee;
}
2、去掉所有默认样式

去掉所有默认的外边距和内边距，方便后续自定义边距！

3、所有添加黑色边框

用于设计之初观察

* {
    border: 1px solid #000;
}
4、先设计，再添加

先设置样式，用于公共样式，再给盒子添加样式

5、分析布局——左右分布

要么上下，要么左右，用flex控制左右排列

.flex {
    display: flex;
}
6、上下分布

使用flex:1分配剩余空间，flex+column控制上下排列

.flex1{
    flex: 1;
}
.column {
    flex-direction: column;
}
7、从大到小依次分析

重复步骤5、6直到把大致布局弄出来！

8、完成布局，取消黑框

取消黑色边框，并设置每个板块的外边距

.marg8 {
    margin: 8px;
}
.margR8 {
    margin-right: 8px;
}
.margT8 {
    margin-top: 8px;
}
9、给盒子设置阴影

最后用分号结尾，不然不显示！

box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
			rgb(0 0 0 / 14%) 0px 1px 1px 0px,
			rgb(0 0 0 / 12%) 0px 1px 3px -1px;
10、给内容区设置，可以滚动
style="overflow: auto;"
11、给头部设置Z轴的层次

让内容滚动时，从下面经过

style="z-index: 1;"
12、设置自我介绍

通过给上层盒子设置相对定位，内层盒子设置绝对定位，来设置细节布局！

.Dingwei {
    position: relative;
}
.aDingwei {
    position: absolute;
    top: 15px;
    left: 35px;
    height: 40px;
13、自适应媒体查询

这个样式，不影响正常显示，当屏幕小于600px，里面的样式才生效！

/* 媒体查询，自适应 */
@media (max-width: 600px) {
    .ceBianLan {
        display: none;
    }
    .zsyColumn {
        flex-direction: column;
    }
}