Web前端学习笔记

DAOkonglong

已于 2022-11-16 23:09:04 修改

阅读量3.1k

点赞数 5

文章标签：前端学习

于 2022-10-16 07:27:24 首次发布

本文链接：https://blog.csdn.net/DAOkonglong/article/details/127332066

版权

Web前端学习笔记

前言

拨云见日
初步学习HTML,CSS,切图流程，pc企业站布局，pc游戏布局
溯本求源
深入学习HTML,CSS的扩展知识，HTML5新语法以及CSS3新语法，不同
浏览器的兼容问题以及解决方案
风生水起
学习制作布局，如：弹性布局，网格布局，移动端布局，响应式布局以及基
于响应式布局的Bootstrap框架
巧夺天工
工程方面的知识。预编译CSS，postcss，CSS架构，CSS的部分高级功能，CSS与JS的交互

一、拨开云雾见天日，守得云开见月明

1.1.1 什么是HTML和CSS

首先了解什么是HTML和CSS，它们是做网站的两种编程语言，一般情况下需要配合使用，是网站开发的基础语言。HTML构建网站的框架结构，而CSS对网站进行修饰美化。

再来了解网站，网站是由浏览器将代码解析后形成的。（网站可以通过鼠标右键查看源代码）

一个网站是由多个网页组成的，每个网页为一个.html文件，即每个网站由多个.html文件组成

了解这些后接下来需要了解.html文件如何写，在哪写。一个.html文件最简单的创建方法可以在电脑指定一个目录下创建一个文本文档并且将文档的扩展名.txt改成.html，然后通过鼠标右键从打开方式中选中笔记本来将内容写入.html文件。但是这种方法效率低，而且容易出问题。因此这就需要一个更为高效的工具或方法。

1.1.2 VS Code编辑器

全称Visual Stdio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。（下载地址）编辑器初始为英文，可在左侧起向下的第5个图标，点击搜索Chinese来安装中文插件。

▼

open in browser和view in browser插件
在扩展中下载后可以在编辑器中运行编辑的网页文件。前者可以在编辑页面右键点击open in default browser

后者可以在左侧栏右击.html文件点击view in browser打开

VS Code的简单使用
左侧工作区可以进行新建文件夹，文件以及添加文件夹到工作区的操作，左侧的搜索功能可以在工作区已有的文件中寻找关键词
比较常用的快捷键：

ctrl + s ：保存
ctrl + a ：全选
ctrl + x ：剪切
ctrl + c(v)：复制（粘贴）
ctrl + z(y)：撤销（前进）（个人觉得比较重要的，误操作后可挽回）
ctrl + d：选择相同元素的下一个
shift + 任意键盘方向键：移动光标选中文字
shift + home：从光标位置选中至所在行头部
shift + end：从光标位置选中至所在行尾部
shift + alt + ↓：向下复制光标所在行
alt + 键盘上下方向键：向上向下移动光标所在行
alt + 鼠标左键：多光标

设置vs code视区之内自动换行

左上文件>首选项>设置搜索word，下拉寻找到

然后选择on即可

1.1.3 深入了解网站开发（部分）

UI设计师：提供设计稿

“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

Web前端开发工程师（H5开发）：用代码将设计稿实现，将数据库的数据显示到页面，HTML和CSS就是由其操作的（HTML：写结构；CSS：加上外观）

Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。

Web后端开发工程师：数据库数据的存储管理
（粗略了解）

1.1.4 Web前端三大核心技术

俗称网页开发三剑客
HTML：结构

HTML是超文本标记语言，是一个网站页面的主要内容和主体框架。主要用来实现静态页面，目前我们看到的文字、图片、动画、声音、表格、超链接等网页元素都是通过HTML实现的。HTML是由各种标签组成的，所学习HTML就是在了解HTML主体框架的结构基础上学习各种标签的使用方法。

CSS：样式

CSS是层叠样式表，主要用来控制调整网页的样式，它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式。在网页上实现CSS样式调整一般有两种方式：内嵌式，将CSS代码集中写到HTML文档的头部标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是直接在THML文件中直接添加CSS样式的方式；嵌入式，是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。

JavaScript（JS）：行为

JavaScript是一种完整的网页脚本语言，有自己独立的语法，可以完成复杂的程序逻辑，而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑。JavaScript主要负责网页的各式各样的动态功能，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。

三者关系就如舞狮子，HTML就相当于没有装饰的道具骨架和穿着普通衣服的人，CSS就是为这些道具添加漂亮的外衣和绚丽的色彩并且为舞狮的人统一服装，而JavaScript则规定舞狮的动作的标准，三者结合才能让人看到一场非常吸引人的舞狮表演。

1.1.5 HTML基本结构和属性

HTML：超文本标记语言（Hyper Text Markup Language）网页制作必备的编程语言。

超文本：文本内容 + 非文本内容（图片、视频、音频等）

标记：<单词>（也叫做标签）

语言：编程语言

标签写法分为两种：
单标签：<单词>
双标签：<header></header>
VS Code创建标签快捷键：输入标签单词后 + Tab

标签可以上下排列也可以组合嵌套

标签属性：修饰标签，设置当前标签的一些功能。可以写多个属性。

<标签 属性="值" 属性2="值2">

1.1.6 HTML的初始代码

每个html文件都需要写初始代码。（html文件规范）
VS Code中输入！+Tab快捷生成初始代码
初始代码：

<!DOCTYPE html>   ←文档声明：告诉浏览器这是html文件
<html lang="en">  ←html文件的最外层标签：包裹了所有的html标签代码  lang="en"表示一个英文网站  lang="zh-CN"表示一个中文网站
	<head>
	   	<meta charset="UTF-8">  ←元信息：编写网页中的一些赋值信息(UTF-8:采用国际编码，识别国家语言防止出现乱码)
    	<title>Document</title>  ←设置网页的标题
	</head>
<body>
    显示网页内容的区域
</body>
</html>

上面初始代码中head标签和body标签部分↓

title标签部分↓

1.1.7 HTML中的注释

注释的代码只能在编辑文件中看到，浏览器中不会显示注释代码。

<!-- 注释  -->

