Web前端

black_tea114514

已于 2022-12-11 22:51:49 修改

阅读量2.3k

点赞数

文章标签：前端 css html javascript

于 2022-10-21 17:17:56 首次发布

本文链接：https://blog.csdn.net/black_tea114514/article/details/127346255

版权

关于我Web天胡开局，直接崩盘那些事

HTML+CSS系列之导学
第一章拨云见日

HTML+CSS系列之导学

1.拨云见日

HTML、CSS、切图流程、PC企业站布局、PC游戏站布局

2.溯本求源

扩展HTML、扩展CSS、HTML5新语法、CSS3新语法、兼容与hack

3.风生水起

弹性布局、网格布局、移动端布局、响应式布局、Bootstrap

4.巧夺天工

预编译CSS、postcss、CSS架构、高级功能、CSS与JS交互

兴趣+努力=玛莎拉蒂

第一章拨云见日

1.什么是HTML、CSS

是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站

查看网站源代码：右键选择查看源代码

如何去写代码？写到哪里？

一个网站是由多个网页构成的
每一个网页都是一个.html文件
最基础：使用文本文档

文本文档重命名修改成.html后缀
打开方式选择记事本开始编写网页（记得保存！）

HTML定义

HTML是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

CSS定义

CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，同时能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.宇宙第一编辑器VS Code

VS Code，全称visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器

编辑器的基本使用

创建文件、创建文件夹、重命名、删除、搜索（查找代码、字符等）
设置：文件—首选项—设置（大小，是否换行word wrap）
ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c/v：复制粘贴
ctrl+z/ctrl+y：撤销前进
shitf+end：从头选中一行
shitf+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑/↓ ：快速移动一行
tab：向后缩进
tab+shift：向前缩进
alt+鼠标左键：多光标
ctrl+d：选择相同元素的下一个

3.chrome浏览器

谷歌浏览器（Google Chrome）是一款可让你更快速、轻松、且安全地使用网络的浏览器。

下载地址

4.深入了解网站开发

UI设计师：设计稿
Web前端开发工程师（H5开发）：
设计稿->代码
数据库数据->显示到页面
HTML+CSS+JavaScript

HTML：结构、CSS：样式、JavaScript：交互行为

Web后端开发工程师：存储数据

5.HTML基础结构与属性

基础结构

HTML：超文本标记语言
语言：编程语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记（标签）：<单词>

标签介绍

在这里插入图片描述

单标签：<header>
双标签：<header></header>

创建标签的快捷键：单词+tab —> <单词>

标签可以上下排列，也可以组合嵌套
标签的属性：修饰标签，设置当前标签的一些功能

<标签（空格）属性=“值2” 属性2=“值2”>

6.HTML初始代码

意义

规范书写！！
每一个HTML文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

使用方法

！+Tab键

内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>：文档声明（告诉浏览器这是一个HTML文件）
<head></head>：网页的头部
<html lang="en">：HTML文件最外层标签（包括着所以的HTML标签代码）

lang="en"表示一个英文网站，lang="zh-CN"表示一个中文网站

<meta charset="UTF-8">：元信息（编写网页中的一些辅助信息）

“charset="UTF-8”国际编码，让网页不出现乱码错误

<title>Document</title>：网页的标题
<body></body>：网页的内容部分

7.HTML注释

写法


在浏览器中看不到，只能在代码中看到注释的内容。

意义

1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示

快捷键与快捷删除

ctrl+/:光标移到最前面，整个内容概括进来
shift+alt+a:创建一个注释标签或者全选概括内容

8.HTML语化

定义

根据网页中内容的结构，选择适合的HTML标签进行编写。
提取网页标签方法

标题与段落（语化标签）

h标签：标题
有六个等级

<h1>最重要且一个.html文件中只能有一个</h1>
<h2></h2>
...
<h6>h5、h6不建议使用（用不到）</h6>

p标签：段落

<p>一个段落就是一个标签</p>

调试工具（非常重要）

网页鼠标右键->检查（类似名称）

文本修饰标签

强调加粗：<strong></strong>
强调斜体：<em></em>

