HTML+CSS的学习笔记

css学习

HTML+CSS的学习笔记

使用的工具——vscode

文档类型声明标签——<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪个HTML版本来显示网页，它本身不属于HTML标签

lang语言种类——用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页

字符集——（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字，在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码

charset常用的值有——GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了世界所有国家需要用到的字符

上面的语法是必须要写的代码，否则可能引起乱码的情况，一般情况下，统一使用UTF-8编码，尽量统一写成标准的UTF-8，不要写成utf-8或者UTF8等模样


1
<!DOCTYPE html>//文档类型声明
2
<html lang="en">//定义网页语言
3
<head>
4
    <meta charset="UTF-8">//字符集定义了使用万国码
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9
<body>
10
    
11
</body>
12
</html>

语义化

语义化（SEO）：了搜索引擎优化，为了浏览器理解网页

可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为“非可替换元素”。例如：div、p、span等，写什么显示什么。

少部分元素，页面上显示的结果，取决于元素属性，称为“可替换元素”。例如：img、video、audio等，引用其他值进行进行显示。

绝大部分可替换元素均为行盒，不会独占一行。在行盒中，可替换元素是一个特例，可以设置宽高。

例如

在img中，有object-fit属性（默认值为fill）

object-fit：contain；保持图片的比例，同时不能将某些部分隐藏；因此可能会导致某些区域显示空白。

object-fit：cover；保持图片比例，必须将图片填充满区域；因此可能会导致图片的某些部分被隐藏。

object-fit：fill;不需要保持图片比例，全部填充满。

HTML 预留字符

显示字符	十进制编号	实体字符
''	&#34	&quot；
&	&#38	&amp；
<	&#60	&lt；
>	&#62	&gt；
空格	&#160	&nbsp；
￥	&#165	&yen；
€	&#8364	&euro；
©	&#169	&copy；
®	&#174	&reg；
™	&#8482	&trade；
×	&#215	&times；
÷	&#247	&divide；

这里是摘要部分。点击展示更多细节

这里是细节部分。

表单标签

使用表单是为了收集用户信息的

表单的组成

表单域——一般用form标签做为表单域<form></form>——把范围内的表单信息提交给服务器


xxxxxxxxxx
3
1
<form action="url地址" method="提交方式" name="表单名">
2
    //各种表单控件
3
</form>

表单控件（也称为表单元素）
提示信息

form表单(表单域)

用于生成表单域
- 属性
- action——用于指定单击表单内的确定按钮时，该表单被提交到的地址，这个属性必须有
- method——用于指定提交表单时发送那种类型的请求，属性值是get,post，取决于后端程序员的API
  - get——将请求参数的名和值转换成字符串
  - post——请求、通过HTML的post机制，将所有请求参数的名和值放在HTMLHEADAER中传输
- enctype——用于指定表单内的编码使用的字符集
- name——指定表单的唯一名字
- target——用于那种方式打开目标URL，值——_blank``_parent _self _top用法与a元素的target相同

表单元素

<input 输入框


xxxxxxxxxx
3
1
<form>
2
    <input type="">
3
</form>

type的值

text 单行文本
password 密码输入框
radio 单选按钮（页面上还有可能出现其他的单选，所以要用name属性来区分）（默认选中用checked）


xxxxxxxxxx
2
1
<input checked typt="radio" name="xingbie">男/*在男女中默认选中为男*/
2
<input type="radio" name="xingbie">女/*在这里边就可以二选一了*/

checkbox 多选按钮（默认选中用checked）(用法与radio一样)

submit 提交按钮——提交后就会把表单域里的信息提交给服务器


xxxxxxxxxx
4
1
<form>
2
    <input type="text">
3
    <input type="submit" value="提交">
4
</form>

reset 重置按钮——清除表单里的所有数据或者说还原初始内容


xxxxxxxxxx
4
1
<from>
2
    <input type="text">
3
    <input type="reset" >
4
</from>

button 按钮 ——value=""可以写入按钮里面的信息，如：input type="botton" value="这是一个按钮"就会显示一个按钮里面有“这是一个按钮”的字样(不建议使用这样的方式来制作按钮，建议使用botton元素来设置按钮)，一般用于响应JavaScript脚本，不提交form表单数据
image 图片形式提交按钮，用src赋予图片的URL 如：input type="image" src=""可以用width和height设置图片的大小
file 选择文件控件用于文件上传
color——用于创建一个允许用户使用的颜色选择器，或输入兼容的css语法颜色代码区域，调出操作系统的颜色选择器，一般配合js使用
time——生成一个时间选择器，包括小时和分
datetime——生成一个日期选择器，支持性不太好，可通过min和max限制选择范围
datetime-local——生成一个本地化日期选择器，包括年月日小时和分，可通过min和max限制选择范围
date——可以让用户输入一个日期输入区域，也可以使用日期选择器，它的结果包括年月日，可通过min和max限制选择范围，有兼容性问题，调用操作系统的日期，样式不能更改
month——生成一个月份选择器，可通过min和max限制选择范围
week——生成周期选择器，可通过min和max限制选择范围
email——生成一个email输入框，用户可以在输入框里输入email地址，如果指定了multip属性，可以输入多个email地址，每个地址之间需要用、英文逗号隔开，会自动检查email地址是否合法
number——生成一个只输入数字的输入框，可通过min和max限制选择范围，可以使用step更改每次增长（减少）的值（由一个数值到另一个数值的增量）


xxxxxxxxxx
1
1
<input type="number" step="10">

range——生成一个拖动条，用户只能输入指定范围内的值，可通过min和max限制选择范围，step可以更改增量，显示的值要靠js来实现
search——生成一个搜索文本框（一般在手机上用）
tel——生成电话本文本框
url——生成一个URL输入框，浏览器会自动检测内容

其他属性

name——定义input元素的名称，属性值用户自定义，radio和checkbox里每个input里的name值都要一样，目的是把input里对应的值传送给后台人员，这样input才会有值
checked——设置单选框、复选框初始状态为选中，属性值仅有checked
disabled——设置首次加载禁用该元素，属性值仅为disab
maxlength——设置文本框允许输入的最大字符数
readonly——设置文本框内容不允许被用户修改
size——设置该元素的宽度
src——设置图像所显示的图像url
value——input元素的值
placeholder——显示提示的文本，文本框没有内容时显示一些内容，只要在输入框里输入东西显示的内容就会自动消失，当删掉内容时又会显示<input typr="text" placehoder="请输入账号">无论使用什么类型的文本框都可以使用

name和value是每个表单元素都有的属性值，主要给后台人员使用

name表单元素的名字，要求单选按钮和复选按钮要有相同的name值

<label——标注标签

用于对其他表单元素进行说明，主要用于单击label生成标签，浏览器会自动将焦点转移到与标签相关的表单控件上

属性for，指定为关联表单控件的id即可

将说明和表单控件一起放入label元素内部


xxxxxxxxxx
2
1
<label for="id">用户名：</label>
2
<input id="id" type="text"/>//只要点击用户名文字就可以在文本框里进行输入

<select 下拉表单元素

size 设置选项栏的高度

multiple 用来决定是多选项列表还是单选列表，它的值只能是multiple

option 定义列表项，要让某个值默认选中，给它加上selected="selected"

用法：


xxxxxxxxxx
5
1
<select >
2
    <option value="">北京</option>
3
    <option value="">上海</option>
4
    <option  selected=“selected/*在html5里可以简写成selected不用写值*/” value="">广州</option>/*默认选中的是广州*/
5
</select>

option

代表一个下拉菜单选项或列表项
- 属性为：
- selected——用于指定该列表项初始状态为选中状态，属性值只能为selecte
- value——用于指定该列表项对应请求参数

optgroup

表示一个列表项组，该元素只能有option子元素

属性为：
label——指定该选项组的标签，这个属性必须设置


xxxxxxxxxx
11
1
选择你喜欢的美食：
2
<select multiple/*在分组里多选，每一个组都可以选择多个*/>
3
<optgroup label="北京美食">
4
<option value="goubuli">狗不理</option>
5
<option>北京烤鸭</option>
6
</optgroup>
7
<optgroup label="广州美食">
8
<option>乌龙茶</option>
9
<option>王老吉</option>
10
<option>加多宝</option>
11
</select>

outline（乱廓线）

不占具尺寸
给表单添加outline:0;或者outline:none;后就可以去掉默认的蓝色边框

<textarea 多行文本域

用于生产多行文本域

属性为
cols：指定文本域宽度，必须设置（表示一行内可以写的字的长度（通常为字母的个数））
rows：指定文本域高度，必须设置（表示可以写多少行文字）
readonly：指定文本域只读，属性值只能是readonly


xxxxxxxxxx
1
1
<textarea cols="50" rows="100" readonly="readonly">这个文本域只读/*默认显示内容写在这里*/</textarea>

没有空白折叠！

属性：name 、cols（用于定义文本框的列数）、rows（用于定义文本框的行数）相当于宽度和高度


xxxxxxxxxx
1
1
<textarea rows="10" cols="30"></textarea>

防止文本域拖拽——resize


xxxxxxxxxx
1
1
<textarea style="resize:none"></textarea>

<box-shadow 设置盒模型的阴影

h-shadow设置阴影水平偏移距离，必须填写变量
v-shadow设置垂直方向偏移距离，必须填写变量
blur模糊半径距离，变量可以不写
sprend阴影额外增加的尺寸
color阴影的颜色
insert切换为内部阴影


xxxxxxxxxx
4
1
<style>
2
div{
3
box-shadow:10px 10px 20px red insert;
4
}

<border-radius圆角边框

速写属性
含义如下
- border-top-left-radius
- border-top-right-radius
- border-bottom-right（left）-radius
- border-left-right（left）-radius


xxxxxxxxxx
4
1
<style>
2
div{
3
border-radius:50px;/*表示圆角半径大小*/
4
}

透明度

opacity——设置整个元素（元素里所有的东西，包括文字）的透明度，取值0~1
rgba——在颜色位置设置alpha通道，取值0~1


xxxxxxxxxx
1
1
div{bcakground-color:rgba(0,0,0,0.5);}/*前面三个数字代表颜色，后面的小数代表透明度*/

鼠标——cursor

使用cursor设置
它的值太多，不便展示，默认值为auto

也可以用图片做鼠标样式，但图片格式要是.ico格式或.cur格式


xxxxxxxxxx
1
1
div{cursor:url(图片地址),auto(加入auto是为了防止万一图片失效了，浏览器可以使用默认的鼠标样式。);}

盒子的隐藏

display：none——不生成盒子（可能影响到其他盒子的排版）
visibility：hidden——生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

背景图

img元素是属于HTML的概念、背景图片属于CSS的概念
- 当图片属于网页的内容时，必须使用img元素
- 当图片仅用于美化页面时必须使用背景图
属性
- background-image：
  - 选中图片 background-image:url("图片地址（必须相对CSS文件的路径）"
- background-repeat
  - 背景图片重复设置，值为no-repeat、repeat-y、repeat-x
- background-size:
  - 图片尺寸设置
    - 预设值——cover、contain
    - 数值——数值或百分比background-size:100% 100%;第一个值表示横向、第二个值表示纵向比值、相对于盒子的比值。
- background-position
  - 图片的位置
    - 预设值——center（横向居中同时纵向居中）、 center top、center bottom、left center、right center、left bottom、right bottom
    - 数值或百分比——数值相对位置background-position:40px 50px(第一个数值表示距离左边的距离、第二个数值表示里上边的距离)数值可以是负数
      - 雪碧图（精灵图）（spirit）——把很多的小图标合并成一张大图片。
- background-attachment
  - 通常用来控制背景图是否固定——内容滑动时背景图片不动，背景图相对于视口
```
xxxxxxxxxx
1
1
div{background-attachment:fixed;}
```
- 背景图和背景颜色混用的情况
  - 设置背景图，在盒子里没有被图片覆盖住的地方由颜色填充
- background（速写属性）可以设置关于背景的所有属性
```
xxxxxxxxxx
1
1
div{background:url() no-repeat 50% 50%/*这两个数字代表位置，后面的数值代表尺寸，注意要用斜杆隔开，如果不写位置，只写尺寸也要用斜杆加在尺寸数值的前面*//100% 50% fixed red}
```

<ul 无序列表

定义无序列表，可以用type=“”属性定义图形符号样式，属于值为：disc(点),square(方形)，circle（圆）,none(无)。
如下：


xxxxxxxxxx
3
1
<ul type="circle">
2
    <li>无序列表</li>
3
</ul>

<ol 有序列表

有序列表：ordered list


xxxxxxxxxx
3
1
<ol type="1">
2
<li></li>
3
</ol>

<type> 值——1，a，i.

<dl 定义列表

定义列表
dt
dd

<p 段落

段落

p*n>lorem j (n，j代表数字)

@所有元素与展示效果无关（浏览器带有默认CSS样式），元素展示到页面的效果由CSS决定。

每隔一段时间搜索引擎都会抓取页面源代码。

<i 斜体字

定义斜体字 LOVE

<del 删除线

定义删除字 ~~LOVE~~

<ins 插入字下划线

定义插入字 LOVE

<strong 加粗字

定义加重语句 LOVE

<sub 定义小标

定义小标字 LOve

<sup 定义上标

定义上标字 LOVE

<bdo

定义文字方向
如：

<bdo dir="ltr"> 文字从左往右——LOVE

<bdo dir="rtl"> 文字从右往左——EVOL

<pre

预格式化文本元素、不会空白折叠（在网页里显示的文本格式与代码里一样）
通常用于网页显示代码，有CSS属性加成

<blockquote

定义长的引用

<br

<br>元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

<a

超链接
href属性：
1）表示跳转地址

2）跳转到某一个锚点（跳转到当前页面的某一个位置）

3 ）功能性连接——触发某一个功能 javascript：<a href="javascript:"

4）发送邮件 mailto：<a href="mailto:2028876581@qq.com"></a>

5) 拨打电话 tel :<a href="tel:19977853174"></a>