用处：

把暂时不用的代码注释掉，方便以后需要时使用。
加注释以解释代码，方便他人理解自己写的代码，也方便自己重新回顾编辑修改时能回想起代码的作用。

快捷键添加注释和取消注释：

ctrl + / （快捷生成注释代码，光标所在行全部注释）
shift + alt + a（快捷生成注释代码，可以将鼠标选中的部分注释）

两种注释方法也可以将注释的部分取消掉。

1.1.8 HTML语义化

HTML中不同的标签实现不同的功能，所谓的HTML语义化指的是根据网页中内容的结构来选择合适的HTML标签进行编写。

语义化的好处：

在没有CSS修饰过的情况下网页的页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
便于团队开发与维护。

1.1.9 HTML标签的使用

标题标签

网页内容的标题，与head标签不同，双标签 <h1>标题</h1> … <h6>标题</h6>，数字越大标签越小，最小到6。在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签，其他标签不限制。h5,h6标签比较少使用。

段落标签

双标签<p>内容</p>，一个段落只使用一次p标签（语言规范）

文本修饰标签

表示强调的标签：
<strong>：双标签，表示强调，对文本进行加粗。

<strong></strong>

<em>：双标签，表示强调，将文本转为斜体字。

<em></em>

第一串文字无任何修饰，第二串文字被strong修饰加粗，第三串文字被em修饰为斜体。（两者的强调区别：strong的强调性更强，em的强调性稍弱。）

<sub>、<sup>：双标签，下标文本和下标文本。

<sub>下标文本</sub>  <sup>上标文本</sup>

满足特定需求，如勾股定理，化学中水分子的表示…

<del>、<ins>：双标签，删除文本（delete）、插入文本（insert）。

<del>给文本加删除线</del>  <ins>给文本加下划线</ins>

一般删除文本标签和插入文本标签配合使用。

图片标签和图片属性

图片标签：单标签。

<img src="" alt="">

图片标签属性：

src属性：引入图片的地址。
在网页中选择一张图片鼠标右击选择在新标签页中打开图片后复制其地址，然后粘贴至src中。

alt属性：当图片出问题的时候，可以显示一段提示用户的文字。
在图片地址中随便修改使地址无效后加上提示。

如果不在alt属性里加入提示，图片出错后会显示空白，用户将无法得知图片出错。

title属性：提示信息（实际上html标签都有title属性）。
在上面编辑的图片标签加上title属性，这样鼠标停留在图片上会显示提示文字。

width、height属性：控制图片大小（控制图片的宽和高，CSS也可以做到这点，挖个坑）。
此属性可以不加，图片就为原大小，但是一般会加上，如果不加上，网速较慢的时候图片加载出来后会在文章中突然插入将文段撑开，如果加上该属性，网速慢的时候网页会预先给图片位置留白等待图片加载，这样可以减少网速慢时加载图片的突兀感。
在Chrome浏览器中可以按F12打开调式工具模拟网速慢的情况。
如图（在network到小图标那步需要ctrl + r添加测试项目）

（如果图片太小可能效果不明显）

引入文件的地址路径
在HTML中地址分为两种，一种为相对路径，一种为绝对路径。（在上面的图片标签中引入的网络地址为绝对路径）
相对路径
“.” ：在路径中表示当前路径
“. .”：在路径中表示上一级路径
可以理解为参照当前编辑的html文件的路径来寻找文件

绝对路径
实实在在的路径，如网页地址，电脑中的文件路径。
例：

https://i0.hdslb.com/bfs/face/c3d33a1cf26c8b6f503cf0f78b61c214200665f0.jpg@92w_92h.avif
C:/Users/GUGUGUUUU/Desktop/VS

注意windows系统的电脑中文件的路径使用的斜杠为“\”，在html文件中使用不影响，但是网络地址中必须使用“/”。

跳转链接

a标签：双标签，给文字提供网页链接进行跳转，也可以在a标签里嵌套一个图片标签让图片能进行网页跳转。

<a href="在这写网页地址">这里写文字</a>

a标签的属性：href属性和target属性
href属性：写链接地址

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

target属性：可以改变链接打开的方式，默认情况下是在当前页面打开（_self）默认在当前页面打开的话可以不用加上target标签，而新建一个窗口来打开使用（_blank）

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

这里引出一个问题，如果想让一个网页中每个链接打开都通过新建窗口的方式打开是不是需要每个a标签都需要添加target（_blank）属性，有问题当然就有解决方案，这里用到了base标签。

base标签为页面上的所有链接规定默认地址或默认目标，浏览器会使用标签中指定的URL来解析所有的相对URL，base其实就是定义一个默认的地址和默认目标

先不做深入了解，先了解如何解决上述问题。

在head标签中添加下面的代码，作用是使网页中所有的target标签的值都默认为_blank。

<base target="_blank">

跳转锚点

不同于链接，是在当前页面中进行内容跳转，用一个不恰当的比方，把当前网页比喻一本书，跳转锚点就是快速翻到某一页，那一页仍是网页的内容，没有新建窗口也没有打开新的网址。一般用来做网页目录，或者做返回顶部操作。

使用a标签实现跳转锚点
实现方法一：#号配对id属性
例：

<a href="#html">HTML</HTML></a>
<h2 id="html">HTML超文本标记语言</h2>

上述例子是点击HTML的跳转锚点后会跳转至HTML超文本标记语言标题的位置。
实现方法二：#号配对name属性

例：

<a href="#html">HTML</HTML></a>
<a name="html"></a>

上述例子是点击HTML跳转锚点后跳转至匹配name属性的位置（注意name属性是加给a标签的）。

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

比较常用的是左右尖括号和空格。

列表标签

无序列表
<ul>、<li>：前者的表示最外层容器、列表项（ul和li必须是组合出现的他们之间不能有其他标签，li标签里可以嵌套其他标签）。
正面例子：

	<ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

错误示例：

    <ul>
        <p>
            <li>第一项</li>
            <li>第二项</li>
        </p>
    </ul>

ul里可以添加type属性：改变前面列表的样式，默认小圆点（一般都是用CSS去控制）

<ul type=""></ul>