区别：1.写法与展示效果 2.强调程度，strong>em

上下标：<sub></sub>（下标）、<sup></sup>（上标）

例：a<sup>2</sup>+b²=c²
O<sub>2</sub> H₂O

删除增添文本：<del></del>删除<ins></ins>增添

例：原价~~300~~,现价<ins>100</ins>
一般情况下二者配合使用

图片标签与图片属性

图片标签：<img>

img+Tab-><img src="" alt="" title="" width="" height="">

src：引入图片地址

右键图片->新标签页打开图片->复制地址

alt：当图片出现问题的时候，可以出现友好提示
当图片没有问题是，alt属性不显示
title：提示信息（光标移动到图片上显示提示）
在这里插入图片描述

width、height：图片大小

引号里填像素大小（数字）

没加宽高，图片显示方式

加了宽高图片显示方式

引入文件的地址路径

相对路径

.在路径中表示当前路径（和你的.html文件在同一层级或者层级内的文件夹中）
..在路径中表示上一级路径（在你的.html文件上一级的层级中或者上一级中的文件夹中）

src=“./文件夹/文件夹/…/图片.jpg”
src=“../文件夹/文件夹/…/图片.jpg”

绝对路径

图片在网络中的地址或者电脑中的指定路径

跳转链接

链接标签：<a></a>
href属性：链接的地址
target属性：可以改变链接打开方式（默认在当前页面打开_self，新窗口打开_blank）

快捷键：a+tab

<a href=""></a>

例：<a href="http://www.baidu.com">访问百度</a>
用图片转跳

转跳新窗口

<a href="http://wwww.baidu.com" target="_blank">访问百度</a>

效果

改变`<a>`的默认方法

1.全部都加上_blank
2.<base>标签：改变链接的默认行为的
在这里插入图片描述

一般加在<head>中，因为不要求在网站上显示

跳转锚点（例如百度百科目录）

实现方式：
1.#+id属性
2.#+name属性

id属性：

<a href="#html">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<h2 id="html">标题1</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

<h2 id="2">标题2</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

<h2 id="3">标题3</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

name属性：

<a href="#html">1</a>
<a href="#2">2</a>
<a href="#3">3</a>

<a name="html"></a>
<h2>标题1</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

<a name="2"></a>
<h2>标题2</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

<a name="3"></a>
<h2>标题3</h2>
<p>123455</p>
<p>123455</p>
<p>123455</p>
<p>123455</p>

9.特殊符号

在编写文本时，经常会遇到一些输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格，网页不会解析出多个空格，在HTML中为这些特殊字符准备了专门代码。
在这里插入图片描述

>和<（<）解决内容中与代码的<>冲突问题
例：

10.列表标签

无序列表

<ul><li>：列表的最外层容器、列表项

注：ul和li必须是组合出现，他们之间不能有其他标签

<ul>
    <li>正确演示</li>
</ul>
<ul>
    <p>
        <li>错误演示</li>
    </p>
</ul>
<u>
    <li><a href="">也是正确的</a></li>
</u>

type属性：改变前面标记的样式（一般都是CSS去控制）
在这里插入图片描述

例：disc:默认值；实心圆，circle：空心圆，square：实心方块

<ul type="circle">
    <li>正确演示</li>
</ul>

有序列表

<ol><li>：列表最外层容器、列表项

注：有序列表用的非常少，一般都使用无序列表，无序列表可以去代替有序列表。

方法同无序列表

1：默认值，数字有序列表
a：按小写字母顺序排序
A：按大写排序
i：按罗马字母，小写
I：按罗马大写

定义列表

<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述

注：列表项需要添加标题和对标题进行叙述的内容

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

在这里插入图片描述

嵌套列表

列表之间可以互相嵌套形成多层级列表

<ul>
    <li>
        江苏省
<ul>
    <li>徐州市</li>
    <li>连云港市</li>
</ul>
    </li>
         <li>
        山东省
            <ul>
            <li>济南</li>
            </ul>
         </li>
</ul>

江苏省
- 徐州市
- 连云港市
山东省
- 济南