<a href="#"></a>返回首页
target属性：决定新窗口在哪里打开

值	描述
_blank	在新窗口中打开链接
_self	（默认）
_parent	在父窗口中打开链接文档
_top	在整个浏览器窗口打开文档
framename	在指定框架中打开窗口，若不存在，则打开一个新的窗口

图片元素<img

<img> image的缩写，为空元素
alt属性：当图片资源失效时，将使用该属性的文字内容alt="图片正在加载中"
<a href=""><img src=""></a>

<map> 元素：地图，点击图片某一地方跳转页面：

<map name="solar-map">划分区域

<img usemap="#solar-map">


xxxxxxxxxx
3
1
<map name="solar-map">
2
<area shape="" coords="" href="" alt="">
3
</map>

shape形状——cricle（圆形）、rect（矩形）、poly（多边形）
coords坐标——原点在图片的左上角
- figure元素，指代，用于把图片标题、描述包裹起来


xxxxxxxxxx
4
1
<figure>
2
<a href=""><img src=""></a>
3
<map name="">
4
<area shape="" coords="" href="" alt="">

多媒体元素<video <audio

<video> 视频——<video src="" controls autoplay loop muted></video>

controls 控件（控制面板播放显示）
autoplay 自动播放
muted 静音播放
loop 循环播放

audio 音频（用法与

容器元素

<div

没有语义，不带来任何显示效果，用来划分区域


xxxxxxxxxx
4
1
<div>
2
<div></div>
3
<div></div>
4
</div>

*划分区域是非常重要的事，编写代码时是很重要的步骤

语义化容器元素

通常用来表示页头，文章头部等

通常用来表示页脚，文章尾部等

<article

用来表示整篇文章

<section

表示文章的章节

<aside

用于表达侧边栏（附加信息）

元素的包含关系

容器元素可以包含任何元素
a元素几乎可以包含任何元素
某些元素有固定的子元素
标题元素和段落元素不能相互嵌套，并且不能包含容器元素
元素的包含关系由内容类别决定
块级元素、行级元素，行级元素不包含块级元素，a元素除外（如今已经弃用块级元素和行级元素的说法了）

CSS（层叠样式表）

css规则：选择器+声明块
选择器为元素的对应关系（包括元素的名称、元素id的名称、元素类的名称等）
声明块出现在{}里，包含很多声明，也叫做属性，每一种属性表示一种样式规则
css代码的书写位置：

内部样式表：书写在<style>元素内部，通常放在<head></head>里面（便于浏览器读写样式）
内联样式表（元素样式表）：书写在元素里，如<h1 style=""></h1>此时不需要写选择器
外部样式表（推荐使用）：将样式书写在独立的CSS文件里，

需要在<head></head>里写入一个<link>元素，调用另一个文件里的CSS文件

如：


xxxxxxxxxx
3
1
<head>
2
<link rel="stylesheet" href="CSS文件地址">
3
</head>

此时CSS文件里直接书写选择器和声明块，不用写<style></style>
外部样式表可以解决多页面样式重复的问题
外部样式表有利于缓存从而提高页面响应速度
外部样式表有利于代码分离（html代码和css代码），有利于维护和修改

选择器

元素选择器

选择页面所有选中的元素


xxxxxxxxxx
3
1
<style>
2
元素名{}
3
</style>

id选择器

选择id值对应的元素，单独选中id改变样式


xxxxxxxxxx
3
1
<style>
2
#id{}
3
</style>

类选择器

类：class=""仅为CSS服务
```
xxxxxxxxxx
3
1
<style>
2
.类名{}
3
</style>
```
- 一个元素里可以添加多个类样式。如<p class="red blue green">期中red``blue``green都是类名。

通配选择器

*，选中所有元素


xxxxxxxxxx
3
1
<style>
2
*{}
3
</style>

属性选择器：

根据属于名和属性值选中元素


xxxxxxxxxx
3
1
<style>
2
[属性+属性值]{}
3
</style>

伪类选择器

选中某些元素的某些状态
hover——当鼠标移动到时才显示样式，写法:hover{}
active——激活状态，鼠标按下时才显示样式，写法:active{}
link——超链接未访问时的状态，只有<a>元素能用，写法:link{}
visited——超链接访问过后的状态，只有<a>元素能用，写法:visited
如果这四个伪类都要书写的话，书写顺序因为：


xxxxxxxxxx
6
1
<style>
2
a:link{}
3
a:visited{}
4
a:hover{}
5
a:active{}
6
</style>

focus——用于获取焦点的表单元素，焦点就是光标，一般情况下，类表单元素才能获取，因此这个选择器也主要针对于表单元素来说


xxxxxxxxxx
3
1
input:focus{
2
    background-color:yellow;
3
}

伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素
before:
after:


xxxxxxxxxx
3
1
<style>
2
a::after{}
3
</style>

选择器的组合

并且，连着写，如：


xxxxxxxxxx
4
1
<style>
2
p{}
3
p.red{}
4
</style>

后代元素——空格，如：


xxxxxxxxxx
3
1
<style>
2
.red li{}
3
</style>

子元素——> ，如


xxxxxxxxxx
3
1
<style>
2
.red>li{}
3
</style>

相邻兄弟元素——+ ，如：


xxxxxxxxxx
3
1
<style>
2
.red+li{}
3
</style>

后边出现的所有兄弟元素——~ ，如：


xxxxxxxxxx
3
1
<style>
2
.red~li{}
3
</style>

常见的样式声明

color：内部文字颜色，输入值——定义好的颜色单词、十六进制（#+六位六进制数）、由rgb(数字和数字和数字期间有‘，’分隔)的类似坐标系


xxxxxxxxxx
5
1
{
2
color:blue;
3
color:rgb(0,255,0);
4
color:#oo8c8c;
5
}

background-color:文字背景颜色（用法和color一样）

font-size ：元素内部文字的尺寸大小
px:像素
em：相对单位，相对于父元素的字体大小，加数字表示倍数

图片底部空白缝隙解决方案

因为行内块元素是和文字的基线对齐的，这就导致了图片底部会留有一个空白缝隙

给图片添加vertical-align:middle|top|bottom等（提倡使用）——img{vertical-align:middle/top/bottom}
把图片转换为块级元素display:block

vertical-align：图片、表单、文字垂直对齐

经常使用设置图片或者表单（行内块元素）和文字垂直对齐
用于设置垂直的对齐方式，但它只能针对行内元素或者行内块元素有效
- 值：
  - baseline——默认，元素放置在父元素基线上
  - top——把元素的顶端与行中最高的元素的顶端对齐
  - middle——把此元素放置在父元素的中部
  - bottom——把元素的顶端与行中最低的元素的顶端对齐
vertical-align属性可被用于两种环境：
- 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片
- 垂直对齐表格单元内容

font-weigh：文字粗细

文字粗细程度，可以取值数字，也可以为预设值（一般为两个值：bold（加粗）、normal（不加粗））

font-family：文字类型

（必须在计算机中所拥有的字体才有效）
font-serif:通用字体，防止输入的字体在浏览器里都没有，则可以调用浏览器跟随系统的字体

font-style：字体样式，

通常用于设置斜体，值为italic

text-decoration:文本修饰，给文本加线

line-through 删除线 ~~LOVE~~（除此外，<del>和<s>元素也可以显示下划线）
overline 字体上划线
underline 字体下划线 LOVE
none 取消下划线，如取消<a>元素的下划线

text-indent：首行缩进

可以写像素值
em，数字+em表示缩进多少个字符（相对于中文）

line-height:每行文本的高度，值越大每行文本的距离越大

值为px
值为em
- 设置行高为容器的高度，可以让单行文本垂直居中

width、height:背景的宽高

letter-spacing:文字间的间隔

word-spacing: 单词间的间隔

text-align:内部文字的水平排列方式

center(居中)
left(左对齐)
right(右对齐)
也可以是行盒居中（包括行块盒）

text-shadow（文本加阴影）

给文本添加阴影
x-position 阴影在x轴上偏移的距离（单位为px，下同）
y-position 阴影在y轴上偏移的距离
blur 周围的模糊程度
color 阴影的颜色

text-transform（改变大小写）

用于改变文本的大小写
capitalize 文本每个单词以大写字母开头
uppercase 全部大写字母
lowercase 全部小写字母
none 和原文一致
默认值为none

padding（内边距）

padding CSS 简写属性控制元素所有四条边的[内边距区域]

border(设置边框)

border属性是一个用于设置各种单独的边界属性的[简写属性]
border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。
solid（实线）
dashed（虚线）
thick double（带有间隔的线）

可以在值的后面再加上属性

font

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

background-image

用于指定一个容器的背景图片，主要的值有三个：
- none 无背景图片(默认)
- url(/* image path */) 指定的图片地址
- inherit 继承自父容器
当背景图片默认不设置的时候，默认值为none，表示没有背景图片。如果设置了背景图而不可用时，同时又设置了背景色，那么背景色可以代替。
当背景图片通过url来指定值的时候，该容器的背景图就会被设置为指定的图片地址。背景图可以设置多张，用background-image: url<path1>, url<path2>,…的形式

background-clip背景覆盖的区域设置

值为要覆盖的区域盒子，如background-clip:content-box;

background-origin

指定了背景图片原点相对于背景容器的位置，默认值为padding-box，表示和padding区域的原点对齐
border-box 背景图片会和容器的border原点对齐。
padding-box 背景图片会和容器的padding区域的原点对齐
content-box 背景图片会和容器的内容区域原点对齐

background-attachment

决定背景是在视口中固定的还是随包含它的区块滚动
- fixed 背景图片相对于当前视口
- scroll 背景图片相对于图片容器滚动，不随内容滚动
- local 如果容器内容有滚动情况，背景图片相对于内容滚动，而与包含它的容器无关

background-clip

MDN上说的是背景色是否能够延伸到边框下面，其实简单的理解就是：背景的裁剪区域。这点在MDN上面的一个例子已经很清楚地解释了这点。
border-box 背景色以边框为边界开始裁剪
padding-box 背景色以padding区域开始裁剪
content-box 背景色以内容区域开始裁剪(这点其实在我们工作中经常会被用到)
默认的属性的值为border-box

background-size

指定了背景图片的尺寸，可取属性有如下几个：

一个固定的值：contain/cover/auto
一个固定值auto，一个具体数值
两个具体的数值

盒模型

box:盒子，每一个元素在页面中都会生成一个矩形区域
盒子类型：
- 行盒：display等于inline的元素
- 块盒：display等于block的元素
行盒在页面中不换行，块盒独占一行，display默认值是inline
无论是行盒还是快盒都由一下几个部分组成：
- content（内容）、padding（填充）、border（边框）、margin（外边距）

content(内容)

蓝色区域，表示盒子的内容
属性值：width,height
内容区=内容盒

padding(填充)

盒子边框到盒子内容的距离，又叫内边距，如上图紫色区域，是速写属性
padding-top(上边距)
padding-bottom(下边距)
padding-left(左边距)
padding-right(右边距)
padding：20px 30px 40px 50px（顺序为上，右，下，左的边距），若四个都相同，则只写一个数值，如padding:30px
填充区+内容区=填充盒

border(边框)

边框=边框样式(border-style)+边框宽度(border-width)+边框颜色(border-color)
border-style——值：solid(实线)，dashed(虚线)，double（双线边框效果，双线间的宽度由border-width的值决定）等等
不设置边框颜色时默认为字体颜色
border-width:
border-top-width
border-bottom-width
border-left-width
border-right-width
- border:20px solid red(一般的写法)

border-top-width
border-bottom-width
border-left-width
border-right-width

margin(外边距)

边框到其他盒子的距离
margin-top，margin-bottom，margin-left，margin-right
可以速写包含其他的属性

display（更改盒模型）

block（块盒）
inline（行盒）
inline-block(行块盒)
- 1.不独占一行，可以与行盒排在同一排
  2.盒模型中所有尺寸都有效
flex（设置弹性盒子的必要选项设置）

两个元素中，若其中有一个是块盒也不能排列在同一行。

CSS浮动属性

float浮动布局

浮动可以让多个块盒元素一行内排列显示

网页布局第一标准：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
left 左边
right 右边
none 不改变原来位置
float
设置框是否需要浮动以及浮动方向
- left（左浮动）
- right（右浮动）
- none（不浮动）
- inherit

clear
设置元素哪一侧不允许出现其他浮动元素
- left（左）
- right（右）
- none
- inherit

clip
裁剪绝对定位元素
- auto
- rect（）
- inherit

overflow（溢出处理）

设置溢出的处理方式
- visible
  - 默认值，显示溢出的内容既不裁切也不添加滚条，溢出内容显示在元素外
- auto
  - 自动添加滚条和隐藏溢出内容
- hidden
  - 超出的内容隐藏
- scroll
  - 设置一条显示滚动条

CSS定位属性

position（定位）

用来设置元素的定位方式

属性值——static(默认值，没有定位) absolute（生成绝对定位元素） relative(生成相对父元素，相对其正常位置进行定位但不会脱离文档流)

用法：


xxxxxxxxxx
4
1
<style>
2
div{
3
    position:absolute/relative;top:30px;
4
}

position:fixed
- 固定定位，相对于视口（浏览器的可视窗口）

z-index（定位层序）

用于设置目标对象的定位层序，数值越大所在的层级越高，覆盖在其它层之上
仅在position：absolute时有效，默认值为auto，堆叠顺序与父元素相同


xxxxxxxxxx
4
1
<style>
2
div{
3
    position:absolute;top:20px;z-index:2;
4
}

层叠

声明冲突：同一个样式多次应用到同一个元素
层叠（权重计算）：解决声明冲突的过程，浏览器自动处理
- 比较重要性
  - 重要性从高到低：1）作者样式表>2）作者样式中的普通样式>3)浏览器默认样式
  - 增加！important时全打败其他样式（不建议加）