~~具体有什么样式去查表~~

有序列表
<ol>、<li>：前者为列表的最外层容器，后者为列表项（有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表，具体用CSS实现，同样，两标签之间不能有其他标签）

ol里也可以添加type属性来改变样式。

定义列表
列表项需要添加标题和对标题进行描述内容时会用上定义标签，像是一个标题和内容的结构。
<dl>：定义列表（和ul，ol类似）
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述

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

嵌套列表
列表之间可以互相嵌套形成多层级的列表。
例：用无序列表嵌套做一个菜单

<ul>
        <li>
            小吃类
            <ul>
                <li>煮粉干</li>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li>煎蛋</li>
                <li>米饭</li>
            </ul>
        </li>    
        <li>
            卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>猪耳朵</li>
                <li>猪头肉</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
        <li>
            套餐类
            <ul>
                <li>卤面筋饭</li>
                <li>猪肉饭</li>
                <li>猪耳朵饭</li>
                <li>卤猪脚饭</li>
                <li>卤猪舌头饭</li>
            </ul>
        </li>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚莲子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
                <li>牛肉枸杞</li>
            </ul>
        </li>
    </ul>
    <p><em>亲，20元以上可送餐哦！！</em></p>

表格标签
需要罗列一堆数据时会用上。
<table>：表格的最外层容器。
<tr>：定义表格行。
<th>：定义表头。
<td>：定义表格单元。
<caption>：定义表格标题。
全为双标签，它们之间嵌套有语法规范。
例：

<table>
        <caption>天气预报</caption>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td>2022年10月22日</td>
            <td>天气晴朗</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>2022年10月23日</td>
            <td>小雨</td>
            <td>出门带伞</td>
        </tr>
    </table>

语义化标签
<tHead>（头）、<tBody>（身体）、<tFood>（尾），双标签。（不会对网页造成影响，不具备效果，语义化规范，详见1.1.8HTML语义化）

天气预报暂时没有尾。

注：在一个table当中，tBody可以出现多次，但tHead，tFood只能出现一次。

表格属性
border：控制表格边框。

例如：赋值1。

↓

cellpadding：控制单元格内的空间。
cellspacing：控制单元格之间的空间。

例如：都赋值为30。

注：以上三者都是加到table标签当中。
rowspan：合并行。
colspan：合并列。

注：说是合并，更感觉像是一个元素同时占了几列或几行的单元格。
align：控制左右对齐的方式。（left，center，right，对应单元格中左中右的位置。）
valign：控制上下对齐的方式。（top，middle，bottom，对应在单元格中上中下的位置。）

注：可以放在tr里统一控制表格同一行元素的位置，也可以放在th和td里单一改变元素的位置，如果表格单元空间较小，控制元素位置会无明显效果，因为部分空白为填充部分。

表单标签

<form>：双标签，表单的最外层容器。
<input>：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
表单标签的嵌套关系没有表格那么严格。

<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">香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>

action是输入提交按钮的地址，placeholder是显示输入框的提示信息，checked是默认勾选（可写为checked = "checked"但是等号及后面可以忽略），disabled是使input支持的控件失效（但仍会显示），多个单选框中加入name属性并赋同样的值可以进行配对使这几个单选框只能选一个。

<textarea>：双标签，多行文本框。

<h2>多行文本框</h2>
<textarea cols="10" row="30"></textarea>

以上编辑了10行30列的多行文本框。

<select>，<option>：双标签，下拉菜单。

<h2>下拉菜单</h2>
<select>
	<option>北京</option>
	<option>上海</option>
	<option>杭州</option>
</select>

同样，在选项中添加selected属性可以使其默认选中，在下拉菜单中还可以写入请选择之类的选项然后添加selected（默认选中）和disable（使其不可使用）属性来作为提示信息。在select标签中还可添加size="这里填数字"来显示下拉菜单默认显示多少项（默认是显示一项）。select标签中还可以加入multiple属性使选项能够多选（ctrl+左键或左键长按划过选项），multiple属性其实还可以使input的控件为上传文件时能上传多个文件。

<label>：对表单标签有辅助作用。
例如上面的单选框只能点击小圆点才能选中，加入label标签后可以使选项点击作用范围扩大（点击文字后也可选中）。

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

使用id和for让文字和单选框形成映射关系。

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

<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>
                    <td colspan="2" align="center">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>

在这里插入图片描述

<div>，<span>标签

div,全称division，用来划分区块。div元素在网页中是最常用的元素，可以把div元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括div元素，因此div元素是可以嵌套的。借助于CSS样式，能够把div元素放置在网页的任何位置，实现网页的精致排版。

span，内联，文字修饰。

在这里插入图片描述
红框圈住的范围（红框是我画上的，不是代码编辑的）实际上就是由div划分的区块，而里面的部分文字的颜色与其他文字的明显区别是由span标签修饰的。
div和span标签都没有默认样式，需要配合CSS使用。

<div style="border:1px gray solid;">
        <h2><a href="https://www.baidu.com"><span style="color: red;">百度</span>一下，你就知道</a></h2>
        
        <a href="https://www.baidu.com"><img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1666717200&t=420aa694c8be549cc64d05871e94c0f3" alt=""></a>
        
        <p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
    </div>

以上为演示，不做详细介绍。

1.2.1 CSS基础语法

格式：
选择器{属性1:值1;属性2:值2}
width：宽
height：高
background-color：背景颜色
最后一个属性值可以不加分号。注意，选择器要和标签配对，具体看下列。

单位：
px（像素，pixel），%（相对于外容器的百分比）

基本样式：
width，height，background-color（分别对应宽度，高度，背景颜色）

CSS注释：

/*注释内容*/

CSS注释快捷操作与HTML一致（shift+alt+a，ctrl+/）

以下是部分语法演示

以上在head标签中加入了stlye标签来编辑样式，在style中加入了div和span的选择器来映射以下的div标签和span标签统一修饰。

CSS样式的引入方式

1.内联（行内、行间）样式
在html标签上添加style属性来实现。

2.内部样式
在<style>标签内添加的样式。

两者区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。

比如同时对两个块进行添加样式