<dl>
    <dt>江苏省</dt>
    <dd>
      <dl>
         <dt>徐州市</dt>
         <dd>云龙区</dd>
         <dd>鼓楼区</dd>
      </dl>
      <dl>
        <dt>南京市</dt>
        <dd>仙林区</dd>
      </dl>
    </dd>
</dl>

江苏省

徐州市

云龙区

鼓楼区

南京市

仙林区

11.表格标签

<table></table>：表格最外层的容器
<tr></tr>：定义表格行
<th></th>：定义表头
<td></td>：定义表格单元
<caption></caption>：定义表格标题

注：之间有嵌套关系的，要符合嵌套规范

<table>
    <caption>天气预报</caption>
    <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>出行情况</th>
    </tr>
    <tr>
        <td>2022.10.22</td>
        <td><img src="https://i-blog.csdnimg.cn/blog_migrate/179be11592f2a8a5053b6bd1c63daef4.gif" alt=""></td>
        <td>阴天，适宜出行</td>
    </tr>
    <tr>
        <td>2022.10.23</td>
        <td><img src="https://i-blog.csdnimg.cn/blog_migrate/4d895f6e319538f42dd4ce0fde351f52.gif" alt=""></td>
        <td>小雨记得出门带伞</td>
    </tr>

天气预报
日期	天气情况	出行情况
2022.10.22		阴天，适宜出行
2022.10.23		小雨记得出门带伞

为了使代码更规范，方便日后检查等情况，可加入语义化标签：<tHead>、<tBody>、<tFood>

注：语义化标签在网页中不显示
一个table中，tBody可以出现多次，但tHead，tFood只能出现一次

    **<thead>**
        <tr>
           <th>日期</th>
           <th>天气情况</th>
           <th>出行情况</th>
        </tr>
    **</thead>**
    **<tbody>**
       <tr>
           <td>2022.10.22</td>
           <td><img src="https://i-blog.csdnimg.cn/blog_migrate/179be11592f2a8a5053b6bd1c63daef4.gif" alt=""></td>
           <td>阴天，适宜出行</td>
       </tr>
       <tr>
        <td>2022.10.23</td>
        <td><img src="https://i-blog.csdnimg.cn/blog_migrate/4d895f6e319538f42dd4ce0fde351f52.gif" alt=""></td>
        <td>小雨记得出门带伞</td>
       </tr>
    **</tbody>**

表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

align：left、center、right
valign：top、middle、bottom

<table **border="1" cellpadding="30" cellspacing="30"**>
    <caption>天气预报</caption>
    <thead>
        <tr **align="left"**>
           <th **colspan="2"**>日期</th>
           <th>天气情况</th>
           <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
       <tr **valign="top"**>
           <td **rowspan="2"**>2022.10.22</td>
           <td>白天</td>
           <td><img src="https://i-blog.csdnimg.cn/blog_migrate/179be11592f2a8a5053b6bd1c63daef4.gif" alt=""></td>
           <td>阴天，适宜出行</td>
       </tr>
       <tr **valign="top"**>
            <td>晚上</td>
            <td><img src="https://i-blog.csdnimg.cn/blog_migrate/179be11592f2a8a5053b6bd1c63daef4.gif" alt=""></td>
            <td>阴天，适宜出行</td>
        </tr>
       <tr **valign="bottom"**>
            <td **rowspan="2"**>2022.10.23</td>
            <td>白天</td>
            <td><img src="https://i-blog.csdnimg.cn/blog_migrate/4d895f6e319538f42dd4ce0fde351f52.gif" alt=""></td>
            <td>小雨记得出门带伞</td>
        </tr>
        <tr **valign="bottom"**>
            <td>晚上</td>
            <td><img src="https://i-blog.csdnimg.cn/blog_migrate/4d895f6e319538f42dd4ce0fde351f52.gif" alt=""></td>
            <td>小雨记得出门带伞</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

12.表单标签

基础表单

<form></form>：表单最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如密码框，输入框，复选框等。
在这里插入图片描述

input标签有一个type属性，决定是什么控件