- 比较特殊性
  - 完成比较重要性时冲突还没有解决时进行到比较特殊性
    - 总体规则：选择器选中的范围越来越窄，越特殊
    - 具体规则：选择器计算出一个四位数（数值越大越特殊）
      - 千位：如果有内联样式，记为1，否则为0
      - 百位：将选择器所有id选择器的数量相加
      - 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
      - 个位：等于选择器中所有的元素选择器、伪元素选择器的数量
- 比较源次序
  - （特殊性相同时）代码书写靠后的胜出

继承

子元素会继承父元素某些css属性（通常跟文字内容相关的属性都会被继承）

属性值的计算过程

一个元素一个元素一次渲染，顺序按照页面文档的树形目录结构进行

渲染每一个元素的前提条件：该元素所有属性必须有值
一个元素从没有值到所有属性都有值，这个计算过程叫属性的计算过程
- 1、确定声明——2、层叠冲突——3、使用继承——4、使用默认值
- inherit——强制继承父元素样式
特殊的两个css取值：
- 1、inherit（继承）：将父元素的值取出应用到该元素上
- 2、initial：初始值。将该属性设置为默认值

盒模型应用

1、改变宽高范围
- 默认情况下。width和height设置的是内容盒的宽高
  - 衡量设计稿尺寸时往往使用的是边框盒，但设置width和height时设置的是内容盒
    - 解决方法：
      - 1）精确计算
      - 2）css3：box-sizing：border-box——这样设置的宽高就是盒子的实际尺寸了
2、背景覆盖范围
- 默认情况下，背景覆盖边框盒
background-clip：padding-box
border-box
content-box
3、溢出处理
- 有手动设置边框宽高时内容可能会溢出
- overflow（速写属性 overflow-x、overflow-y）:控制内容溢出边框后的处理方式
- 取值
  - visible（可见）
  - hidden（不可见）——溢出部分隐藏
  - scroll——溢出部分不可见生成滚动条
  - auto——看情况出现滚动条
4、断词规则：
- word-break 会影响在什么位置被截断换行
- norml：普通，cj字符（中日韩字符）在文字位置截断，非cj字符在单词位置截断
- break-all：截断所有，所有字符在文字处截断
- keep-all：保持所有，文字在单词之间截断
5、空白处理

滚动缓冲——scroll-behavior

两个属性

overflow:scroll;

scroll-behavior: smooth;

这两个属性要设置在父级容器中


xxxxxxxxxx
4
1
body{
2
    overflow:scroll;
3
    scroll-behavior:s
4
}

滚动条样式-webkit-scrollbar

使用伪元素-webkit-scrollbar——设置的是整条滚动条


xxxxxxxxxx
4
1
body::-webkit-scrollbar{
2
    width:1vw;
3
    background:red;
4
}

使用伪元素-webkit-scrollbar-thumb——设置滚动条滑块的样式


xxxxxxxxxx
3
1
body::-webkit-scrollbar-thumb{
2
    //注意的是滑块的宽度是和滚动条的宽度时一致的更改不了，最多只能设置颜色和圆角等样式
3
}

white-space：nowrap——控制文本不换行

overflow：hidden——隐藏溢出部分的内容

text-overflow：ellipsis——文本溢出部分不显示在盒内形成三个小点

适用于单行文本隐藏
前提是要在常规流盒子模式下使用


xxxxxxxxxx
9
1
<style>
2
    p{
3
        overflow:hidden;
4
        text-overflow:ellipsis;
5
    }
6
</style>
7
<P>
8
    我爱你大爷，你他娘的的真是个天才
9
</P>

多行文本省略号

多行文本溢出显示有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）


xxxxxxxxxx
5
1
overflow:hidden;
2
text-overflow:ellipsis;
3
display:-webkit-box;//弹性伸缩盒子模型
4
-webkit-line-clamp:2;//限制文本的行数
5
-webkit-box-orient:vertical;//设置或检索伸缩对象盒子的子元素的排列方式

行盒的盒模型

常见的行盒：包含具体内容的元素
- 如：span、strong、em、i、img、video、audio等
显著特点：
- 盒子沿着内容延伸，行盒跟着内容走、它的高度取决于内容的宽高
- 行盒不能设置宽高，要调整行盒的宽高，应该使用字体大小等属性间接调整
- 填充区，水平方向有效，垂直方向仅会影响背景
- 边框（border）水平方向有效，垂直方向仅会影响背景
- 外边距（margin）水平方向有效，垂直方向仅会影响背景
行块盒
- display：inline-block
  - 不独占一行
  - 盒模型中尺寸都有效
    - 空白折叠发生在行盒内部或行盒间

视觉格式化模型（布局规则）

页面中的多个盒子排列规则
视觉格式化模型大致上将页面中的盒子分为三种方式：
- 常规流布局（常规流、文档流、普通文档流）
  - 所有元素，默认情况下都属于常规流布局
- 总体规则：块盒独占一行，行盒水平依次排列
- 包含块：每个盒子都有它的包含块，包含块决定盒子的活动范围
- *绝大多情况下，盒子的包含块为其父元素的内容盒
块盒规则：
- 每个块盒的总宽度，必须刚好等于包含块的宽度，宽度默认值为auto：将剩余空间吸收掉；margin的取值也可以是auto，默认为0 ，width的吸收能力强于margin
  - 若宽度、边框、内边距。外边距计算后，仍有剩余空间，该剩余空间被margin-right全部吸收
  - 在常规流中，块盒在其包含块中居中，可以定义宽度，然后左右margin设置为auto
  - 将margin的值设置为负数，剩余空间变多，显示溢出包含块
- 每个块盒垂直方向上的auto值
  - height：auto，适应内容高度
  - margin垂直方向auto，表示0
- 百分比取值：
  - padding、宽度、margin可以取值为百分比，这些百分比相对包含块的宽度
  - 高度的百分比：
    - 包含块的高度是否取决于子元素，设置百分比无效
    - 包含块的高度不取决于子元素（认为定义高度值）百分比相对于父元素的高度
- 上下外边距的合并：两个常规流块盒，上下外边距相邻，会进行合并，两个相邻外边距取值不同时，他们之间的间隔的值为其中取值最大的外边距值

浮动——float

脱离标准文档流的控制移动到指定位置（俗称脱标）
浮动的盒子不在保留原先的位置

应用场景：

文字环绕

浮动不会挡住文字——前提是文字不被包装在另一个盒子里，简答的说文字和浮动盒子同为一个盒子之下的“子元素”


xxxxxxxxxx
7
1
<div>
2
<div class="float" style="float:left">
3
    </div>
4
   <p>
5
       文字我是文字文字文字文字文字文字文字文字文字文字
6
    </p> //这样文字就会自动环绕在浮动元素周围不会占据浮动元素脱离后的空间
7
</div>

横向排列

浮动的基本特点：
- 如果浮动所在的盒子剩余的空间不够装配了，那她就会自动另起一行来显示浮动的盒子
- 修改float的属性值为：
  - left：左浮动，元素靠左靠上
  - right：右浮动，元素靠右靠上
  - none：默认值，不浮动
  - 在包含块中排列时，会避开常规流盒子
  - 常规流块盒在排列时无视浮动盒子
当一个元素浮动后元素必定会成为块盒（给该display属性值为block）
浮动元素包含块和常规流一样，为父元素的内容盒
行盒在排列时会避开浮动盒子，如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
盒子尺寸：
- 宽度为auto时表示适应内容宽度
- 高度为auto时与常规流一致，适应内容高度
- margin为auto时，为0
- 边框、内边距百分比设置与常规流一样

高度坍塌

高度坍塌根源：常规流盒子的自动高度在计算时不会考虑浮动盒子
- 清除浮动盒子：
  - clear 默认值为none
    - left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方（他还是浮动盒子，只不过更改了浮动的样式）
    - right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方（他还是浮动盒子，只不过更改了浮动的样式）

button定义一个按钮

定义一个按钮

属性为type，值只能为button（按钮）、submit（提交）、reset（重置）


xxxxxxxxxx
2
1
<button type="三个属性值"></button>
2
<button type="button"><img src=""></bytton>/*用图片作为按钮*/

HTML进阶

<iframe元素（网页中嵌入另一个网页）

用于在网页中嵌入另一个页面
框架页
可以调用别人的网址播放别人的视屏等


xxxxxxxxxx
1
1
<iframe src="要嵌入页面的网址" frameborder/*设置边框/*="0"></iframe>

如若要同一页面跳转到插入的网页中，则在iframe元素里添加name=”名称“然后再在超链接里的target里配备到name名，如：


xxxxxxxxxx
2
1
<a href="" target="name"></a>
2
<iframe src="https://www.baidu.com" name="name"></iframe>

可替换元素

iframe元素是可替换元素——通常是行盒
通常显示的内容取决于元素的属性
可替换元素css不能完全控制其中的样式
具有行块盒的特点

表单元素

！主要用于收集用户数据

input元素

主要做输入框（前面有介绍）

select元素

下拉列表元素（前面有介绍）

textarea元素

文本域、多行文本框（前面有介绍）

button按钮元素

按钮元素

type属性
reset(重置按钮)、submit（提交按钮）、button（普通按钮）、默认值是submit


xxxxxxxxxx
1
1
<botton type="botton/submit/reset">按钮<!--按钮里面的内容写在这里--></botton>

也可以使用图片作为按钮


xxxxxxxxxx
3
1
<botton>
2
<img src="图片地址">
3
</botton>

可以在button里添加其他元素

配合表单元素的其他元素

label

普通元素、通常配合单选和多选框使用

显示关联——可以通过for属性让label关联表单元素，for属性值为表单元素的id


xxxxxxxxxx
5
1
选择性别：
2
<input id="boy" name="xingbie" type="radio">
3
<label for="boy">男</label><!--此时点击男这个文字也会选中，不需要一定点击前面的选择圈-->
4
<input id="g" name="xingbie" type="radio">
5
<label for="girl">女</label><!--此时点击女这个文字也会选中，不需要一定点击前面的选择圈-->

隐式关联


xxxxxxxxxx
8
1
<label>
2
<input name="xingbie" type="radio">
3
男
4
</label>
5
<label>
6
<input name="xingbie" type=:"radio">
7
女
8
</label><!--效果与显示关联一样-->

更多用法在前面有介绍

datalist数据列表

数据列表
该元素不会在页面上显示，通常用于和普通文本框配合使用


xxxxxxxxxx
6
1
<input type="text" list="id">
2
<datalist id="id">
3
<option value="chrome">谷歌浏览器</option>
4
<option value="firefox">火狐浏览器</option>
5
<option value="ie">IE浏览器</option>
6
</datalist>

美化表单元素

focus元素聚焦时的样式

伪类选择器
- focus——元素聚焦时的样式（即当选择当前盒子时盒子表现出来的样式）
- cheaked——
重置表单元素样式
设置textarea多行文本框是否允许调整尺寸


xxxxxxxxxx
6
1
textarea{
2
resize:both/*默认值，表示两个方向上都可以调整尺寸*/;
3
resize:none;/*不能调整尺寸*/
4
resize:horizontal;/*只在水平方向上可以调整尺寸*/
5
resize:vertical;/*表示在垂直方向上能调整尺寸*/
6
}

文本框边缘到内容的距离
- 使用padding
- 使用text-indent（首行缩进，只有第一个文字离边框有距离）