可以发现，两种方式表现的内容一样，但是内联样式明显使用代码量更多，尤其是需要修饰更多的div块时。

3.外部样式
需要引入一个单独的CSS文件，如：文件名.css。通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性用来引入资源的地址。
link的rel属性（点一下）。

<link rel="stylesheet" href="">

默认引入外部样式表。

以上编写了一个CSS文件，然后通过link标签引入对html文件内的div块进行修饰。

还有另一种方式也可以添加外部样式，使用@import。

注：不过这种方式有很多问题，不建议使用。

CSS中颜色的表示法

单词表示法：如red，blue，green…
十六进制表示法：#000000~#ffffff
RGB（red，blue，green）三原色表示法：rgb(0,0,0);取值范围0~255。

单词法可表示颜色比十六进制法和rgb三原色法的颜色更少，但是十六进制和rgb使用上又有点困难，这里可以借助photoshop（ps）里的拾色器来对想要的颜色进行提取。

CSS的背景样式

background-color：背景颜色。
background-image：背景图片。

background-image: url(这里写地址)

在这里插入图片描述

与image引入图片不同，image是主要展示图片，而background-image是对背景进行装饰，默认会水平垂直铺满背景图。

background-repeat：背景图片的平铺方式。

background-repeat: repeat-x;(x轴方向平铺)
background-repeat: repeat-y;(y轴方向平铺)
background-repeat: no-repeat;(不进行任何方向的平铺)
background-repeat: repeat;(默认水平垂直平铺，上面的图就是)

如果图片比设置的div块的大小还大，只会显示部分图片，图片默认位置在左上角，也就是说图片过大只会显示左上角的部分。

background-position：背景图片的位置。

background-position: 100px 100px;（前者为水平方向，后者为垂直方向）
background-position: 100% 100%;（相对div块左右上下的百分比位置）
background-position: center center;（前者有left，center，right；后者有top，center，bottom；一个水平方向，一个垂直方向）

background-attachment：背景图随滚动条的移动方式。

background-attachment: fixed;（背景位置是按照浏览器进行偏移的）
background-attachment: scroll;（默认值，背景位置是按照当前元素进行偏移）

fixed是将图片固定在相对与浏览器body部分的位置，而scroll是将图片固定在相对div块的位置。当滑动滚动条时，fixed修饰的背景图片只会在浏览器body部分固定位置不动，而scroll修饰的背景图片会随着div块移动。

2022-10-26 16-42-46

CSS边框样式

border-style：边框的样式。
    solid：实线。
    dashed：虚线。
    dotted：点线。
border-width：边框的大小。
    XXXpx（像素）
border-color：边框的颜色。
    red  #000000 …
tips：transparent（透明色）
注：针对某一条边进行单独设置，可以在以上属性的中间加入（top，bottom，left，right，上下左右的边框）如border-top-style:solid（表示顶部边框设置为实线）

将边框大小调大，将四条边的其中三条设置成透明色可以弄出一个三角形。

CSS文字样式

font-family：字体类型
    英文字体：Arial，‘Times New Roman’
    中文字体：微软雅黑，宋体
中文字体的英文名称
    微软雅黑：‘Microsoft YaHei’
    宋体：SimSun
中文字体默认为微软雅黑

衬线体与非衬线体
比如宋体就是衬线体，微软雅黑就是非衬线体。衬线体有明显的棱角，而非衬线体比较平滑，扁平化，简练。

（上面是宋体，下面是微软雅黑）

注意：
1.设置多字体的方式。
font-family：后多加几个字体。

<style>
        div{font-family:宋体 ， 微软雅黑 ， Arial, 'Times New Roman'}
</style>

这样有一个作用，字体发挥作用需要浏览器识别用户的电脑是否含有该字体，如果没有则无法生效，就会跳到下一个字体进行识别，设置多字体就为了应对用户如果不包含其中一种字体就可以提供备选的解决方案字体，能够适应更多的用户设备。
2.部分字体引入需要添加引号的原因
当引入的字体中有空格时就需要添加引号，如Times New Roman和Microsoft YaHei（微软雅黑）之间就有空格。

font-size：字体大小的调整

font-size:16px    （默认是16px）

注：上面两段文字是30px大小，下面两段大小为默认的16px大小

除了可以用像素大小来设置字体大小，还可以用单词，不过还是建议用像素大小来设置。（将填像素大小的地方换成单词即可）
注：像素设置的字体大小一般设置为偶数（14px，16px，18px等等），为了文字能更好的对齐。

font-size: small

font-weight：字体粗细的调整
只有两种模式（正常，加粗）

font-weight:normal	（正常）
font-weight:bold	（加粗）

除了用单词表示还可以使用number来设置，100~900，虽然是100~900，但是100~500都是正常大小，600~900是加粗。

font-weight:100
font-weight:600

font-style：字体样式
模式：正常（normal），斜体（italic，oblique）
写法：单词表示。
注：oblique也表示斜体，但用的比较少，一般了解即可，与italic相比，oblique能使没有倾斜属性的字体也可以设置倾斜操作，而italic要带有倾斜属性的字体才可设置倾斜操作。

color：字体颜色

CSS段落样式

和字体样式有点相似，都是针对文字，但段落样式是针对多段文字的大篇幅。
text-decoration：文本装饰
    下划线：underline
    删除线：line-through
    上划线：overline
    不添加任何装饰：none（默认设置）
可以进行多添加，设置值要用空格隔开。

Tips：可以给段落标签设置width（宽度）属性大小来让段落折行。

text-transform：文本大小写（针对英文段落）
    小写：lowercase
    大写：uppercase
    只针对单词首字母大写：capitalize

text-indent：文本缩进。
对首行缩进

对文本首行缩进两个汉字，一个汉字大小16px，故缩进32px。当字体大小改变时用像素大小来缩进略显麻烦，可以换成em单位

em单位：相对单位，1em永远跟字体大小相同
注：如果中文里混入英文会对不齐。

text-align：文本对齐方式
对齐方式：left（左端对齐，右端不对齐），right（右端对齐，左端不对齐），center（以中间对齐，但文段两端不对齐），justify（两端对齐）