补充：
from->action（提交表单时，向何处发送表单）
checkbox/radio->checked（初始时自动选择）disabled（不可选择）
text/password->placeholder（框中显示文本）

注意单选框使用时要定义内部属性name，name相同才能单选

<form action="http://www..baidu.com">
        <h2>账号：</h2>
        <input type="text" placeholder="请输入你的账号">
        <h2>密码：</h2>
        <input type="password" placeholder="请输入你的密码">
        <h2>多选</h2>
        <input type="checkbox" checked>清华
        <input type="checkbox" checked>北大
        <input type="checkbox" disabled>人大
        <h2>单选</h2>
        <input type="radio" name="1">1
        <input type="radio" name="1">2
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交重置</h2>
        <input type="submit">
        <input type="reset">
    </form>

在这里插入图片描述

多行文本框

<textarea></textarea>：多行文本框

<textarea name="" id="" cols="30" rows="10"></textarea>
cols是列（像素），row是行（像素）

下拉菜单

<select><option></option></select>：下拉菜单

<select>
    <option>请选择</option>
    <option>上海</option>
    <option>北京</option>
</select>

注：菜单表示默认为第一个option的内容
option内部属性：selected可以使得菜单默认显示更改

在这里插入图片描述

注：若不想让“请选择”作为选择项，只需加入内部属性disabled

select 内部属性

1.size

size：表示菜单显示几个option

例：size=“2”

2.multiple

multiple：多选

例：select multiple

ctrl+鼠标左键或者拖拽选项

注：multiple也可用于<input type="file>(提交标签）中

辅助表单

<label></label>：辅助表单（使可选中范围变大，提升用户体验）

<input type="radio" name="1" id="man"><label for="man">男</label>
 <input type="radio" name="1" id="woman"><label for="woman">女</label>

使得“男，女”字样也可选择
在这里插入图片描述

注：label要加在选项内容之间
for内部属性映射id->二者要一致

“男”映射“妖人”前面的选项

13.表格表单组合

表格表单之间可以相互组合形成数据展示效果

<form action="">
        <table border="1" cellpadding="30">
            *<tbody>*
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                    	<input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            *</tbody>*
        </table>
    </form>

在这里插入图片描述

14.`<div><span>`

<div>（块）：分块、分割。用于划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，同时也可以嵌套多层。用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
<span>（内联）：用来修饰文字，div和span都是没有任何默认样式的，需要css配合

CSS篇

15.CSS基础语法

格式：选择器{属性1:值1；属性2:值2}

选择器：div、span、p（段落）、h（标题）等

单位：px->像素（pixel）、%->百分比

%：相对于外部容器的百分比

基本样式：width（宽）、height（高）、background-color
CSS注释：与HTML一致
1.Ctrl+/
2.shift+alt+a

16.CSS样式的引入方式

内联（行内、行间）样式

在html标签上添加style属性来实现

内部样式

在head里的<style>标签内添加的样式

内部样式的优点在于可以复用代码

在这里插入图片描述
遇到多个div想用不同的样式时：
在style中运用#div数字，body中的<div id=“div数字”>

外部样式

引入一个单独的CSS文件。名称.css

link

当前页面与外部资源的映射关系，通过link引入外部资源。
<rel>内部属性：指定资源与页面的关系
在这里插入图片描述

主要用stylesheet

<href>内部属性：资源的地址

@import（了解即可）

写法：@import url（文件相对路径）
在这里插入图片描述

17.CSS颜色表示法

单词表示法

red、yellow、green…

十六进制表示法

颜色表示：#000000（黑）~#ffffff（白）

获取颜色用PS

rgb三原色表示法

颜色表示：rgb（0，0，0）
取值范围：0~255

透明颜色

transparent

18.CSS背景样式

背景颜色

background-color：背景颜色

背景图片

background-image:url（相对路径）
在这里插入图片描述

默认会水平，垂直都铺满背景图

背景图片的平铺方式

background-repeat：
repeat-x（x轴平铺）；repeat-y（y轴平铺）；repeat（x，y）（xy平铺）；no-repeat（都不平铺）