xxxxxxxxxx
4
1
input{
2
padding:0 20px;
3
/*text-indent:1em;/*
4
}

控制单选和多选的样式

表格元素<table

在css技术出现之前，网页通常使用表格布局。
现在一般在后台管理系统中可能使用表格
- 前台：面向用户
- 后台：面向管理员，对界面要求不高，对功能性要求高。
表格不再适用于网页布局，表格渲染速度慢。
合计<.td>` – [ ] 在表格里添加rowspan=”数值”来表示合并的单元列数，如``
属性
- border-collapse——边框的折叠方式（这个属性要写到table里才生效）
- 值——collapse（折叠，把相邻的边框合并成一个）、separate（分离（默认值））
伪类选择器tbody tr:nth-child(event/odd)表示选中的子元素偶数（奇数），例如用来实现隔行变色等效果
<abbr
- 表示缩写词
- <abbr title="cascading style sheet">css</abbr>abbr>表示css是缩写的，它的全称是cascading style sheet，在页面上显示时会在css下留下一条点虚线，当鼠标悬停时会显示全称
<time
- 提供给浏览器或搜索引擎阅读的时间
- ```
xxxxxxxxxx
3
1
<p>
2
今年<time datatime="2019-5-1">5月</time>，发大水。
3
</p>
```
- 运行出来在网页上没有效果，目的是给浏览器阅读
<b（bold）
- 以前是无语义元素，主要用于加粗字体
<q 一小段引用文本
- 一小段引用文本
- 属性cite——表示引用的链接地址
<blockquote 大段引用文本
- 大段引用文本
- 属性cite——表示引用的链接地址
<br 换行
- 用于在文本中换行
- 不能调整样式
<hr 分割线
- 无语义
- 用于分割
<meta
- 用来给网页添加源数据
- 也可以用来给搜索引擎提示关键字，如在搜索框里输入一个关键字，搜索引擎就会提示一些与之相关的链接，主要用于方便用户查找内容，用法<meta name="keywoords" content="美女，购物，衣装，美容">
- ```
xxxxxxxxxx
2
1
<meta name="author" content="zuozhe ,jkwky@qq.com">
2
<meta name="description" content="dui wangzhangde miaoshu jiejie"
```
- 还可以用于搜索引擎优化（SEO）
<link 链接外部资源
- 链接外部资源（可以是css文件、js文件、图标等
  - 属性
    - rel属性：表示的是关系，链接的资源和当前网页的关系
    - type属性：表示链接的资源是MIME类型，标准格式的字符串，可以不写
  - 链接图标
    - <link rel="icon" href="图标地址">用来制作网页名称前的图标，即为里<span>定义的网页名称前的图标</span></p></li><li><p><code><link rel="shortcut icon" href="图标地址"></code><span>另一种写法实现同样的效果</span></p></li></ul></li></ul></li></ul><hr /><h2 id='css-进阶'><span>css 进阶</span></h2><h3 id='规则'><span>@规则</span></h3><ul><li><p><span>at-rule：@规则（也叫@语句、css语句、css指令）</span></p><ul><li><p><span>import</span></p></li><li><p><span>@import“路径” ；——表示导入另外的css文件相当于在外部样式表里引用一个重置的css文件，则在HTML代码页面只需要引用自己的css样式文件即可，自己的css文件包含了重置的css样式表文件</span></p></li><li><p><span>charset</span></p></li><li><p><span>@charset “utf-8"；——告诉浏览器该css文件使用的字符编码集是utf-8；该指令必须写在第一行，同样的写在自己的外部样式css文件里，也可以不写（要写就必须写在第一行）</span></p></li></ul></li></ul><hr /><h2 id='web字体和图标'><span>web字体和图标</span></h2><ul><li><p><span>web字体</span></p><ul><li><p><span>解决用户电脑上用户没有安装相应字体的问题，强制让用户下载该字体（用户感觉不到下载）</span></p></li><li><p><span>制作一个新字体出来，使用到指令@font-face制作一个新字体</span></p></li><li><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-def">@font-face</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">font-family</span>:<span class="cm-string">"字体名"</span>；</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">src</span>：<span class="cm-atom">url</span>（<span class="cm-string">"字体文件的位置"</span>）；</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="height: 92px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul></li></ul><h4 id='字体图标'><span>字体图标</span></h4><ul><li><p><span>一个网站——iconfont——专门收集各种图标——图标代表的是字体</span></p></li><li><p><span>使用方法——</span></p></li></ul><h3 id='块级格式化上下文bfc'><span>块级格式化上下文（BFC）</span></h3><ul><li><p><span>全称</span><code>block formatting context</code><span> 简称</span><code>BFC</code></p></li><li><p><span>它是一块独立渲染区域，它规定了在该区域中，</span><strong><span>常规流盒子</span></strong><span>的布局</span></p><ul><li><p><span>常规流块盒在水平方向上，必须撑满包含块</span></p></li><li><p><span>常规流块盒在包含块的垂直方向上依次摆放</span></p></li><li><p><span>常规流块盒若外边距无缝相邻，则进行外边距合并</span></p></li><li><p><span>常规流块盒的自动高度和摆放位置，无视浮动元素</span></p></li></ul></li><li><p><span>BFC渲染区域：</span></p><ul><li><p><span>这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：</span></p><ul><li><p><span>根元素——意味着，</span><html><span>元素创建的BFC区域，覆盖了网页中所有的元素</span></p></li><li><p><span>浮动和绝对定位元素</span></p></li><li><p><span>overflow不等于visible（是overflow的默认值）的块盒</span></p></li></ul></li></ul></li><li><p><span>不同的BFC区域，它们进行渲染时互不干扰</span></p></li><li><p><span>创建BFC的元素，隔离了它内部和外部的联系，内部的渲染不会影响到外部</span></p></li><li><p><span>具体规则：</span></p><ul><li><p><span>创建的BFC的元素，它的自动高度需要计算浮动元素</span></p><ul><li><p><span>一般会出现的高度坍塌可以用这样的方法来解决，即在创建BFC的元素里样式表更改为浮动元素或者定位元素（绝对定位元素），但这样也会带来一些副作用，则可以采用副作用最小的方法——</span><code>设置overflow不是默认值的时候，更改其值，如hidden、auto等</code><span>来实现解决高度坍塌的问题。</span></p><ul><li><p><span>建议，如果仅仅是为了解决高度坍塌的问题，最好使用</span><code>.clearfix::after{content:"";display:blok;clear:both;}</code><span>清除浮动的方法</span></p></li></ul></li></ul></li><li><p><span>创建的BFC的元素，它的边框不会与浮动元素重叠</span></p><ul><li><p> </p></li></ul></li><li><p><span>创建的BFC的元素，不会和它的子元素进行外边距合并（处在不同的BFC区域它们的外边距是不会合并的）</span></p></li></ul></li></ul><hr /><h2 id='布局'><span>布局</span></h2><ul><li><p><span>排列页面中的区域</span></p></li><li><p><span>多栏布局</span></p><ul><li><p><span>两栏布局</span></p><ul><li><p> </p></li></ul></li><li><p><span>三栏布局</span></p></li><li><p><span>等高问题：</span></p><ul><li><p><span>css3的弹性盒</span></p></li><li><p><span>js控制</span></p></li><li><p><span>伪等高——侧边栏的高度跟随主体的高度</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 44px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 36px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span></span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -36px; width: 36px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">body</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">overflow</span>:<span class="cm-atom">hidden</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-qualifier">.aside</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">width</span>:<span class="cm-number">200px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">background-color</span>:<span class="cm-keyword">blue</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">height</span>:<span class="cm-number">1000000px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-property">margin-bottom</span>:<span class="cm-number">-99999px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp=""> </span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 230px;"></div><div class="CodeMirror-gutters" style="height: 230px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 35px;"></div></div></div></div></pre></li></ul></li><li><p><span>元素书写顺序</span></p><ul><li><p><span>通常浮动元素书写在前面</span></p></li><li><p><span>若浏览器要求主区域代码靠前书写</span></p><ul><li><p><span>主区域不需要BFC了</span></p></li><li><p><span>设置左右的margin把空间留出来，然后设置左右两个侧边栏为绝对定位，注意设置它们的包含块为定位元素</span></p></li></ul></li></ul></li><li><p><span>后台页面</span></p></li></ul></li></ul><hr /><h2 id='文本和段落'><span>文本和段落</span></h2><ul><li><p><span>@font-face{}——加载web字体</span></p></li><li><p><span>color——设置字体颜色</span></p></li><li><p><span>font-size——设置字体大小</span></p></li><li><p><span>letter-spacing——设置字符间距</span></p></li><li><p><span>writing-mode——设置文本方向</span><code>vertical-rl设置垂直方向</code><span>，结合</span><code>text-orientation</code><span>让文本保持竖直或倾斜</span></p></li><li><p><span>text-decoration——设置文本样式</span></p></li><li><p><span>line-height——设置行间距</span></p></li><li><p><span>text-indent——首行缩进</span></p></li><li><p><span>white-space——设置文本是否换行，nowrap不换行</span></p></li><li><p><span>文本省略</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>3</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">white-space</span>:<span class="cm-variable-3">nowrap</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">overflow</span>:<span class="cm-variable-3">hidden</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">text-overflow</span>:<span class="cm-variable-3">ellipsis</span>;</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="height: 69px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li><li><p><span>text-align——设置文本对齐</span></p></li><li><p><span>background-color——设置背景颜色</span></p></li><li><p><span>background-image——加载背景图片，url（）</span></p></li><li><p><span>background-size——调整背景尺寸</span></p></li><li><p><span>background-repeat——调整背景是否平铺</span></p></li><li><p><span>background-position——调整背景图片位置</span></p></li><li><p><span>background-size：contain——调整图片拉伸</span></p></li><li><p><span>background-size：cover——调整背景图片尽可能占满容器</span></p></li><li><p><span>cursor——设置鼠标样式，即指针如——pointer（小手）、wait（等待效果）、可以用url（）加载自定义的图片作为指针样式</span></p></li><li><p><span>list-style——更改无序列表的属性，可以用url（）自定义图片作为列表前面的小图标</span></p></li></ul><h2 id='滤镜filter'><span>滤镜filter</span></h2><ul><li><p><span>blur——高斯模糊——值为0px不模糊，像素值越大越模糊</span></p></li><li><p><span>contrast——对比度——默认值100%，上下调整值</span></p></li><li><p><span>grayscale——灰度——值为0~1,0为正常显示颜色，1我为黑白样式</span></p></li><li><p><span>hue-rotate——色度——默认值为0deg</span></p></li><li><p><span>drop-shadow——后方阴影</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">filter</span>:<span class="cm-variable-3">drop-shadow</span>(<span class="cm-number">10px</span> <span class="cm-number">10px</span> <span class="cm-number">30px</span> <span class="cm-tag">red</span>)<span class="cm-tag">invert</span>(<span class="cm-number">30%</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="height: 23px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul><hr /><h2 id='盒子位置'><span>盒子位置</span></h2><ul><li><p><span>左浮动的盒子向上向左排列</span></p></li><li><p><span>右浮动的盒子向上向右排列</span></p></li><li><p><span>浮动盒子的顶边不得高于上一个盒子的顶边</span></p></li><li><p><span>若剩余的空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能够容纳盒子，然后再向左或向右移动</span></p></li></ul><hr /><h5 id='行高的取值'><span>行高的取值</span></h5><ul><li><p><span>像素值——px——多行文不建议使用</span></p></li><li><p><span>直接书写无单位——当前元素字体大小的倍数，先继承在计算</span></p></li><li><p><span>em单位——当前元素字体大小的倍数，先计算在继承</span></p></li><li><p><span>百分比%</span></p></li></ul><hr /><h2 id='body的背景'><span>body的背景</span></h2><ul><li><p><span>背景超出内容盒、边框盒</span></p></li></ul><h5 id='画布'><span>画布</span></h5><ul><li><p><span>一块区域，用来填充背景</span></p><ul><li><p><span>特点</span></p><ul><li><p><span>最小宽度为视口宽度（有可能比视口大）</span></p></li><li><p><span>最小高度为视口高度（有可能比视口大）</span></p></li></ul></li></ul></li></ul><h4 id='html元素的背景'><span>HTML元素的背景</span></h4><ul><li><p><span>覆盖画布</span></p></li><li><p><span>给HTML设置背景后body的背景就正常了</span></p></li></ul><h5 id='给body设置背景'><span>给body设置背景</span></h5><ul><li><p><span>给HTML设置背景了，body元素的背景设置一切正常</span></p></li><li><p><span>如果没有设置HTML的背景，那么body元素的背景覆盖画布</span></p></li><li><p><span>设置这样的规则是为了给整个网页设置背景的机会</span></p></li></ul><h5 id='body背景图片'><span>body背景图片</span></h5><ul><li><p><span>背景的宽度的百分比是相对于视口的</span></p></li><li><p><span>背景的高度百分比相对于HTML元素高度</span></p></li><li><p><span>背景图的横向位置都是相对于视口</span></p></li><li><p><span>背景图的纵向位置相对于网页高度</span></p></li></ul><p><em><strong><span>（这tm简直是个坑）</span></strong></em></p><h2 id='css文档流---盒模型---定位---布局---响应式设计'><span>CSS文档流—盒模型—定位—布局—响应式设计</span></h2><h4 id='盒子模型'><span>盒子模型</span></h4><ul><li><p><span>margin（外边距）</span></p></li><li><p><span>paddin（内边距）</span></p></li><li><p><span>border（边框）</span></p></li><li><p><span>content（内容盒）</span></p></li></ul><p><em><strong><span>默认情况下设置盒子的高度和宽度时是在设置content的宽高度</span></strong></em><span>——这对于整个网页的排版而言是不合适的，盒子中的举个边框区域都没有被计算进来，我们需要修改盒子模型的大小设置方式</span></p><p><span>通过</span><strong><mark><span>box-sizing</span></mark></strong><span>属性就可以修改盒子模型的大小设置，该属性默认情况下值为——content box，即按内容区域计算盒子大小</span></p><p><span>实际项目中会将</span><mark><strong><span>box-sizing</span></strong></mark><span>属性修改为border box，即安边框区域计算盒子大小，同时还会将所有的HTML元素默认的margin外边框设置为0，这样当我们设置宽度和高度时就是设置了盒子在页面中的实际大小，也就是内容盒加上变宽的大小就是设置的宽度和高度的大小</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">*{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">margin</span>:<span class="cm-number">0</span>;//设置所有的<span class="cm-property cm-error">html</span>元素的外边距为<span class="cm-number">0</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-qualifier">.box</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">box-sizing</span>:<span class="cm-atom">border</span> <span class="cm-variable">box</span>;//修改盒子模型的大小设置方式为<span class="cm-property">border</span> <span class="cm-property cm-error">box</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 138px;"></div><div class="CodeMirror-gutters" style="height: 138px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><h4 id='文档流'><span>文档流</span></h4><p><span>各种元素盒子在文档中的排列</span></p><p><span>由display更改盒子的排列属性：</span></p><ul><li><p><span>block——普通元素排列方式——竖向排列</span></p></li><li><p><span>inline——行内块元素——横向排列</span></p></li></ul><h4 id='定位与布局'><span>定位与布局</span></h4><ul><li><p><span>定位——关注元素本身的位置</span></p></li><li><p><span>布局——关注的是容器的区域位置</span></p></li><li><p><strong><mark><span>元素定位</span></mark></strong></p><ul><li><p><span>坐标定位——position</span></p><ul><li><p><span>静态定位——static——默认情况下所有元素均为静态定位——严格按照文档流排列——对偏移量不受影响</span></p></li><li><p><span>相对定位——relative——元素相对于其所在文档流的位置——受坐标偏移量的影响，即使文档流偏移其原有在文档流的位置仍然保留，不会影响其他元素所在文档流的位置</span></p></li><li><p><span>绝对定位——absolute——会脱离所属的文档流位置影响其他元素的在文档流中的位置，受偏移量的影响，还会跳出容器（当容器没有设置为相对点位时绝对定位会跳出容器而坐标会相对于页面然后偏移，如果容器设置了相对定位则绝对定位坐标相对于容器偏移），所原有的文档流的位置不会被保留，会被其他元素占据</span></p></li><li><p><span>固定定位——fixed——也称为窗口定位，即按视口坐标定位——固定定位元素会脱离文档流，不会占用所在文档流中的位置，影响其他元素的在文档流中的位置——这个定位不会依赖于容器是否设置了相对定位属性，它会永远相对于视口坐标</span></p></li></ul></li><li><p><span>浮动定位——float</span></p></li></ul></li><li><p><strong><mark><span>浮动定位</span></mark></strong></p><ul><li><p><span>浮动定位主要采用容器与元素联动的方式进行定位——浮动定位主要应用在图文混合排版</span></p><ul><li><p><span>clear属性——控制器内部浮动元素的所在浮动位置</span></p></li><li><p><span>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。</span></p><p><span>clear 属性指定元素两侧不能出现浮动元素。</span><code>clear:both</code><span>两侧不能出现浮动元素</span></p></li></ul></li></ul></li><li><p><strong><mark><span>页面布局</span></mark></strong></p><ul><li><p><span>目前最流行的布局方式是</span><strong><span>flex布局</span></strong><span>——</span><u><span>弹性布局</span></u><span>、</span><strong><span>Grid布局</span></strong><span>——网格布局</span></p><ul><li><p><strong><mark><em><u><span>flex布局</span></u></em></mark></strong><span>——采用容器和元素联动的方式布局</span></p><ul><li><p><span>flex容器（container）</span></p><ul><li><p><strong><span>flex容器设置</span></strong></p><ul><li><p><strong><span>display：flex</span></strong></p></li><li><p><span>排列方向（flex-direction）</span></p><blockquote><p><span>设置横向——row（横向）、row-reverse</span></p><p><span>设置纵向——column（纵向）、column-reverse</span></p></blockquote></li><li><p><span>溢出处理（flex-wrap）</span></p><blockquote><p><span>no-wrap（允许溢出）</span></p><p><span>warp</span></p><p><span>wrap-reverse</span></p></blockquote></li><li><p><span>对齐方式</span></p><blockquote><p><strong><span>justify-content（横向对齐）</span></strong></p><p><span> </span><u><span>flex-start、center、flex-end、space-between、space-around</span></u></p><p><strong><span>align-items（纵向对齐）</span></strong></p><p><span> </span><u><span>flex-start、center、flex-end、stretch、baseline</span></u></p></blockquote></li></ul></li></ul></li><li><p><strong><span>flex元素设置</span></strong><span>（item）</span></p><ul><li><p><span>flex：flex-grow flex-shrink flex-basis</span></p><blockquote><p><span>flex-grow（扩展）——值为0或者1——当值为1时元素自动伸展填满剩余空间</span></p><p><span>flex-shrink（收缩）——值为0或者1——当值为1时表示容器空间不足时元素将进行等比例缩小，默认情况所有flex-shrink的值均为1</span></p><p><span>flex-basis（基础长度）——是用来设置元素的基础长度，可以使像素值或者百分比</span></p></blockquote></li></ul></li></ul></li></ul></li></ul></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 44px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 36px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>39</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -36px; width: 36px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta"><!DOCTYPE html></span>/*弹性布局设置*/</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">html</span> <span class="cm-attribute">lang</span>=<span class="cm-string">"en"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">meta</span> <span class="cm-attribute">charset</span>=<span class="cm-string">"UTF-8"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">meta</span> <span class="cm-attribute">http-equiv</span>=<span class="cm-string">"X-UA-Compatible"</span> <span class="cm-attribute">content</span>=<span class="cm-string">"IE=edge"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">meta</span> <span class="cm-attribute">name</span>=<span class="cm-string">"viewport"</span> <span class="cm-attribute">content</span>=<span class="cm-string">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">></span>Document<span class="cm-tag cm-bracket"></</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> *{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">margin</span>: <span class="cm-number">0px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">box-sizing</span>: <span class="cm-atom">border-box</span>;<span class="cm-comment">/* 盒子的宽高就是盒子的实际大小 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">13</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-qualifier">.body</span>{<span class="cm-comment">/* 容器 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-color</span>: <span class="cm-keyword">brown</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">15</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">width</span>: <span class="cm-number">400px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">16</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">400px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">17</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">display</span>: <span class="cm-atom">flex</span>;<span class="cm-comment">/* 默认情况下flex布局盒子横向排列 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">18</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">flex-direction</span>:<span class="cm-atom">row</span>;<span class="cm-comment">/* 元素纵向排列 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">19</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">flex-wrap</span>: <span class="cm-atom">nowrap</span>;<span class="cm-comment">/*溢出处理 nowarp表示允许溢出 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">20</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">justify-content</span>: <span class="cm-atom">center</span>;<span class="cm-comment">/* 横向对齐方式 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">21</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">align-items</span>: <span class="cm-atom">center</span>;<span class="cm-comment">/* 纵向对齐方式 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">22</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">23</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-qualifier">.one</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">24</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">flex-shrink</span>: <span class="cm-number">1</span>;<span class="cm-comment">/* 默认情况下flex-shrink值为1，表示容器空间不足时元素等比例缩放不会溢出容器，值为0时按照文档流排列，即可以溢出容器 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">25</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">width</span>: <span class="cm-number">100px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">26</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">flex-grow</span>: <span class="cm-number">1</span>;<span class="cm-comment">/* flex-grow属性默认情况下值为0，当值为1时元素盒子会自动填充容器空间直到占满容器空间 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">27</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">100px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">28</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">border</span>: <span class="cm-number">1px</span> <span class="cm-atom">solid</span> <span class="cm-keyword">black</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">29</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-color</span>: <span class="cm-keyword">white</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">30</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">31</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">32</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">33</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">34</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"body"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">35</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"one"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">36</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"one"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">37</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">38</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">39</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 899px;"></div><div class="CodeMirror-gutters" style="height: 899px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 35px;"></div></div></div></div></pre><ul><li><p><u><mark><em><strong><span>Grid布局</span></strong></em></mark></u></p><ul><li><p><span>grid布局是将容器设置成为一个二维的坐标系统，通过间具体单元格设置为区域的方式进行布局，即在grid布局中控制定位的方式是容器与区域，将一个普通的容器进行划分定义其行和列。同时还可以定义由行盒列划分出的单元格之间的间距</span></p></li><li><p><strong><span>Grid容器</span></strong><span>——container</span></p><ul><li><p><span>display：grid；</span></p></li></ul></li><li><p><strong><span>Grid区域</span></strong><span>——area</span></p><ul><li><p><span>坐标区域</span></p><ul><li><p> </p></li></ul></li><li><p><span>命名区域</span></p></li><li><p><span>浮动区域</span></p></li></ul></li></ul></li></ul><h2 id='svg'><span>SVG</span></h2><p><span>svg：scalable vector graphics </span><strong><span>可缩放的矢量图</span></strong></p><ul><li><p><span>该图片使用代码书写而成</span></p></li><li><p><span>缩放不会失真</span></p></li><li><p><span>内容轻量</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>svg使用</span></p></li><li><p><span>svg可以嵌入浏览器，也可以单独成为一个文件</span></p></li><li><p><span>xml语言,svg是使用该语言来定义 </span></p><ul><li><p><span>应用——在HTML文件里引用，用法为</span><code><img src="svg文件位置"></code><span>，也可以使用背景图引用位置链接就可以，还有</span><code>embed src="svg文件位置" type=""</code><span>，</span><code>object data="svg文件位置" type=""</code><span>，</span><code>ifarame src="svg文件位置"</code></p></li></ul></li></ul><h3 id='书写svg文件'><span>书写svg文件</span></h3><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="xml"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="xml"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.51172px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">svg</span> <span class="cm-attribute">width</span>=<span class="cm-string">"100"</span> <span class="cm-attribute">height</span>=<span class="cm-string">"100"</span> <span class="cm-attribute">xmlns</span>=<span class="cm-string">"http://www.w3.org/2000/svg"</span><span class="cm-tag cm-bracket">></span>/*相当于一个图片的容器。再由人为的控制图片里面都有些什么，svg是根文件，一般书写svg文件时都不会给单位，如果在这里不写图片的宽高的话，它的默认宽高是300*150，也可以在这里设置svg的样式，浏览器已经默认将svg文件当做图片处理*/</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tag cm-bracket"><</span><span class="cm-tag">rect</span> <span class="cm-attribute">width</span>=<span class="cm-string">"100"</span> <span class="cm-attribute">height</span>=<span class="cm-string">"100"</span> <span class="cm-attribute">fill</span>=<span class="cm-string">"red"</span> <span class="cm-attribute">stroke</span>=<span class="cm-string">"blue"</span> <span class="cm-tag cm-bracket">/></span>/*在这里要改变颜色的话就使用fill来定义，使用stroke来设置矩形的边框颜色，颜色的写法和css里一样，像这条命令就是定义了一个100*100的红色边框蓝色的矩形*/</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">cricle</span> <span class="cm-attribute">cx</span>=<span class="cm-string">"200"</span> <span class="cm-attribute">cy</span>=<span class="cm-string">"400"</span> <span class="cm-attribute">r</span>=<span class="cm-string">"50"</span> <span class="cm-attribute">fill</span>=<span class="cm-string">"red"</span><span class="cm-tag cm-bracket">/></span>/**/</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">svg</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 138px;"></div><div class="CodeMirror-gutters" style="height: 138px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><ul><li><p><span>svg可以由一个一个的图形组成的</span></p><ul><li><p><span>矩形：rect</span></p></li><li><p><span>颜色设置：fill——在svg里使用fill来设置图片的颜色</span></p></li><li><p><span>边框设置：stroke——在svg里使用stroke来设置图片的边框颜色，stroke-width来设置边框的粗细</span></p></li><li><p><span>位置设置：x和y，坐标系的原点在svg的左上角</span></p></li><li><p><span>圆形：circle，cx和cy代表圆形的圆心，r代表圆形的半径</span></p></li><li><p><span>椭圆：ellipse，rx和ry分别代表椭圆的两条</span></p></li></ul></li></ul><h2 id='ps切图'><span>PS切图</span></h2><ul><li><p><span>关于PS的学习详细请自学PS教程</span></p></li><li><p><span>B站（</span><a href='http://www.bilibili.com' target='_blank' class='url'>www.bilibili.com</a><span>)一搜一大把</span></p></li></ul><h2 id='css3'><span>CSS3</span></h2><h3 id='filter滤镜'><span>filter滤镜</span></h3><blockquote><p><span>filter:函数();例如： filter:blur(3px)；blur模糊处理，数字越大越模糊</span></p></blockquote><h3 id='css3过渡属性'><span>CSS3过渡属性</span></h3><h4 id='transition-delay'><span>transition-delay</span></h4><ul><li><p><span>设置经过多少时间的延迟后才开始过渡效果</span></p></li></ul><h4 id='transition-duration'><span>transition-duration</span></h4><ul><li><p><span>设置过渡动画效果持续的时间，单位为秒或毫秒，不设置默认为0，不产生动画过渡效果</span></p></li></ul><h4 id='transition-timing-function'><span>transition-timing-function</span></h4><ul><li><p><span>设置过渡动画时间曲线</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>属性值如下：</span></p><ul><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>ease——慢速开始然后变快</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>linear——匀速</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>ease-in——慢速开始</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>ease-out——一慢速结束</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>ease-in-out——以慢速开始和结束</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>cubic-bezier——曲线控制动画速度</span></p></li></ul></li></ul><h4 id='transition-property'><span>transition-property</span></h4><ul><li><p><span>设置元素那个CSS属性进行动画过渡效果处理，默认值为all</span></p></li></ul><h4 id='transition'><span>transition</span></h4><ul><li><p><span>用一条声明设置</span><code>transition-delay 、transition-duration、transition-timing-function、transition-property</code><span>4个属性</span></p></li></ul><hr /><h3 id='css3动画属性'><span>CSS3动画属性</span></h3><h4 id='keyframes'><span>@keyframes</span></h4><ul><li><p><span>通过@keyframes规则可以创建关键帧动画。以百分百规定改变发生的时间，或者通过关键词</span><code>fame</code><span>和</span><code>to</code><span>定义，等价于0或100%，0 是动画开始时间，100%是动画结束时间</span></p></li></ul><h4 id='animation-name'><span>animation-name</span></h4><ul><li><p><span>属性值为@keyframes动画规定名称，表示可以使用@keyframes预先定义的动画，赋值为0表示无动画</span></p></li></ul><h4 id='animation-delay'><span>animation-delay</span></h4><ul><li><p><span>设置经过多少时间延迟才开始执行动画效果，单位为秒和毫秒</span></p></li></ul><h4 id='animation-duration'><span>animation-duration</span></h4><ul><li><p><span>设置动画持续的时间，单位为秒和毫秒</span></p></li></ul><h4 id='animation-timing-function'><span>animation-timing-function</span></h4><ul><li><p><span>设置动画过渡的时间曲线</span></p></li></ul><h4 id='animation-iteration-count'><span>animation-iteration-count</span></h4><ul><li><p><span>设置动画播放次数，如果设置为</span><code>infinite</code><span>则为无限次播放</span></p></li></ul><h4 id='animation-direction'><span>animation-direction</span></h4><ul><li><p><span>设置动画是否轮流反向播放</span></p></li></ul><h4 id='animation-play-state'><span>animation-play-state</span></h4><ul><li><p><span>设置动画播放状态</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>属性值为</span><code>running(播放中)</code><span>、</span><code>paused(暂停)</code></p></li></ul><h4 id='transition-2'><span>transition</span></h4><ul><li><p><span>过渡动画属性简写</span></p></li></ul><hr /><h3 id='transformrotate绕盒子中心旋转'><span>transform:rotate()绕盒子中心旋转</span></h3><ul><li><p><span>值为旋转角度——单位为deg</span></p></li></ul><hr /><h3 id='transform-origin元素旋转中心点'><span>transform-origin（）元素旋转中心点</span></h3><ul><li><p><span>默认值为50% 50% </span></p></li><li><p><span>第一个值表示水平位置</span></p></li><li><p><span>第二个值表示垂直位置</span></p></li></ul><hr /><h2 id='css3-渐变gradients'><span>CSS3 渐变（Gradients）</span></h2><h3 id='线性渐变linear-gradients'><span>线性渐变（Linear Gradients）</span></h3><p><img decoding="async" src="https://www.runoob.com/wp-content/uploads/2014/07/gradient_linear.png" alt="线性渐变"></p><ul><li><p><strong><span>– 向下/向上/向左/向右/对角方向</span></strong></p></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">background-image</span>: <span class="cm-variable-3">linear-gradient</span>(<span class="cm-tag">direction</span>, <span class="cm-tag">color-stop1</span>, <span class="cm-tag">color-stop2</span>, ...);</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="height: 23px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><ul><li><p><strong><span>线性渐变 – 从上到下（默认情况下）</span></strong></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>3</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-atom">#e66465</span>, <span class="cm-atom">#9198e5</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="height: 69px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li><li><p><strong><span>线性渐变 – 从左到右</span></strong></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">200px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-atom">to</span> <span class="cm-atom">right</span>, <span class="cm-keyword">red</span> , <span class="cm-keyword">yellow</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="height: 92px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li><li><p><strong><span>线性渐变 – 对角</span></strong></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>: <span class="cm-number">200px</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-atom">to</span> <span class="cm-atom">bottom</span> <span class="cm-atom">right</span>, <span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="height: 92px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li><li><p><strong><span>使用角度</span></strong></p><p><span>如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。</span></p><p><strong><span>语法</span></strong></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">background-image</span>: <span class="cm-variable-3">linear-gradient</span>(<span class="cm-tag">angle</span>, <span class="cm-tag">color-stop1</span>, <span class="cm-tag">color-stop2</span>);</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="height: 23px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-number">-90deg</span>, <span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-atom">to</span> <span class="cm-atom">right</span>, <span class="cm-atom">rgba</span>(<span class="cm-number">255</span>,<span class="cm-number">0</span>,<span class="cm-number">0</span>,<span class="cm-number">0</span>), <span class="cm-atom">rgba</span>(<span class="cm-number">255</span>,<span class="cm-number">0</span>,<span class="cm-number">0</span>,<span class="cm-number">1</span>));</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 138px;"></div><div class="CodeMirror-gutters" style="height: 138px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><ul><li><p><span>repeating-linear-gradient() 函数用于重复线性渐变：</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/* 标准的语法 */</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">repeating-linear-gradient</span>(<span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span> <span class="cm-number">10%</span>, <span class="cm-keyword">green</span> <span class="cm-number">20%</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="height: 92px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>5</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-number">-90deg</span>, <span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}<span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>(<span class="cm-number">-90deg</span>, <span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="height: 115px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><h3 id='径向渐变radial-gradients'><span>径向渐变（Radial Gradients）</span></h3><p><img decoding="async" src="https://www.runoob.com/wp-content/uploads/2014/07/gradient_radial.jpg" alt="Radial gradient"></p><ul><li><p><strong><span>由它们的中心定义</span></strong></p></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">background-image</span>: <span class="cm-variable-3">radial-gradient</span>(<span class="cm-tag">shape</span> <span class="cm-tag">size</span> <span class="cm-tag">at</span> <span class="cm-tag">position</span>, <span class="cm-tag">start-color</span>, ..., <span class="cm-tag">last-color</span>);</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="height: 23px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><ul><li><p><span>shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。</span></p></li><li><p><span>size 参数定义了渐变的大小。它可以是以下四个值：</span></p><ul><li><p><strong><span>closest-side</span></strong></p></li><li><p><strong><span>farthest-side</span></strong></p></li><li><p><strong><span>closest-corner</span></strong></p></li><li><p><strong><span>farthest-corner</span></strong></p></li></ul></li><li><p><span>repeating-radial-gradient() 函数用于重复径向渐变：</span></p><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>3</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">repeating-radial-gradient</span>(<span class="cm-keyword">red</span>, <span class="cm-keyword">yellow</span> <span class="cm-number">10%</span>, <span class="cm-keyword">green</span> <span class="cm-number">15%</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="height: 69px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="css"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>3</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#grad</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">background-image</span>: <span class="cm-atom">radial-gradient</span>(<span class="cm-keyword">red</span> <span class="cm-number">5%</span>, <span class="cm-keyword">yellow</span> <span class="cm-number">15%</span>, <span class="cm-keyword">green</span> <span class="cm-number">60%</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="height: 69px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><h1 id='web服务器'><span>Web服务器</span></h1><p><strong><span>服务器</span></strong><span>（也称之为主机）是提供计算机服务的设备，它也是一台计算机，在网络环境下，根据服务器提供的服务类型不同。服务器分为文件服务器·、数据库服务器、应用程序服务器、web服务器等</span></p><p><strong><span>web服务器</span></strong><span>一般指网络服务器，是驻留于因特网上某种类型计算机的程序，可以向浏览器等web客户端提供文档，也可以放置网络文件，让全世界浏览；可以放置数据文件，让全世界下载。</span></p><p><span>根据网络的不同，服务器又可以分为本地服务器和远程服务器</span></p><p><span>本地服务器</span></p><ul><li><p><span>可以把自己的电脑设置为本地服务器，这样同一个局域网内的计算机就可以访问自己设置的网站了</span></p></li></ul><p><span>远程服务器</span></p><ul><li><p><span>通常是别的公司为我们提供的一台电脑，我在只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站</span></p></li></ul><h5 id='申请免费空间'><span>申请免费空间</span></h5><p><span>推荐网站——</span><a href='http://free.3v.do/' target='_blank' class='url'>http://free.3v.do/</a></p><p> </p><h1 id='一些有趣的css属性'><span>一些有趣的CSS属性</span></h1><h3 id='resize------设置元素可以调整大小'><span>resize——设置元素可以调整大小</span></h3><ul><li><p><span>设置元素可以调整大小</span></p></li><li><p><span>前提是只针对于块级元素，且要设置overflow属性值为</span><strong><span>auto/hidden/scroll</span></strong></p></li><li><p><span>常用属性值</span></p><ul><li><p><span>horizontal——控制是否可以水平缩放</span></p></li><li><p><span>vertical——控制是否可以垂直缩放</span></p></li><li><p><span>both——控制垂直水平缩放</span></p></li><li><p><span>none——不能缩放</span></p></li></ul></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 44px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 36px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>19</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -36px; width: 36px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag">div</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">overflow</span>:<span class="cm-atom">auto</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">resize</span>:<span class="cm-atom">both</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag">img</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">width</span>:<span class="cm-number">100%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">height</span>:<span class="cm-number">100%</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">13</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">15</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">16</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"img.jpg"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">17</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 27px;">18</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -36px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 27px;">19</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 438px;"></div><div class="CodeMirror-gutters" style="height: 438px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 35px;"></div></div></div></div></pre><h3 id='progress------进度条'><span>progress——进度条</span></h3><p><progress max="10" value='6'></progress></p><ul><li><p><span>此标签既有语义又有进度条的功能。兼容性也不错</span></p></li><li><p><span>可以通过value来获取进度条的信息</span></p></li></ul><h3 id='details------详细'><span>details——详细</span></h3><details> <summary>这是一个段落</summary> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, at?</p> </details><ul><li><p><span>字面意思是详细</span></p></li><li><p><span>该标签包裹的标签会被隐藏起来，点击时会显示</span></p></li><li><p><span>可以使用</span><strong><summary></strong><span>标签修改默认显示信息</span></p></li></ul><h3 id='datalist------输入时提供可选值'><span>datalist——输入时提供可选值</span></h3><ul><li><p><span>该标签适用于输入框提供可选值的一个列表标签，类似于select组件</span></p></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="html"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>8</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text"</span> <span class="cm-attribute">list</span>=<span class="cm-string">"datalist"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">datalist</span> <span class="cm-attribute">id</span>=<span class="cm-string">"datalist"</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"123"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"234"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"345"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"145"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"145"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">datalist</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 184px;"></div><div class="CodeMirror-gutters" style="height: 184px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><h3 id='noscript------浏览器不支持javascript时展示'><span>noscript——浏览器不支持JavaScript时展示</span></h3><ul><li><p><span>当浏览器不支持JavaScript代码时显示标签下的内容，大多用于对js依赖的应用</span></p></li></ul><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="html"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"vue.mim.js"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">noscript</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> this page is no want javascript</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">noscript</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="height: 92px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre><h3 id='页面横线滚动'><span>页面横线滚动</span></h3><ul><li><p><span>首先需要设置父级元素为flex布局，设置overflow属性为scroll</span></p></li><li><p><span>然后设置子元素的flex-shrink属性值为0</span></p></li><li><p><span>利用JavaScript代码</span></p><ul><li><pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="html"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.52344px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 27px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>7</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -27px; width: 27px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">body</span><span class="cm-operator">=</span><span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">".body"</span>)<span class="cm-comment">//获取父级容器</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">//给父级元素添加监听事件</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">body</span>.<span class="cm-property">addEventListener</span>(<span class="cm-string">'wheel'</span>,(<span class="cm-def">event</span>)<span class="cm-operator">=></span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable-2">event</span>.<span class="cm-property">preventDefault</span>()</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">body</span>.<span class="cm-property">scrollLeft</span> <span class="cm-operator">+=</span><span class="cm-variable-2">event</span>.<span class="cm-property">deltaY</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -27px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 18px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})<span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 161px;"></div><div class="CodeMirror-gutters" style="height: 161px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div></div></div></div></pre></li></ul></li></ul><h3 id='scroll-behavior-smooth------滚动缓冲'><span>scroll-behavior: smooth;——滚动缓冲</span></h3><ul><li><p><span>在父级元素设置该属性和属性值，即可得到滚动缓冲效果</span></p></li><li><p><span>设置a标签进行点击时就会触发该效果</span></p></li><li><p><span>同时父级元素要设置</span><strong><span>overflow</span></strong><span>的属性值为</span><strong><span>hidden</span></strong></p></li></ul><h3 id='-webkit-scrollbar------设置滚动条样式'><span>::-webkit-scrollbar——设置滚动条样式</span></h3><ul><li><p><span>这是一个伪元素</span></p></li><li><p><span>在父级元素上使用</span></p></li><li><p><span>父级元素的overflow属性设置为scroll</span></p></li></ul><h3 id='-webkit-scrollbar-thumb------设置滚动条滑块'><span>::-webkit-scrollbar-thumb——设置滚动条滑块</span></h3><ul><li><p><span>用法与滚动条样式相同</span></p></li></ul><h3 id='-webkit-scrollbar-track------设置滚动条里面的轨道'><span>::-webkit-scrollbar-track——设置滚动条里面的轨道</span></h3><ul><li><p><span>用法都一样</span></p></li></ul><h3 id='flex-shrink-0------flex布局元素不压缩'><span>flex-shrink: 0;——flex布局元素不压缩</span></h3><ul><li><p><span>在flex布局或者grid布局下的元素不会被压缩</span></p></li></ul><p> </p></div></div> </body> </html> </div> <div class="elementor-element elementor-element-2f46601 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="2f46601" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> <div class="elementor-element elementor-element-e466977 elementor-widget elementor-widget-post-info" data-id="e466977" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-inline-items elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-6a36832 elementor-inline-item" itemprop="author"> <a href="https://ldbyyds.online/author/serviceldbyyds-online/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-far-user-circle" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path d="M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author"> L DB </span> </a> </li> <li class="elementor-icon-list-item elementor-repeater-item-9844d62 elementor-inline-item" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>September 16, 2025</time> </span> </a> </li> <li class="elementor-icon-list-item elementor-repeater-item-f5a8c40 elementor-inline-item"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-far-clock" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-time"> <time>11:10 am</time> </span> </li> <li class="elementor-icon-list-item elementor-repeater-item-eb956b0 elementor-inline-item" itemprop="commentCount"> <a href="https://ldbyyds.online/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/#respond"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-far-comment-dots" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-comments"> No Comments </span> </a> </li> </ul> </div> <div class="elementor-element elementor-element-66c1174 elementor-widget__width-inherit elementor-widget elementor-widget-post-comments" data-id="66c1174" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <section id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/#respond" style="display:none;">Cancel reply</a></small></h2><form action="https://ldbyyds.online/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='4741' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </section> </div> <div class="elementor-element elementor-element-5c0f81e elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="5c0f81e" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> <div class="elementor-element elementor-element-a30ce5b elementor-widget__width-initial elementor-post-navigation-borders-yes elementor-widget elementor-widget-post-navigation" data-id="a30ce5b" data-element_type="widget" data-widget_type="post-navigation.default"> <div class="elementor-post-navigation" role="navigation" aria-label="Post Navigation"> <div class="elementor-post-navigation__prev elementor-post-navigation__link"> <a href="https://ldbyyds.online/2025/09/16/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf/" rel="prev"><span class="post-navigation__arrow-wrapper post-navigation__arrow-prev"><svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-left" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg><span class="elementor-screen-only">Prev</span></span><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Previous</span><span class="post-navigation__prev--title">前端开发学习路线</span></span></a> </div> <div class="elementor-post-navigation__separator-wrapper"> <div class="elementor-post-navigation__separator"></div> </div> <div class="elementor-post-navigation__next elementor-post-navigation__link"> <a href="https://ldbyyds.online/2025/09/16/css%e5%b1%9e%e6%80%a7%e5%a4%a7%e5%85%a8/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next</span><span class="post-navigation__next--title">CSS属性大全</span></span><span class="post-navigation__arrow-wrapper post-navigation__arrow-next"><svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span class="elementor-screen-only">Next</span></span></a> </div> </div> </div> </div> <div class="elementor-element elementor-element-5826f2b e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child" data-id="5826f2b" data-element_type="container"> <div class="elementor-element elementor-element-4ec665e elementor-widget elementor-widget-heading" data-id="4ec665e" data-element_type="widget" data-widget_type="heading.default"> <p class="elementor-heading-title elementor-size-default">Other My Posts</p> </div> <div class="elementor-element elementor-element-51a903a elementor-pagination-position-inside elementor-pagination-type-bullets elementor-arrows-position-inside elementor-widget elementor-widget-loop-carousel" data-id="51a903a" data-element_type="widget" data-settings="{"template_id":"3936","slides_to_show":"2","image_spacing_custom":{"unit":"px","size":0,"sizes":[]},"_skin":"post","slides_to_show_tablet":"2","slides_to_show_mobile":"1","slides_to_scroll":"1","edit_handle_selector":".elementor-loop-container","autoplay":"yes","autoplay_speed":5000,"pause_on_hover":"yes","pause_on_interaction":"yes","infinite":"yes","speed":500,"offset_sides":"none","arrows":"yes","pagination":"bullets","image_spacing_custom_tablet":{"unit":"px","size":"","sizes":[]},"image_spacing_custom_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="loop-carousel.post"> <div class="swiper elementor-loop-container elementor-grid" role="list" dir="ltr"> <div class="swiper-wrapper" aria-live="off"> <style id="loop-3936">.elementor-3936 .elementor-element.elementor-element-892c0c0{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#B6B6B6;--border-color:#B6B6B6;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-3936 .elementor-element.elementor-element-892c0c0:not(.elementor-motion-effects-element-type-background), .elementor-3936 .elementor-element.elementor-element-892c0c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3936 .elementor-element.elementor-element-6143e6c img{border-style:solid;border-width:1px 1px 1px 1px;border-color:#B9B9B9;border-radius:5px 5px 5px 5px;}.elementor-3936 .elementor-element.elementor-element-08b60fc .elementor-heading-title{font-family:"Abril Fatface", Sans-serif;font-size:14px;}.elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-icon i{color:#26498D;font-size:12px;}.elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-icon svg{fill:#26498D;--e-icon-list-icon-size:12px;}.elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-icon{width:12px;}.elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-text, .elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-text a{color:#4E4E4E;}.elementor-3936 .elementor-element.elementor-element-c90b714 .elementor-icon-list-item{font-family:"Times New Roman", Sans-serif;font-size:13px;}</style> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4743 post-4743 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-css tag-html" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/css%e5%b1%9e%e6%80%a7%e5%a4%a7%e5%85%a8/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/css%e5%b1%9e%e6%80%a7%e5%a4%a7%e5%85%a8/">CSS属性大全</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4741 post-4741 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-css tag-html" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/"> <img loading="lazy" width="603" height="603" src="https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD.jpg" class="attachment-large size-large wp-image-4099" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD.jpg 603w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-300x300.jpg 300w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-150x150.jpg 150w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-600x600.jpg 600w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-100x100.jpg 100w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-50x50.jpg 50w" sizes="(max-width: 603px) 100vw, 603px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/">HTML+CSS的学习笔记</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4739 post-4739 post type-post status-publish format-standard has-post-thumbnail hentry category-note" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf/">前端开发学习路线</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4735 post-4735 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-java tag-jdbc" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/java/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/java/">JAVA</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4733 post-4733 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-javascript" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/javascript/"> <img loading="lazy" width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd.jpg" class="attachment-large size-large wp-image-4053" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd.jpg 855w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-300x300.jpg 300w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-150x150.jpg 150w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-768x768.jpg 768w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-600x600.jpg 600w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-100x100.jpg 100w, https://ldbyyds.online/wp-content/uploads/2025/08/JavaScriptMd-50x50.jpg 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/javascript/">JavaScript</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4729 post-4729 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-java" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/java%e9%9d%a2%e5%90%91%e5%af%b9%e8%b1%a1/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/java%e9%9d%a2%e5%90%91%e5%af%b9%e8%b1%a1/">JAVA面向对象</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0" aria-label="Previous"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-chevron-left" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg> </div> <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0" aria-label="Next"> <svg aria-hidden="true" class="e-font-icon-svg e-eicon-chevron-right" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z"></path></svg> </div> <div class="swiper-pagination"></div> </div> </div> </div> <div class="elementor-element elementor-element-7d3d7da e-con-full e-flex e-con e-child" data-id="7d3d7da" data-element_type="container"> <div class="elementor-element elementor-element-602a503 e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex elementor-invisible e-con e-child" data-id="602a503" data-element_type="container" data-settings="{"sticky_on":["desktop"],"animation":"fadeIn","sticky_offset":3,"sticky":"top","sticky_effects_offset":0,"sticky_anchor_link_offset":0}"> <div class="elementor-element elementor-element-e11a6cb e-con-full e-flex e-con e-child" data-id="e11a6cb" data-element_type="container" id="titleTables" data-settings="{"background_background":"classic"}"> <div class="elementor-element elementor-element-74aef3b elementor-widget elementor-widget-table-of-contents" data-id="74aef3b" data-element_type="widget" data-settings="{"exclude_headings_by_selector":[],"no_headings_message":"No headings were found on this page.","headings_by_tags":["h2","h3","h4","h5","h6"],"marker_view":"numbers","min_height":{"unit":"px","size":"","sizes":[]},"min_height_tablet":{"unit":"px","size":"","sizes":[]},"min_height_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="table-of-contents.default"> <div class="elementor-toc__header"> <div class="elementor-toc__header-title"> HTML+CSS的学习笔记 </div> </div> <div id="elementor-toc__74aef3b" class="elementor-toc__body"> <div class="elementor-toc__spinner-container"> <svg class="elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading" aria-hidden="true" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z"></path></svg> </div> </div> </div> </div> <div class="elementor-element elementor-element-7f710e8 e-flex e-con-boxed e-con e-child" data-id="7f710e8" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-4e9a11d elementor-align-right elementor-widget elementor-widget-button" data-id="4e9a11d" data-element_type="widget" data-widget_type="button.default"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://ldbyyds.online/category/note/"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-icon"> <i aria-hidden="true" class="icon icon-double-angle-pointing-to-right"></i> </span> <span class="elementor-button-text">MORE NOTE</span> </span> </a> </div> <div class="elementor-element elementor-element-aaa50a5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="aaa50a5" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> <div class="elementor-element elementor-element-e559c59 elementor-pagination-type-bullets elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-loop-carousel" data-id="e559c59" data-element_type="widget" data-settings="{"template_id":"3936","slides_to_show":"2","image_spacing_custom":{"unit":"px","size":5,"sizes":[]},"_skin":"post","slides_to_show_tablet":"2","slides_to_show_mobile":"1","slides_to_scroll":"1","edit_handle_selector":".elementor-loop-container","autoplay":"yes","autoplay_speed":5000,"pause_on_hover":"yes","pause_on_interaction":"yes","infinite":"yes","speed":500,"offset_sides":"none","arrows":"yes","pagination":"bullets","image_spacing_custom_tablet":{"unit":"px","size":"","sizes":[]},"image_spacing_custom_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="loop-carousel.post"> <div class="swiper elementor-loop-container elementor-grid" role="list" dir="ltr"> <div class="swiper-wrapper" aria-live="off"> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4718 post-4718 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-database tag-mysql tag-sql" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/mysql/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/mysql/">MYSQL</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4727 post-4727 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-database tag-java tag-jdbc" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/jdbc/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/jdbc/">JDBC</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4739 post-4739 post type-post status-publish format-standard has-post-thumbnail hentry category-note" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba%bf/">前端开发学习路线</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4709 post-4709 post type-post status-publish format-standard has-post-thumbnail hentry category-note" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f/"> <img loading="lazy" width="616" height="616" src="https://ldbyyds.online/wp-content/uploads/2025/08/weixMD.jpg" class="attachment-large size-large wp-image-4098" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/weixMD.jpg 616w, https://ldbyyds.online/wp-content/uploads/2025/08/weixMD-300x300.jpg 300w, https://ldbyyds.online/wp-content/uploads/2025/08/weixMD-150x150.jpg 150w, https://ldbyyds.online/wp-content/uploads/2025/08/weixMD-600x600.jpg 600w, https://ldbyyds.online/wp-content/uploads/2025/08/weixMD-100x100.jpg 100w, https://ldbyyds.online/wp-content/uploads/2025/08/weixMD-50x50.jpg 50w" sizes="(max-width: 616px) 100vw, 616px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f/">微信小程序</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4741 post-4741 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-css tag-html" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/"> <img loading="lazy" width="603" height="603" src="https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD.jpg" class="attachment-large size-large wp-image-4099" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD.jpg 603w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-300x300.jpg 300w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-150x150.jpg 150w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-600x600.jpg 600w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-100x100.jpg 100w, https://ldbyyds.online/wp-content/uploads/2025/08/htmlMD-50x50.jpg 50w" sizes="(max-width: 603px) 100vw, 603px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/htmlcss%e7%9a%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/">HTML+CSS的学习笔记</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4723 post-4723 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-java tag-servlet" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/servlet/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/servlet/">Servlet</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4702 post-4702 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-jquery" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/15/jquery/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/15/jquery/">JQuery</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/15/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-15</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4721 post-4721 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-python" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/python/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/python/">Python</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4714 post-4714 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-vue" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/vue/"> <img loading="lazy" width="405" height="405" src="https://ldbyyds.online/wp-content/uploads/2025/08/vueMd.jpg" class="attachment-large size-large wp-image-4086" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/vueMd.jpg 405w, https://ldbyyds.online/wp-content/uploads/2025/08/vueMd-300x300.jpg 300w, https://ldbyyds.online/wp-content/uploads/2025/08/vueMd-150x150.jpg 150w, https://ldbyyds.online/wp-content/uploads/2025/08/vueMd-100x100.jpg 100w, https://ldbyyds.online/wp-content/uploads/2025/08/vueMd-50x50.jpg 50w" sizes="(max-width: 405px) 100vw, 405px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/vue/">VUE</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> <div data-elementor-type="loop-item" data-elementor-id="3936" class="elementor elementor-3936 swiper-slide e-loop-item e-loop-item-4743 post-4743 post type-post status-publish format-standard has-post-thumbnail hentry category-note tag-css tag-html" data-elementor-post-type="elementor_library" role="group" aria-roledescription="slide" data-custom-edit-handle="1"> <div class="elementor-element elementor-element-892c0c0 e-flex e-con-boxed e-con e-parent" data-id="892c0c0" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6143e6c elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image" data-id="6143e6c" data-element_type="widget" data-widget_type="theme-post-featured-image.default"> <a href="https://ldbyyds.online/2025/09/16/css%e5%b1%9e%e6%80%a7%e5%a4%a7%e5%85%a8/"> <img width="800" height="800" src="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp" class="attachment-large size-large wp-image-4035" alt="" srcset="https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash.webp 1000w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-300x300.webp 300w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-150x150.webp 150w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-768x768.webp 768w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-600x600.webp 600w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-100x100.webp 100w, https://ldbyyds.online/wp-content/uploads/2025/08/goran-ivos-iacpoKgpBAM-unsplash-50x50.webp 50w" sizes="(max-width: 800px) 100vw, 800px" /> </a> </div> <div class="elementor-element elementor-element-08b60fc elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="08b60fc" data-element_type="widget" data-widget_type="theme-post-title.default"> <h1 class="elementor-heading-title elementor-size-default"><a href="https://ldbyyds.online/2025/09/16/css%e5%b1%9e%e6%80%a7%e5%a4%a7%e5%85%a8/">CSS属性大全</a></h1> </div> <div class="elementor-element elementor-element-c90b714 elementor-widget elementor-widget-post-info" data-id="c90b714" data-element_type="widget" data-widget_type="post-info.default"> <ul class="elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-a6e29fa" itemprop="datePublished"> <a href="https://ldbyyds.online/2025/09/16/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-calendar" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path></svg> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>2025-09-16</time> </span> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0" aria-label="Previous"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-chevron-left" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg> </div> <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0" aria-label="Next"> <svg aria-hidden="true" class="e-font-icon-svg e-eicon-chevron-right" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z"></path></svg> </div> <div class="swiper-pagination"></div> </div> <div class="elementor-element elementor-element-9620cd5 elementor-widget elementor-widget-elementskit-back-to-top" data-id="9620cd5" data-element_type="widget" data-widget_type="elementskit-back-to-top.default"> <div class="ekit-wid-con" > <div class="ekit-back-to-top-container ekit-btt icon_only" data-settings="{"offset_top":0,"show_after":null,"show_scroll":"","style":"icon_only","foreground":null,"background":null}"> <span class="ekit-btt__button "> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-double-up" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M177 255.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 351.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 425.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1zm-34-192L7 199.7c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l96.4-96.4 96.4 96.4c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9l-136-136c-9.2-9.4-24.4-9.4-33.8 0z"></path></svg> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <footer data-elementor-type="footer" data-elementor-id="3965" class="elementor elementor-3965 elementor-location-footer" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-7f1daab e-flex e-con-boxed e-con e-parent" data-id="7f1daab" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-37532da e-con-full e-flex e-con e-child" data-id="37532da" data-element_type="container"> <div class="elementor-element elementor-element-76691a3 elementor-widget elementor-widget-heading" data-id="76691a3" data-element_type="widget" data-widget_type="heading.default"> <h2 class="elementor-heading-title elementor-size-default">©ldbart.online</h2> </div> <div class="elementor-element elementor-element-abad610 elementor-widget elementor-widget-heading" data-id="abad610" data-element_type="widget" data-widget_type="heading.default"> <h2 class="elementor-heading-title elementor-size-default"><a href="https://beian.miit.gov.cn/#/Integrated/index">桂ICP备2025067116号-1</a></h2> </div> </div> </div> </div> </footer> <script type="text/javascript"> // 确保在DOM完全加载后执行 (function($) { // 等待WooCommerce加载完成 var wcLoadedInterval = setInterval(function() { if (typeof woocommerce_params !== 'undefined') { clearInterval(wcLoadedInterval); initBuyNowButtonLogic(); } }, 100); // 最大等待时间：5秒 setTimeout(function() { clearInterval(wcLoadedInterval); if (typeof woocommerce_params === 'undefined') { initBuyNowButtonLogic(); } }, 5000); function initBuyNowButtonLogic() { // 按钮悬停文本切换 $('.cbnfw-buy-now-button[data-hover-text]').hover( function() { $(this).data('original-text', $(this).text()); $(this).text($(this).data('hover-text')); }, function() { $(this).text($(this).data('original-text')); } ); // 处理所有变体表单 $('form.variations_form').each(function(index, form) { var $form = $(form); var $button = $form.find('.cbnfw-buy-now-button.cbnfw-variable-product'); if (!$button.length) { return; } var baseUrl = $button.data('base-url') || $button.attr('href'); // 更新按钮URL的函数 function updateButtonUrl(variation) { if (!variation || !variation.variation_id) { $button.attr('disabled', 'disabled').addClass('disabled'); return false; } try { var newUrl = new URL(baseUrl); newUrl.searchParams.set('add-to-cart', variation.variation_id); // 添加所有变体属性 $.each(variation.attributes, function(attr, value) { var attrKey = attr.replace('attribute_', ''); newUrl.searchParams.set(attrKey, value); }); var finalUrl = newUrl.toString(); $button.attr('href', finalUrl).removeAttr('disabled').removeClass('disabled'); return true; } catch (error) { $button.attr('disabled', 'disabled').addClass('disabled'); return false; } } // 1. 监听WooCommerce的show_variation事件 $form.on('show_variation', function(event, variation) { updateButtonUrl(variation); }); // 2. 监听WooCommerce的hide_variation事件 $form.on('hide_variation', function() { $button.attr('disabled', 'disabled').addClass('disabled'); }); // 3. 直接监听所有选择框的变化（备用方案） $form.find('.variations select').on('change', function() { // 等待WooCommerce处理变体 setTimeout(function() { var variationId = $form.find('input[name="variation_id"]').val(); if (variationId) { // 收集所有选中的属性 var attributes = {}; $form.find('.variations select').each(function() { var $select = $(this); var value = $select.val(); if (value) { attributes['attribute_' + $select.attr('name')] = value; } }); updateButtonUrl({ variation_id: variationId, attributes: attributes }); } else { $button.attr('disabled', 'disabled').addClass('disabled'); } }, 300); }); // 4. 初始检查 - 页面加载时可能已选择的变体 setTimeout(function() { var variationId = $form.find('input[name="variation_id"]').val(); if (variationId) { var attributes = {}; $form.find('.variations select').each(function() { var $select = $(this); var value = $select.val(); if (value) { attributes['attribute_' + $select.attr('name')] = value; } }); updateButtonUrl({ variation_id: variationId, attributes: attributes }); } }, 800); // 5. 为按钮添加点击事件处理 $button.on('click', function(e) { if ($(this).is('[disabled]')) { e.preventDefault(); alert('Please select the complete product variant options first'); } }); }); } })(jQuery); </script> <style> .cbnfw-buy-now-button.disabled { opacity: 0.7; cursor: not-allowed; pointer-events: all !important; } </style> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script> ( function ( body ) { 'use strict'; body.className = body.className.replace( /\btribe-no-js\b/, 'tribe-js' ); } )( document.body ); </script> <script> /* <![CDATA[ */var tribe_l10n_datatables = {"aria":{"sort_ascending":": activate to sort column ascending","sort_descending":": activate to sort column descending"},"length_menu":"Show _MENU_ entries","empty_table":"No data available in table","info":"Showing _START_ to _END_ of _TOTAL_ entries","info_empty":"Showing 0 to 0 of 0 entries","info_filtered":"(filtered from _MAX_ total entries)","zero_records":"No matching records found","search":"Search:","all_selected_text":"All items on this page were selected. ","select_all_link":"Select all pages","clear_selection":"Clear Selection.","pagination":{"all":"All","next":"Next","previous":"Previous"},"select":{"rows":{"0":"","_":": Selected %d rows","1":": Selected 1 row"}},"datepicker":{"dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesMin":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Prev","currentText":"Today","closeText":"Done","today":"Today","clear":"Clear"}};/* ]]> */ </script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <div class="cr-pswp pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" aria-label="Close (Esc)"></button> <button class="pswp__button pswp__button--share" aria-label="Share"></button> <button class="pswp__button pswp__button--fs" aria-label="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" aria-label="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" aria-label="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" aria-label="Next (arrow right)"></button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <script> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script type="text/javascript"> var visualizerUserInteractionEvents = [ "scroll", "mouseover", "keydown", "touchmove", "touchstart" ]; visualizerUserInteractionEvents.forEach(function(event) { window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true }); }); function visualizerTriggerScriptLoader() { visualizerLoadScripts(); visualizerUserInteractionEvents.forEach(function(event) { window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true }); }); } function visualizerLoadScripts() { document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) { jQuery.getScript( elem.getAttribute("data-visualizer-script") ) .done( function( script, textStatus ) { elem.setAttribute("src", elem.getAttribute("data-visualizer-script")); elem.removeAttribute("data-visualizer-script"); setTimeout( function() { visualizerRefreshChart(); } ); } ); }); } function visualizerRefreshChart() { jQuery( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize(); if ( jQuery( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).length > 0 ) { visualizerUserInteractionEvents.forEach( function( event ) { window.addEventListener( event, function() { jQuery( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize(); }, { passive: true } ); } ); } } </script> <script src="https://ldbyyds.online/wp-content/plugins/the-events-calendar/common/build/js/user-agent.js?ver=da75d0bdea6dde3898df" id="tec-user-agent-js"></script> <script id="cr-frontend-js-js-extra"> var cr_ajax_object = {"ajax_url":"https://ldbyyds.online/wp-admin/admin-ajax.php"}; var cr_ajax_object = {"ajax_url":"https://ldbyyds.online/wp-admin/admin-ajax.php","disable_lightbox":"0"}; //# sourceURL=cr-frontend-js-js-extra </script> <script src="https://ldbyyds.online/wp-content/plugins/customer-reviews-woocommerce/js/frontend.js?ver=5.91.0" id="cr-frontend-js-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/customer-reviews-woocommerce/js/colcade.js?ver=5.91.0" id="cr-colcade-js"></script> <script src='https://ldbyyds.online/wp-content/plugins/the-events-calendar/common/build/js/underscore-before.js'></script> <script src="https://ldbyyds.online/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script> <script src='https://ldbyyds.online/wp-content/plugins/the-events-calendar/common/build/js/underscore-after.js'></script> <script id="wp-util-js-extra"> var _wpUtilSettings = {"ajax":{"url":"/wp-admin/admin-ajax.php"}}; //# sourceURL=wp-util-js-extra </script> <script src="https://ldbyyds.online/wp-includes/js/wp-util.min.js?ver=6.9" id="wp-util-js"></script> <script id="wp-api-request-js-extra"> var wpApiSettings = {"root":"https://ldbyyds.online/wp-json/","nonce":"3627f034b0","versionString":"wp/v2/"}; //# sourceURL=wp-api-request-js-extra </script> <script src="https://ldbyyds.online/wp-includes/js/api-request.min.js?ver=6.9" id="wp-api-request-js"></script> <script src="https://ldbyyds.online/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after </script> <script src="https://ldbyyds.online/wp-includes/js/dist/url.min.js?ver=9e178c9516d1222dc834" id="wp-url-js"></script> <script src="https://ldbyyds.online/wp-includes/js/dist/api-fetch.min.js?ver=3a4d9af2b423048b0dee" id="wp-api-fetch-js"></script> <script id="wp-api-fetch-js-after"> wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "https://ldbyyds.online/wp-json/" ) ); wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "3627f034b0" ); wp.apiFetch.use( wp.apiFetch.nonceMiddleware ); wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware ); wp.apiFetch.nonceEndpoint = "https://ldbyyds.online/wp-admin/admin-ajax.php?action=rest-nonce"; //# sourceURL=wp-api-fetch-js-after </script> <script src="https://ldbyyds.online/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script> <script id="woo-variation-swatches-js-extra"> var woo_variation_swatches_options = {"show_variation_label":"1","clear_on_reselect":"","variation_label_separator":":","is_mobile":"","show_variation_stock":"","stock_label_threshold":"5","cart_redirect_after_add":"no","enable_ajax_add_to_cart":"yes","cart_url":"https://ldbyyds.online/cart-2/","is_cart":""}; //# sourceURL=woo-variation-swatches-js-extra </script> <script src="https://ldbyyds.online/wp-content/plugins/woo-variation-swatches/assets/js/frontend.min.js?ver=1763003950" id="woo-variation-swatches-js"></script> <script src="https://ldbyyds.online/wp-content/themes/hello-elementor/assets/js/hello-frontend.js?ver=3.4.5" id="hello-theme-frontend-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.33.2" id="elementor-webpack-runtime-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.33.2" id="elementor-frontend-modules-js"></script> <script src="https://ldbyyds.online/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.33.2","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"e_pro_free_trial_popup":true,"nested-elements":true,"home_screen":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"cloud-library":true,"e_opt_in_v4_page":true,"import-export-customization":true,"mega-menu":true,"e_pro_variables":true},"urls":{"assets":"https:\/\/ldbyyds.online\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/ldbyyds.online\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/ldbyyds.online\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"815bb39156"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","woocommerce_notices_elements":[],"hello_header_logo_type":"title","hello_footer_logo_type":"logo"},"post":{"id":4741,"title":"HTML%2BCSS%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%20%E2%80%93%20%28NO_ON%29","excerpt":"HTML+CSS\u81ea\u5b66\u7b14\u8bb0\n","featuredImage":"https:\/\/ldbyyds.online\/wp-content\/uploads\/2025\/08\/htmlMD.jpg"}}; //# sourceURL=elementor-frontend-js-before </script> <script src="https://ldbyyds.online/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.33.2" id="elementor-frontend-js"></script> <script src="https://ldbyyds.online/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/pro-elements/assets/lib/sticky/jquery.sticky.min.js?ver=3.33.1" id="e-sticky-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/elementskit-lite/libs/framework/assets/js/frontend-script.js?ver=3.7.6" id="elementskit-framework-js-frontend-js"></script> <script id="elementskit-framework-js-frontend-js-after"> var elementskit = { resturl: 'https://ldbyyds.online/wp-json/elementskit/v1/', } //# sourceURL=elementskit-framework-js-frontend-js-after </script> <script src="https://ldbyyds.online/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widget-scripts.js?ver=3.7.6" id="ekit-widget-scripts-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=10.3.5" id="sourcebuster-js-js"></script> <script id="wc-order-attribution-js-extra"> var wc_order_attribution = {"params":{"lifetime":1.0e-5,"session":30,"base64":false,"ajaxurl":"https://ldbyyds.online/wp-admin/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}}; //# sourceURL=wc-order-attribution-js-extra </script> <script src="https://ldbyyds.online/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=10.3.5" id="wc-order-attribution-js"></script> <script src="https://ldbyyds.online/wp-includes/js/comment-reply.min.js?ver=6.9" id="comment-reply-js" async data-wp-strategy="async" fetchpriority="low"></script> <script src="https://ldbyyds.online/wp-content/plugins/pro-elements/assets/js/webpack-pro.runtime.min.js?ver=3.33.1" id="elementor-pro-webpack-runtime-js"></script> <script id="elementor-pro-frontend-js-before"> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/ldbyyds.online\/wp-admin\/admin-ajax.php","nonce":"4f801bc225","urls":{"assets":"https:\/\/ldbyyds.online\/wp-content\/plugins\/pro-elements\/assets\/","rest":"https:\/\/ldbyyds.online\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":true},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"woocommerce":{"menu_cart":{"cart_page_url":"https:\/\/ldbyyds.online\/cart-2\/","checkout_page_url":"https:\/\/ldbyyds.online\/checkout-2\/","fragments_nonce":"4823f9a257"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/ldbyyds.online\/wp-content\/plugins\/pro-elements\/modules\/lottie\/assets\/animations\/default.json"}}; //# sourceURL=elementor-pro-frontend-js-before </script> <script src="https://ldbyyds.online/wp-content/plugins/pro-elements/assets/js/frontend.min.js?ver=3.33.1" id="elementor-pro-frontend-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/pro-elements/assets/js/elements-handlers.min.js?ver=3.33.1" id="pro-elements-handlers-js"></script> <script src="https://ldbyyds.online/wp-content/plugins/elementskit-lite/widgets/init/assets/js/animate-circle.min.js?ver=3.7.6" id="animate-circle-js"></script> <script id="elementskit-elementor-js-extra"> var ekit_config = {"ajaxurl":"https://ldbyyds.online/wp-admin/admin-ajax.php","nonce":"be610074c2"}; //# sourceURL=elementskit-elementor-js-extra </script> <script src="https://ldbyyds.online/wp-content/plugins/elementskit-lite/widgets/init/assets/js/elementor.js?ver=3.7.6" id="elementskit-elementor-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://ldbyyds.online/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://ldbyyds.online/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html> 
合计

HTML+CSS的学习笔记

HTML+CSS的学习笔记

语义化

可替换元素和非可替换元素

HTML 预留字符

表单标签

form表单(表单域)

表单元素

<input 输入框

type的值

其他属性

<label——标注标签

<select 下拉表单元素

option

optgroup

outline（乱廓线）

<textarea 多行文本域

<box-shadow 设置盒模型的阴影

<border-radius圆角边框

透明度

鼠标——cursor

盒子的隐藏

背景图

<ul 无序列表

<ol 有序列表

<dl 定义列表

<p 段落

<i 斜体字

<del 删除线

<ins 插入字下划线

<strong 加粗字

<sub 定义小标

<sup 定义上标

<bdo

<pre

<blockquote

<br

<a

图片元素<img

多媒体元素<video <audio

容器元素

<div

语义化容器元素

<header

<footer

<article

<section

<aside

元素的包含关系

CSS（层叠样式表）

选择器

元素选择器

id选择器

类选择器

通配选择器

属性选择器：

伪类选择器

伪元素选择器

选择器的组合

常见的样式声明

图片底部空白缝隙解决方案

vertical-align：图片、表单、文字垂直对齐

font-weigh：文字粗细

font-family：文字类型

font-style：字体样式，

text-decoration:文本修饰，给文本加线

text-indent：首行缩进

line-height:每行文本的高度，值越大每行文本的距离越大

letter-spacing:文字间的间隔

word-spacing: 单词间的间隔

text-align:内部文字的水平排列方式

text-shadow（文本加阴影）

text-transform（改变大小写）

padding（内边距）

border(设置边框)

font

background-image

background-clip背景覆盖的区域设置

background-origin

background-attachment