line-heght：定义行高
定义：由一行文字的上边距，字体大小，下边距组成，两行文字中一行文字的下边距等价于下一行文字的上边距。

默认：只有字体大小为默认的情况下才有默认行高，因为字体大小占行高的一部分。

取值：1.number（px）2.scale（比例值，跟文字大小成比例）

line-height: 32px	（像素值）
line-height: 2		（比例值）

letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
两者都是用像素调整大小（px）

强制折行：（针对英文数字）
英文和数字不自动折行问题：当设置有width（宽度属性）时，文字段落长度超过width设置的宽度时一般会自动折行，但是英文单词和数字会被当做整体，一个单词或一串数字过长时不会折行。
1.word-break:break-all;（非常强烈的折行）
2.word-warp:break-word;（不是那么强烈的折行,会产生空白区域）

加上强制折行后↓

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式，一个CSS属性控制多种样式叫做复合样式。
复合的写法是通过空格的方式实现的。

例：在背景属性中设置了颜色，图片背景，无平铺方式，背景图居中

边框属性中设置了2px像素大小的边框，边框黑色，实线边框

注：backgroung和border的复合写法不讲究顺序

有的复合写法需要关心顺序，例如font。（至少需要两个值，size和family，先写size再写family）

font: 2px 宋体 ;

size和family要按顺序写，几种正确的格式
weight style size family
style weight size family
weight style size/line-height family

注：复合样式和单一样式尽量不要混写，如果一定要混写，先写复合样式再写单一样式。

如：

上面是一行复合样式和一行单一样式，单一样式的背景颜色覆盖了复合样式的无色，如果上面的复合样式写在单一样式的下面，复合样式的无色背景就会覆盖掉单一样式的绿黄色。

CSS选择器

1.ID选择器

css：#div1{}
html：id=“div1”

Tips：带ID的标签快速生成，输入标签单词后再输入#+ID的值后按Tab
在这里插入图片描述

注：在一个页面中，ID值是唯一的，出现多个ID值是不符合规范的。以下代码就是不符合规范的。

#div1{}
<div id="div1"></div>
<div id="div1"></div>

ID的命名规范，ID名由字母、下划线、中划线、数字（ID开头不能是数字）
ID命名方式：（命名尽量有意义）
驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）建议写小驼峰。
短线写法：search-small-button
下划线写法：search_small_button

2.CLASS选择器

css：.div1{}
html：class=“div1”
Tips：带class的标签快速生成，标签+.+class名然后按Tab

注：
1.class选择器是可以复用的，这点和id选择器不同，如以下代码

2.可以添加多个class样式，在style标签中写入多个class选择器后，在class写入值时将其写入并用空格隔开即可。
在这里插入图片描述
3.写多个样式的时候，样式的优先级是根据CSS决定的，而不是class属性中的顺序。例如以下在CSS中div2排最后，class属性中div2排在前，但最终执行的是div2。

4.标签加类的写法（许多编程预言中class被称为类），这种写法是针对某一类标签来作用，如以下，只有p段落标签被作用。
在这里插入图片描述

3.标签选择器（tag选择器）

在style标签中写入某标签名，映射下方所有对应标签（如下列div标签）。
使用场景：
1.去掉某些选择器的默认样式。
2.复杂的选择器中，如：层次选择器。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div{}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

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

可以通过逗号隔开的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。（注：以下代码省略了部分初始代码，主要是为了表示群组选择器）

<style>
	div,#text,.title{background-color: red;}
</style>
<body>
	<div>这是一个块</div>
    <p id="text">这是一个段落 </p>
    <h2 class="title">这是一个标题</h2>
</body>

5.通配选择器

*{background-color: red;}

注：尽量避免使用通配选择器，因为通配选择器会给所有的标签添加样式，一般是用来去掉所有标签的默认样式。

6.层次选择器

后代 M N{}
寻找对应M（M也可以是ID选择器或者class选择器）嵌套的所有N（N也可以是ID选择器或者class选择器）进行添加样式

父子 M > N{}
寻找对应M第一层嵌套的N添加样式，N中再嵌套的N不起作用。

兄弟 M ~ N{}
寻找对应M，对M下面的（不是嵌套关系）所有与M并列的N（若N被嵌套在其他标签里不起作用）添加样式。

相邻 M + N{}
寻找对应M，对M下面相邻的一个N进行添加样式。（注意粗体字提醒）

7.属性选择器

M[N] {}

省略了部分初始代码
<style>
	div[class="box"]{background-color: red;}
</style>
<body>
	<div>aaaaaaaa</div>
    <div class="box">bbbbbbbbb</div>
    <div class="search">ccccccc</div>
    <div class="search-button">dddddddd</div>
    <div class="button-search">eeeeeeee</div>
</body>

寻找对应M中的N属性（可以对N属性加具体值）添加样式。
=：完全匹配，完全一样才能匹配
*=：部分匹配，只要部分值一样就匹配
^=：起始匹配，值的起始位置一样就能匹配
$=：结束匹配，值的结束位置一样就能匹配
[][][]…[]：多个属性，组合匹配，要所有属性一样才能匹配

8.伪类选择器：

CSS选择器用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M为要添加样式的标签
M:link{}		访问前的样式（只能添加给a标签）
M:visited{}		访问后的样式（只能添加给a标签）
M:hover{}		鼠标移入时的样式（可以添加给所有样式）
M:active{}		鼠标按下时的样式（可以添加给所有样式）

注：如果四个伪类都生效，一定要注意顺序link→visited→hover→active。一般网站不会给a标签设置四个伪类，一般都是a{}，a：hover。visited访问后浏览器会有缓存，需要清除数据还原样式。

M:after{}		
M:before{}		after和before都是通过伪类的方式给元素添加一段文本内容，使用content属性

after和before可以用于对部分文字添加样式而不影响整个文段。

三个都是针对表单的伪类选择器。
:disabled{}		针对失效的表单才起效果
:checked{}		针对被选中的表单才起效果
:focus{}		获取光标时才起效果

9.结构性伪类选择器：

（目前只了解到对列表使用）