no-repeat：
若背景图容量＜容器，只会在左上角显示
反之，则会溢出

背景图片的位置

background-position：x；y
正数向右下移动，负数向左上
xy表示：
1.像素
2.单词
x：left、center、right
y：top、center、bottom
3.百分比

背景图随滚动条的移动方式

background-attachment：内部属性
scroll（背景图随着容器滚动而滚动，相对位置不变）

背景位置是按照当前元素进行偏移的

fixed（固定背景图，绝对位置不变）
在这里插入图片描述

背景位置是按照浏览器进行偏移的

在这里插入图片描述
scroll：是红框
fixed：黑框（浏览器）

19.CSS边框设置

border-style：边框样式

内部属性：
solid：实线
dashed：虚线
dotted：点线

border-width：边框大小（像素等）
border-color：边框颜色（单词、16进制等）

若只想设置某一条边框，需要在border后加上**-right、top、left、bottom-**

20.CSS文字样式

字体类型

font-family：字体类型
只针对英文字体：Arial、‘Times New Roman’
中文字体：微软雅黑（默认），宋体

中文字体中英文都可以改变

字体分为衬线体与非衬线体
在这里插入图片描述
多字体设置：
从左到右备选方案，若都没有，默认计算机字体

注：字体中有空格时一定要加引号‘’

字体粗细

font-weight：100~900/单词
模式：正常（normal）加粗（bold）
写法：单词或者数值

100 ~500是正常，600 ~900加粗

文字样式

font-style：单词
italic（斜体）、normal（正常）

注：oblique也是表示斜体（了解即可不常用）

区别：italic 带有倾斜属性的才可以倾斜操作，oblique 不带倾斜属性的字体也可倾斜

文字颜色

color

21.CSS段落样式

在head中加style里用p{内部属性（空格隔开）内部属性（空格隔开）内部属性}

文本修饰

text-decoration：内部属性
下划线（underline），删除线（line-through）、上划线（overline）、不添加任何装饰（none）

文本大小写（针对英文段落）

text-transform：内部属性
全部小写：lowercase
全部大写：uppercase
只针对首字母大写：capitalize

文本缩进

text-indent：像素（默认一个字16px）

主要针对首行缩进

em单位：相对永远跟字体设置单位相同（font-size）

文本对齐方式

text-align：内部属性
内部属性：left、center、right、justify（两端点对齐，中间部分自动调试）

定义字间距

letter-spacing：像素

定义词间距（针对英文）

word-spacing：像素

强制折行：（多用于div中）
1.word-break：break-all（非常强烈的折行）
2.word-wrap：break-word（不是这么强烈的折行，若一个单词巨长，本行剩余空白不能放下，整个单词下一行开始写）

22.CSS复合样式

定义：一个CSS属性只控制一种样式，叫做单一样式。控制多种样式，叫做复合样式。

复合样式：
background：颜色（空格）背景图片（空格）平铺方式（空格）位置
border：大小（空格）颜色（空格）样式
font：大小（空格）字体【size family要写在最后】

font复合写法至少两个属性大小，字体
color不属于font系列

复合写法有的不需要关心属性顺序有的需要关心顺序，例如：font关心顺序
不要混写，尽量要么复合要么单一，若非要混合就先复合再单一

23.CSS选择器

ID选择器

CSS：#elem{}
html：id=“elem”

注：ID值唯一
命名规范：字母、-、_、数字（命名第一位不能是数字）
命名方式：驼峰式（用途英文）、下划线式、短线写法

小驼峰：searchButton 大驼峰：SearchButton
下划线写法：search_button
短线写法：search-button

CLASS选择器

CSS：.elem{}
html：class=“elem”

注：
1.class选择器是可以重复使用的
2.可添加多个class样式

3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。

4.标签+类的写法
只针对某个标签生效

标签选择器(TAG选择器）

CSS：div{ }
html：<div>
使用场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中（例：层次选择器）

群组选择器（分组选择器）

CSS：div，p，span{ }
通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

通配选择器

*{ } —>div，ul，li，p，h…

注：尽量避免使用通配选择器，因为会给所有标签添加样式
使用场景：去掉所有标签的默认样式时

层次选择器

后代：M（空格）N{ }
在M标签的层次下，选择N下所有的N标签
父子：M>N{ }
在M标签下，选择仅次于M标签下一层级的N标签
兄弟：M~N{ }
先找到M表签，M标签下面所有同级的指定标签
相邻：M+N{ }
M下面相邻的N标签

属性选择器

在这里插入图片描述
M[attr]{ }
只能选择指定的属性（一模一样）（完全匹配）

例：

M[attr*=value]{ }
只要出现含有value的值都可被选择（部分匹配）

例：

M[attr^=value]{ }
表示起始值为value的值

例：

M[attr$=value]{ }
表示结尾为value的值

例：

M[ attr1][attr2 ]
表示同时有attr1,2两个属性才满足

例：

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类添加。
标签：伪类{ }
：link 访问前的样式（只能添加给a标签）
：visited 访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式（可以添加给所有的标签）
：active 鼠标按下时的样式（可以添加给所有的标签）

四种伪类选择器可累加使用，顺序为：L V H A
注：访问过a标签后，刷新页面不会返回为link状态（清理历史记录即可刷新返回link状态）

一般网站a类标签用a{ }和hover

通过伪类方式给给元素添加一个文本内容
：after 在元素之后添加
：before 在元素之前添加

例：

主要针对表单元素
只有对应拥有元素的时候才能显示
：checked
：disabled
：focus（选中时出现光标）

例：

结构性伪类选择器

标签：nth-of-type（数值1~n）、标签：nth-child（）
标签：first-of-type（）（第一个）、标签：first-child（）
标签：last-of-type（）（最后一个）、标签：last-child（）
标签：only-of-type（）（只有一个是才能生效）、标签：only-child（）

n值表示从零到无穷大，2n 2n+1等隔行换色

type：类型
child：孩子

理解：
li：nth-of-type（3）{ }指<li>中的第三个
li：nth-child（3）{ }指第一个<li>开始的选项第三个

24.CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但可以加布局标签：inherit强行继承）

继承大小，颜色

25.CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

例：蓝色覆盖青色

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

例：青色会被外部样式颜色覆盖

外部样式颜色会被青色覆盖

单一样式优先级

style行间 > id > class > tag > * > 继承

例：style高于id
id高于class
class大于tag（标签）
tag（标签）大于通配
通配大于继承

注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

提升优先级方法

!important（非规范）

提升样式优先级的一种手段，不建议使用
且不能针对继承提升其优先级

id优先级被无限提高

标签+类与单类

标签＋类优先级大于单类
在这里插入图片描述

群组选择器

与单一选择器的优先级相同，靠后写的优先级高

例：黑色被红色覆盖

红色被黑色覆盖

层次优先级

1.权重比较（权重累加比较）
ul li .box p input{ }（1+1+10+1+1）
.hello span #elem{ }（10+1+100）

是等级的比较，100个1级权重也小于一个10权重

2.约分比较
ul li .box p input{ }
.hello span #elem{ }
上下两个进行约分剩下
li p input
#elem
（上面小于下面）
若
#login ul li .box p input{ }
.hello span #elem{ }
上下约分
li p input
（下面不剩）
此时上面大于下面

26.CSS盒子模型

介绍

在这里插入图片描述

组成：content（物品）->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的外间距）
1.
content：内容区域 width和height组成
2.
内边距（内填充）

黄蓝之间区域

padding：像素

只写一个值：30px（上下左右）
写两个值：30px 60px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

padding-top、right、left、bottom

注：单一样式只能写一个值

外填充（外边距）margin
用法与padding一样

紫和蓝之间

注意事项

背景颜色会填充到margin以内的区域
文字会在content区域内
padding不能出现负值，margin可以出现负值

box-sizing（盒尺寸）

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）或border-box
即可以改变盒子模型的展示形态
如：width、height作用于content，经过改变可作用于content、padding、border

例：box-sizing：content-box即作用在content上
box-sizing：border-box即作用在border以内的区域内（content、padding、border）

使用场景：
1.不用再去计算一些值
2.解决一些百分比问题

margin叠加问题

当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，这个问题只有上下有，左右没有叠加问题
会取上下值中较大的作为叠加值

例：两个盒子之间距离实际为20px

故尽量只给一个加margin值

margin传递问题

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的

例：会把红色块也带下来70px

解决方案：
1.给父容器加边框（border）
2.把子容器的margin换成父容器的padding

CSS盒子扩展

1.margin左右自适应

margin可以左右自适应，但不能上下自适应
margin-left：auto使盒子移动到最右边，左边部分全部为自适应部分（right和初始形态一样）
margin：0 auto；使得盒子自适应居中（不管网页大小，自动调整到中间位置）

2.不设置content的现象

设置内容器宽度时，可能会超出父容器

例：

解决方法：把子容器的宽度去掉，子容器里内容就会自动分配父容器的宽度

例：

27.标签分类

按类型

block：块

div、p、ul、li、h1…

特性：1.每块独占一行（即上下排布）
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域为一个矩形

inline：内联

span、a、em、str ong、img…

特性：1.挨在一起的
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候与内容有关（内容多宽，它多宽）
4.所占区域不一定为矩形

5.内联之间会有空隙（换行引起）

解决方法：在<style>中找到对应的父容器，加上font-size：0；,在<style>内联标签中加上font-size：像素，利用优先级删除空隙

inline-block：内联块

input、select…

特点：1.挨在一起，支持weight、width
2.有空隙
3.所占区域是一个矩形

判断方法：直接运行在网页的查看工具找到display查看即可
注：布局一般用块，修饰文本一般用内联

按内容

Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
在这里插入图片描述

按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容

<img src="路径" alt=“内容提示”>、<input type="模式">等
img（图片）是一个特殊的inline（支持宽高）因为它同时也是替换元素

非替换元素：将内容直接告诉浏览器，将其显示出来

h、p

28.显示框类型

display（重新设置块、内联、内联块）

block
inline
inline-block
none（在网页中进行隐藏）

注：display：none与visibility：hidden区别
none：不占空间的隐藏（内容会自动补充到隐藏的地方）
hidden：占空间的隐藏（内容不会自动补充到隐藏地方，会空出来一块）

29.标签嵌套规范

严格嵌套规定：

例：ul、li
dl、dt、dd
table、tr、td

块标签可以嵌套内联标签

<div>
	<span></span>
	<a></a>
</div>

块标签不一定能嵌套块标签

<div>
	<div></div>
</div>

（可以）

<p>
	<div></div>
</p>

（不可以）
内联标签不能嵌套块标签

<span>
	<div></div>
</span>

（不可以）
特殊：（给区域加链接）

<a>
	<div></div>
	<span></span >
</a>

（可以）
因为解析的时候<a>标签为透明元素，只会显示<div>

30.溢出隐藏

在这里插入图片描述

overflow

visible（默认）
hidden（裁切，把超出的直接裁掉）
在这里插入图片描述

scroll（滚动条，右方，下发）
在这里插入图片描述

auto（自适应，当内容多的时候会出现右侧滚动条）
在这里插入图片描述

x轴、y轴
在overflow后面＋x或y，指只针对某一个轴改变在这里插入图片描述

31.透明度与手势

透明度

opacity

0（透明）~1（不透明）
0.5（半透明）
在这里插入图片描述

当opacity为0时，内容是占区域的

注：所有的子内容也会跟着透明

rgba

子内容不改变样式
rgba（颜色数值，颜色数值，颜色数值，0~1）
在这里插入图片描述

手势

cursor

自定义光标样式
default：默认
当光标移动到设置的内容上时，光标会改变
在这里插入图片描述
要实现自定义手势：
1.准备图片：.cur、.ico
2.cursor：url（相对路径），auto；

32.最大、最小宽高

min-width、max-width
min-height、max-height

注：强化对百分比单位的理解

使得宽高自动适应内容

例：高度最少为200px（内容小于200px时，固定为200px，大于时自动适应）

百分比%单位

以父容器的大小进行换算

33.CSS默认样式

没有默认样式：
div、span、…
有默认样式：
body、h、p、ul、…

去掉默认样式（CSS reset）

最简单的CSS reset：

*{margin：0；padding：0；}

（
优点：不用考虑哪些标签有默认的margin、padding
缺点：稍微影响操作
）

ul{list-style：none；}

a{text-decoration：none；color；#666；}

img{dispaly：block；}（图片转成块）

现象：图片跟容器底部有空隙
内联元素的对齐方式是按文字基线对齐，而不是底线
img{vertical-align：baseline；}（默认基线对齐）bottom（底线）

写具体页面的时候或一个布局效果的时候：
1.写结构
2.css重置样式
3。具体写样式

34.float浮动★

定义

文档流
文档流是文档中可显示对象在排列时所占用的位置
（块是从上到下，内联是从左到右）
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值
left
right
none（默认）

一个块设置浮动，那个块已经脱离文档流，body的格式就只根据box2进行适应，且黄块会覆盖在红块上面（浮起）
在这里插入图片描述
两个块都设置浮动，body就变成一条线（因为，没有子容器给他撑开）

在这里插入图片描述

注意事项

只会影响后面的元素

例：

内容默认会提升半层（主要用于图文混排效果）

例：

默认宽根据内容决定

例：（没加浮动前默认效果，根据块大小）

（加浮动之后）

换行排列

例：

主要给块元素添加，但也可以给内联元素添加（很少用）

如何清除浮动

上下排列

clear属性，表示清楚浮动，left right both

例：

红色方块依旧跳出文本流，蓝色方块在文本流内但不受影响

注：浮动和清楚浮动属性要相同（或者清both），否则没用

嵌套排列

解决方法：
1.固定宽高：不推荐，不能把高度固定死，不适合做自适应效果。
2.给父元素加浮动：不推荐，因为父容器浮动也会影响后面元素。
3.在父元素添加overflow：hidden（BFC规范），如果子元素想溢出，那么会受到影响。
4.在父元素添加dispaly：inline-block（BFC规范），不推荐，父容器会影响到后面元素。
5.设置空标签：不推荐，会多添加一个标签
原因：空标签会撑开父标签，再清楚上下浮动，使得box2和空标签上下排列

在这里插入图片描述

6.after伪类：推荐，是空标签的加强版，目前各大公司的做法
（clear只会操作块标签，不会操作内联标签）
在这里插入图片描述

35.position定位

position特性

css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值

static（默认）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（黏性定位）

relative（相对定位）

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

例：

absolute（绝对定位）

使元素完全脱离文档流

使内联元素支持宽高（让内联具备块的特性）

使块元素默认宽根据内容决定（让块具备内联的特性）

如果定位祖先元素（绝对、相对、固定），相对于定位祖先元素发生偏移，没有定位祖先元素，相对于整个文档发生偏移

例：

fixed（固定定位）

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条或别的嵌套定位等的影响

sticky（黏性定位）

在指定的位置进行黏性操作

例：

z-index定位层级

默认层级为0（默认后写的优先级高）（可以写负数）

例：

嵌套时的层级问题
在这里插入图片描述
同一级别的先比较（parent和box2），如果父容器没有z-index再用里面的比较（box1和box2）

36.CSS添加省略号

width：必须有一个固定的宽
white-space：nowrap：不让内容折行
overflow：hidden：隐藏溢出的内容
text-overflow：ellipsis：添加省略号
在这里插入图片描述

在这里插入图片描述

37.CSS Sprite

css雪碧也叫css精灵，是一种网页图片应用处理方式。它允许你讲一个页面涉及到的所有零星图片都包含到一张大图去加载。
好处：
可以减少图片的质量，网页图片加载速度快
减少图片请求的次数，加快网页的打开

38.CSS圆角

border-radius：给标签添加圆角
复合样式写法border-radius：n1，n2；
n1：左上角右下角
n2：右上角左下角
border-radius：n1,n2,n3,n4；
1-4：左上，右上，右下，左下
border-radius：n1/n2;
n1（x轴），n2（y轴）的椭圆