li:nth-of-type(){}
li:nth-child(){}
小括号内输入数字可以指定列表的第几项，输入对于n的表达式可以设置从0开始到无穷的规律设置，如：输入2n是对2，4，6...2n项进行设置。

li:first-of-type{}
li:first-child{}
对列表第一项起作用

li:last-of-type{}
li:last-child{}
对列表最后一项起作用

li:only-of-type{}
li:only-child{}
列表中仅有该（一）项时才起作用

type与child区别：前者是对同一类进行作用，非同类忽略，后者是对同一组中的第几项作用，如果与冒号前的索引的标签不同则不起作用（个人浅显的认知，并不准确）

CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承，但是可以设置继承属性）
例如：在div块中有一个段落p标签，CSS中对div设置了布局样式还有文字样式，但只有文字样式也对p标签起了作用，布局样式没起作用（这就是样式继承），若要设置继承，在CSS中添加p标签的选择器然后写入要继承的属性并赋值为inherit。

p{border:inherit;}		(对border（边框）属性进行继承)

注：实际上有些文字样式不能继承，有些布局样式被设置可继承后仍不能继承（具体需要实践）

CSS优先级

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

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

3.单一样式优先级
style行间内联>id>class>tag>*>继承
权重等级：style行间内联（1000），id（100），class（10），tag（1）

4.!important
提升样式优先级，非规范方式，不建议使用，只有样式非常多并且不方便大量改动时才使用。（不能针对继承的属性进行优先级的提升）使用方法：在属性后加空格后输入!important

5.标签+类与单类
标签+类选择器的优先级比单类选择器高

6.群组优先级
群组选择器与单一选择器的优先级相同，后写入的优先级更高。

7.层次优先级
权重比较
根据权重等级之和来比较，权重等级之和大的优先级高。

ul li .box p inout{}  1+1+10+1+1
.hellow span #elem{}  10+1+100

约分比较
同权重等级相消，剩余权重等级和高的优先。

ul li .box p input{}  相消后→ li p input{}
.hello span #elem{}   		  #elem{}

CSS盒子模型

在这里插入图片描述

组成：content→padding→border→margin（由内到外）就像快递的内容物品、填充物、包装盒、盒子与盒子之间的间距。
1.content：内容区域，由width和height组成

2.pandding：内边距（内填充）通过数字设置，如：pandding:30px，内填充还可以单独设置一边，和边框相似，如：pandding-top:30px；，还可以通过pandding:输入多个数字并用空格隔开（最多四个数字）如：两个数字pandding:20px 30px，对应上下、左右边距；四个数字padding:10px 20px 30px 40px，对应上、右、下、左边距（三个数字不推荐）

3.margin：外边框（外填充）边距设置方法和padding一样。

注：
    1.背景颜色会填充到margin以内（不会填充到margin）的区域。
    2.文字会在content区域。
    3.padding不能出现负值，margin是可以出现负值。

4.box-sizing：盒子尺寸，可以改变盒子模型的展示形态。box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值），此时width、height设置给content部分；若取值为border-box，此时width、height设置后是content、padding、border加起来的总大小。

border-box使用场景：
1.同样设置一个盒子的大小，如果不使用border-box的话在设置了border和padding的情况下还需要自己去计算content的值来设置。在使用border-box后，直接设置盒子大小然后设置border和padding的大小后就不用自己再去计算content的值来设置了。
2.解决一些百分比问题，比如想设置一个输入框占屏幕的100%，但是又想设置一个边框，这样会超出屏幕范围多出一个横向滚动条。加上border-box就可以达到需求，减少了百分比和像素的换算。

margin叠加问题
当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题只在上下的边距有，左右是没有叠加问题的。
解决方案：
1.BFC规范。（暂不研究，留在笔记第二大部分）
2.只给其中一个盒子添加边距。

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

例：
<div id="box1">
	<div id="box2"></div>
</div>
两个块中，box1设置了200px*200px，背景颜色红；box2设置了100px*100px，
背景颜色蓝并且设置了margin-top:100px，按理说应该是box2位置跑到box1的
左下角，但是却使box1和box2这个整体添加了上边距，没有达到只是想设置box2
的上边距来使box2向下移动。

解决方案：
1.BFC规范。（暂不研究）
2.给父容器加边框。（如果需求不需要边框不推荐使用）
3.margin换成padding。（需要调整content大小）

扩展：
1.margin自适应。margin:auto（左右自适应，即居中）margin-right:auto（向右自适应，即居右），不设置时是默认左自适应。margin自适应只能左右，不能上下。（上下自适应暂不深入，笔记第二大部分再填坑）
2.width、height（content大小）不设置的时候会根据外容器大小进行适应填充，节省代码。例如设置两个盒子嵌套中里面pandding和border时会超出外盒子，不设置内盒子的width和height就不会有这种情况。

1.2.2 标签分类

按类型分类

    block（块）：div、p、ul、li、h1（h2…）…
        1.独占一行，不能左右并排
        2.支持所有样式
        3.不写宽的时候，和外容器的宽相同
        4.所占一个区域是一个矩形

    inline（内联）：span、a、em、strong、img…
        1.不独占一行，可以左右挨在一起
        2.有些样式不支持，例如：width、height、margin、padding…（img是个例外，width、height支持）
        3.不写宽的时候，宽度由内容决定
        4.所占空间不一定是矩形
        5.内联标签之间有空隙，原因是代码中有折行，即两个标签代码上下排列
注：布局一般用块标签，修饰文本用内联标签，所以内联标签之间空隙问题可以忽略，如果非要解决可以将两个标签并排在一行（影响代码可读性，不建议），或者在CSS中利用优先级先给body标签添加font-size: 0px,然后给内联标签添加font-size: 16px

    inline-block（内联块）：input、select…
        1.可以左右挨在一起
        2.支持宽高样式
        3.具有内联的空隙问题…
注：包含块和内联的部分特点
（Chrome浏览器中按F12可以打开控制台查看标签类型）

按内容分类

Flow：流内容（标签）
Metadata：元数据（如：meta，title，heda等编码）
Sectioning：分区（div块等）
Heading：标题（如：h1-h6）
Phrasing：措辞（如：span）
Embedded：嵌入的（如：图片，音频/视频，imframe）
Interactive：互动的（表单）
在这里插入图片描述

按显示分类
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。（img，input…）
需要设置属性才会显示内容

非替换属性：将内容直接告诉浏览器，将其显示出来。（div，h1~h6，p…）
不需要添加属性就能显示内容

显示框类型
通过display属性控制

display:block			（改为块类型）
display:inline			（改为内联类型）
display:inline-block	（改为内联块类型）
display:none			（隐藏显示，并且不会留空间）
visibility:hidden		（隐藏显示，但是会留白）（两个隐藏，前者就像直接拿走隐藏，后者就像拿块布遮了起来但还在原地）
一般不建议改类型

1.2.3 标签嵌套规范

需要严格嵌套规范的如：
ul,li dl,dt,dd table,tr,td等

块标签可以嵌套内联标签

块标签不一定能嵌套块标签
例如：p标签不能嵌套div标签

内联标签不能嵌套块标签
例如：span标签不能嵌套div标签，但是a标签例外，它可以嵌套div标签，不过a标签不能嵌套a标签

1.2.4 CSS中overflow溢出隐藏

部分时候设置了div块的大小，然而内部写入内容超出大小时就会溢出，这时可以用到overflow属性。

overflow:visible	（默认，可以不设置）
overflow:hidden		（超出的部分裁切隐藏）
overflow:scroll		（超出的部分隐藏，但是会增加横向和纵向的滚动条来供查看隐藏部分）
overflow:auto		（根据内容大小来设置滚动条，如果超出大小则增加滚动条，如果不超过大小则不加）
overflow-x:			（针对x轴设置，值设置和上面一致）
overflow-y:			（针对y轴设置，值设置和上面一致）

1.2.5 CSS透明度与手势

透明度

opacity属性(0~1)
opacity:0		（透明）
opacity:0.5		（半透明）
opacity:1		（不透明）
注：占空间，所有的子内容也会透明

rgba属性（设置数字，数字用空格隔开）
rgba(0 0 0 0);
注：前三个数字控制颜色，最后一个数字控制透明度，可以指定样式透明而不影响其他样式

手势

cursor属性
cursor:default		（默认，可不设置）
cursor:pointer		（鼠标移入时变为小手图标）
cussor:move			（鼠标移入时变为移动图标）
还有其他形式不一一展示
注：如果想要自定义鼠标手势图案需要准备图片，扩展名为.cur , .ico
cursor:url(),auto	（括号内输入图片的地址）

1.2.6 CSS最大最小宽高

min-width:
min-height:
max-width:
max-height:
设置最大最小值，设置最小值时有下限无上限（内容不超过下限时维持设置的最小大小，内容部分超过下限时大小会自适应），
设置最大值时有上限无下限（内容超过上限的部分会溢出，小于上限时会根据内容大小来自适应缩小）

%单位换算，根据外部容器的大小比例（不会根据外部的外部容器），故使用%单位时应先设置好外部容器的大小。

1.2.7 CSS默认样式

有些标签有默认样式，有些标签则没有默认样式

没有默认样式：div，span…

有默认样式：
body：带有margin:8px
h1：带有margin:21.440px 0px，font-weight:bold
p：带有margin:16px 0px
ul：带有16px 0px;padding-left:40px
a：带有text-decoration:underline
注：CSS当中有些默认样式会有帮助，比如a标签中有手势，但是也有妨碍，比如一些大小的默认值，会和我们自己想设置的值有别，需要手动修改。

CSS重置样式
简单的CSSreset：
    *{margin:0;padding:0;}
        优点：不用考虑哪些标签有默认的margin和padding。
        缺点：会对所有标签操作，会稍微影响性能。
    ul{list-style:none}  （去掉列表前的序号样式）
    a{text-decoration:none;color:#666;}  （去掉下划线，修改颜色）
    img{display:block;}  （将图片转为块类型，针对图片与外容器底部有空隙，因为内联样式对齐方式与文字的基线对齐而不是文字的底线对齐，有关文字排版。也可以设置成vertical-align:baseline;，以文字基线对齐）

写具体页面结构的时候或一个布局效果的时候，一般是先写结构，然后写CSS重置样式，最后写具体样式。

1.2.8 PS基本操作与图片格式

H5前端人员对UI设计师的稿件实现需要对样式进行度量一些颜色的采取等等会用到Photoshop。

组成：
    上面的菜单项
    左侧的工具栏
    右侧的辅助面板
快捷键：
  ctrl+r：显示隐藏标尺，可在标尺上拖拽参考线也可以通过工具栏的移动工具拖拽，通过菜单的视图可以清除。
  alt+鼠标滚轮：对图片放大或缩小

图片格式：
.jpg：一般用于高质量，多色彩的图片
.gif：动态图
.png：部分区域透明的图片
.psd：PS生成，包含多个图层，设计师给到H5前端的设计图片

png等图片的切图流程：
1.通过矩形选框工具，选择指定的区域，还可以使用切片工具（操作与选框略有不同）
在这里插入图片描述

        微调：alt配合鼠标可以对框选的部分做减操作；shift配合鼠标可以对框选部分做加操作；通过方向键可以对框选区域做移动微调，也可以通过鼠标直接拖拽选中区域；利用参考线记录位置，以便以后测量其他值
    2.ctrl+c：复制选中图层
    3.ctrl+n：新建图层
    4.ctrl+v：粘贴图层
    5.存储为web格式
在这里插入图片描述
注：利用矩形选框还可以测文字行高，从一行文字的顶部选中到下一行文字的顶部。

psd图片切图流程
1.启动生成器，编辑→首选项→增效工具

在这里插入图片描述

2.文件→生成，勾选图像资源

然后使用选择器点击想要的切图并设好名字，切出的图片会放在一个自动生成在psd同文件的文件夹中。

企业切图流程
一般企业的设计人员会将图片样式，图片提取等工作完成以减少前端开发人员工作量。
利用工具快速获取样式。
例：蓝湖（需要下载插件）
在这里插入图片描述
设计人员：上传psd文件、切图。

1.2.9 CSS中的float浮动

文档流
        文档流是文档中可显示对象在排列时所占用的位置。（html中写入的结构，结构的排列方式就叫做文档流，块默认从上到下排列，内联默认从左到右）
float特性
        加浮动的元素，会脱离文档流，会沿着外容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列。（添加浮动后，不占据文档流空间，其他文档流元素会顶替掉浮动元素原来的位置，浮动元素会在文档流元素之上，即覆盖文档流）
float属性取值
        left（沿外容器向左浮动）
        right（沿外容器向右浮动）
        none（默认）
注：
1.只会影响后面的元素（例如有三个块元素上下排列，给中间的块元素添加了浮动，只有它后面的文档流块被浮动的块覆盖，上面的块无影响）

2.内容默认提升半层（浮动不会完全覆盖后面的文档流，由1的例子，中间的块就相当于浮动提升半层，相当于在1.5层，它下面的块在1层，如果下面的块内有文字，文字不会被覆盖，文字位置相当于2层，通过这样的效果可以做网页的图文结合）

3.浮动后元素默认的宽根据内容而定

4.换行排列（浮动元素过多超过外容器宽度时会换行，并且是上边对齐换行前最后一个元素的下边进行排列）

5.主要给块元素添加，但也可以给内联元素添加

有时我们会不希望浮动对一些布局造成影响

利用clear属性清除float浮动的影响

上下排列：clear属性（只会操作块，对内联无反应），表示清除浮动的影响（写给被浮动影响的元素，不是写给浮动的元素），left，right，both（清除左，右，两边的浮动影响）

嵌套排列：
固定宽高：不推荐，不能把宽高固定死，不适合做自适应的效果。

充当了外容器的元素浮动：不推荐，外容器浮动会影响后面的元素。

overflow:hidden（BFC规范），如果有子元素溢出，会受到影响。

display:inline-block（BFC规范），不推荐，外容器会影响到后面的元素。

设置空标签：在浮动的元素下设置一个空标签并对空标签使用clear属性清除浮动影响，不推荐，会多添加一个标签（略麻烦）。

after伪类：推荐，是空标签的加强版，目前各大公司的做法。例：.box:after{content:"";clear:both;display:block}（.box是class选择器，content是内联）

position定位

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

浮动适合做左右布局，而定位适合做叠加布局。

position取值：
static：静态定位（默认）。

relative：相对定位
如果没有定位偏移量，对元素本身没有任何影响；不使元素脱离文档流；不影响其他元素布局；left、top、right、bottom是相对于当前元素自身进行偏移的（对这四属性赋值时是相反位移的，如：right:100px是向左位移100px，向右位移可以将值设为负值）。

absolute：绝对定位
使元素完全脱离文档流；使内联元素支持宽高（使内联具备块特性）；使块元素默认宽根据内容决定（让块具备内联的特性）；如果有定位祖先元素（外部元素，嵌套元素）相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档流偏移（绝对，相对，固定）。（可配合top、left、right、bottom属性使用）

fixed：固定定位
使元素完全脱离文档流；使内联元素支持宽高（使内联具备块特性）；使块元素默认宽根据内容决定（让块具备内联的特性）；相对于整个浏览器窗口偏移，不受浏览器滚动条的影响。（网页返回顶部、弹窗、广告等会用上）

sticky：粘性定位
在指定的位置，进行粘性操作。（需要配合top、left、right、bottom方位属性使用）例如设置了top:0;，在浏览器中向下滚动时编写的内容会向上滑动，一直到窗口顶端，此时继续向下滚动操作，编写的内容不会向上滑动，而是固定在窗口顶部，这时做向上滚动的操作使内容向下滑动直至编写内容滑动到原本的位置才会脱离固定。

z-index：定位层级
一般默认层级为0，写样式时有些样式会产生重叠，后写的样式优先级更高会覆盖前一个样式，此时使用z-index:0可以改变优先级（数字越大层级越高，优先级越高，数字可以为负数）；在嵌套关系中的层级问题，假如A、C部分重叠，A嵌套了B，A与C同级，A设置层级为0、B为2、C为1，此时C会覆盖A和B而不是B覆盖C，C又覆盖A。

CSS添加省略号

当一行文字较长溢出容器时想要切断但是又想用省略号表示文本未完（多行文本省略号待拓展）。
使用的属性：
width
    必须有一个固定宽
white-space:nowrap
    不让内容折行
overflow:hidden
    隐藏溢出的内容
text-overflow:ellipsis
    添加省略号
操作例子：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        #content{ 
            width: 200px;
            border: 1px black solid;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

↓
在这里插入图片描述

CSS Sprite

CSS雪碧（俗称）也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图片中去加载。
好处
可以减少图片的质量，使网页的图片加载速度快。
减少图片的请求次数，加快网页的打开。
在这里插入图片描述
操作：背景的定位（详见笔记目录1.2.1CSS基础语法→CSS背景样式）
一般sprite图里的图标不会那么紧凑，会影响图标的引用，硬要引用的话需要单独为其写一个块元素，反而会增加代码量。

CSS圆角设置

给块元素四个角设置圆角,原理是设置一个圆半径或椭圆x、y值去与四角相切（红色部分是切去的部分）。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        #box1{ width: 300px;height: 300px;background: orange;border-radius: 20px;}/* 设置半径为20px的圆去切四角 */
        #box2{ width: 300px;height: 300px;background: orange;border-radius:50%;}/* 设置一个相对块大小的一半长度为圆半径 */
        #box3{ width: 300px;height: 300px;background: orange;border-radius:20px 40px;}/* 左上和右下为半径20px圆相切，右上和左下为半径40px相切 */
        #box4{ width: 300px;height: 300px;background: orange;border-radius:10px 20px 30px 40px;}/* 分别对应左上、右上、右下、左下设置圆相切 */
        #box5{ width: 300px;height: 300px;background: orange;border-radius:20px/40px;}/* 设置x轴半径为20px和y轴半径为40px的椭圆相切 */
        #box6{ width: 300px;height: 150px;background: orange;border-radius:150px 150px 0 0;}/* 半圆的做法 */
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
</body>
</html>