HTML与CSS

HTML

图标：

meta标签

属性：

charset:指定网页的字符集

name :指定的数据名称

content 指定的数据内容

keywords 标识网页的关键字

description :用于对网站的描述

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n14" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> http-equiv="refresh" content="时间(秒)";url="网址" ：网页重定向</pre>

标签：hgroup

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">可以将相同的标签放在hgroup中</pre>

自定义标签属性：通常用来传值或用于图片的懒加载

格式：data-,自己更改

内联框架iframe

属性：src(链接）,width,height, frameborder（边框）

scrolling:滚动条值：yes,no，auto

name:框架名

跳转到指定的框架使用target的属性值为iframe的name值

table表格

属性：cellspacing：单元格之间的距离, cellpadding：内容到边框的距离,rowspan：合并行,colspan,align:表格对齐方式,valign ：top /middle/bottom,th:头部单元格，效果居中加粗

完整表格：caption(标题) thead(表头)，tbody(表体)，tfoot(表尾)

css样式：border-spacing:指定边框之间的距离,0为边框相加

border-collapse:collapse //设置边框合并

如果没有将tr写入tbody中，浏览器默认将tr放入tbody中

form表单

input的一些属性：readonly(只读)，disabled(失效，不会提交数据），required(必填）,minlenth,maxlenth,placeholder,value,pattern(正则匹配)autocomplete: on/off 自动补全（一些提示信息）autofocus自动获取焦点

radio:单选钮，属性：name(必须) value, checked(默认)，

checkbox 复选框

reset :重置

file:文件上传

textarea 属性：cols列数 rows:行数

label for="" 值对应文本的id值

select>option 属性selected 默认选中

属性：multiple 多选，size多选下出现的行数

html5

语义化标签：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n45" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签
注意：在IE9中需要将这些恶标签转换为块级元素</pre>

video

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n47" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">属性：
src
controls 显示控件
muted 静音播放，解决谷歌禁止问题
autoplay 自动播放，谷歌禁止
loop 循环播放
poster 值为url 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</pre>

audio

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n49" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">属性：
autoplay
controls
loop
muted
src</pre>

input新增type属性值

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">type:
color file date......</pre>

CSS

外部引入css:

样式权重：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n59" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">important 10000
内联样式 1000
id选择器 100
class ,伪类， 10
标签选择器 1</pre>

字体

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n61" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">font-size:字体大小
font-family :字体 Courier,"Courier New" //按先后顺序获得字体
font-style:字体样式 normal/italic/oblique
font-weight: normal/bold/bolder/lighter
line-height:设置字体的行高
复合写法：
font:font-style font-weight font-size/line-height font-family

text-align:center/right/left/justify(两端对齐) 文本水平对齐
text-decoration: normal/underline/line-through/overline
text-indent: 缩进
em是一个相对单位，相对于当前元素文字的大小
text-transform: 设置文本字体的大小写 none/capitalize:将每一个单词第一个字母转化为大写 /uppercase/lowercase

背景图片：background-image:url("")
background-repeat:repeat/repeat-x/repeat-y/no-repeat
background-position:10px 10px;
背景范围：
background-clip:border-box(默认值)/padding-box:背景不会出现在边框里，只出现在内容区和内边距
/content-box:背景只出现在内容区
background-origin: 计算图片背景设置偏移量的原点
值：padding-box:默认值，以内边距为原点
content-box:以内容区为原点
border-box:以边框为原点
background-size: 100px(宽) 100px（高）
也可以填写contain或cover
contain(图片比例不变图片完整展示，)
cover(图片比例不变，铺面整个元素，图片会展示不全)
background-attachment:(设置背景图片是否随滚动条移动)
srcoll:默认值移动（参考为整个可视窗口定位）
fixed:固定

vertical-align: 垂直对齐方式 baseline(基线对齐)
/top(顶部对齐)/bottom(底部对齐)/middle(居中对齐)
也可以使用数字方式来调试例如：vertical-align:10px
white-space:normal/nowrap(不
换行) /pre(保留空白)
text-overflow:ellipsis（溢出设置为省略号）

word-wrap:break-word 允许长单词换到下一行</pre>

选择器

复合选择器：

交集选择器：多个选择器连着在一起

并集选择器：可以同时选中多个元素改变样式，以逗号分隔

关系选择器：

子元素选择器：用>连接

后代选择器：祖先空格后代

兄弟选择器用+连接紧挨着的第一个兄弟

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n71" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> 用 ~连接下面所有的兄弟节点</pre>

属性选择器(css3)：

用中括号包围： [title]

还可选择具体属性名的属性 [title=abc]

[属性名^=abc] :属性名以abc开头

[属性名$=abc] ：属性名以abc结尾

[属性名*=abc] :属性名中包含abc

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n78" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">input[value]{

}</pre>

伪类

伪类选择器：

不存在的类，特殊的类

用于描述一个元素的特殊状态

写法：：开头

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n85" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">l:first-child 第一个子元素 :first-of-type 相同元素类型的第一个
:last-child最后一个子元素 :last-of-type 指定类型的最后一个
:nth-child(n) 选中第n个子元素 n从1开始
奇数：odd,2n+1,(此时n从0开始) :nth-of-type(n)
偶数：even ,2n
:nth-last-child(-n+number) 倒数后几位（包含后面的全部）
:not(选择器) 否定伪类排除符合添加的元素

header div:nth-of-type(1){ //div类型中的第一个
}
header div:nth-child(1){ //header所有子元素的第一个}
</pre>

链接的伪类：

:link 表示正常的链接

:visited: 表示访问过的链接由于隐私，只能改颜色

:hover 用来表示鼠标移入的状态

：active 选择活动的链接（即鼠标按下但是还未弹起的链接

正确的顺序为：link,visited,hover,active

:focus 获取焦点的表单元素

伪元素

表示页面中一些特殊的并不真实存在的元素（特殊位置）

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n96" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">::first-letter :选中首字母
::first-line 表示第一行
::selection 拖拽鼠标选中后
::before 元素之前的位置
::after 与content搭配,内容不能被选中(样式为行内元素)</pre>

em:相对于元素的字体大小

rem:相对于根节点的字体大小（HTML）

颜色

rgb(255,255,255);

rgba(255,255,255,不透明度)

十六进制rgb:#ffffff

hsl值：

h:色相 s:饱和度（0%_{100%）l:亮度（0%}100%）

文档流

行列元素的高度和宽度是被内容撑开的

盒子模型（box model)

内容：content

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n110" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">边框：border
两个值：上下左右
三个值：上左右下
四个值：上右下左
top right bottom left

border-style: (默认值为：none)dotted 圆点虚线 dashed 点虚线 double双实线
border-radius:
border-collapse:collapse 合并相邻边框</pre>

内边距：padding

外边距：margin

水平布局

一个元素在其父元素中，水平布局必须满足

margin-left+border-left+paddign-left+width+padding-right+border-right+margin-right=父元素的宽度

width,margin-left,margin-right的值可设置为auto

auto为自动配置使其各值满足条件

如果两个外边距设置为auto，固定width那么效果是居中

eg: width:100;margin:0 auto; 水平居中注意：要给宽度

垂直布局

当元素在父元素中溢出：使用样式

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n123" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">overflow:hidden/ 默认值：visible（溢出）/scroll(溢出的部分显示滚动条)/auto（根据需要生成滚动条）
overflow-x: (处理横轴)
overflow-y: (处理纵轴)</pre>

省略号三件套：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">overflow:hidden
white-space:normal/nowrap(不换行) /pre(保留空白)
text-overflow:ellipsis（溢出设置为省略号）</pre>

多行显示省略号

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n127" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">overflow:hidden
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2 // 限制显示文本的行数
-webkit-box-orient:vertical</pre>

相邻垂直外边距会发生重叠现象：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n129" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">对于兄弟元素：取两者之间较大值
一正一负：取两者之和
都为负：取绝对值较大的
对于父子元素：子元素使用外边距会影响到父元素（开启bfc)</pre>

行级元素不能设置宽高，但是能设置：padding和border，margin但是不会影响到垂直方向的布局，直接覆盖

display设置元素的性质：

inline-block:能设置宽高，但是不会独自一行，如果换行，元素之间会有间隙，值：none 使元素不会显示

visibility:用来设置元素的显示状态

值：hidden隐藏，隐藏后依然会占据原来的位置，默认值：visible：正常显示，

与display:none的区别在与，visibility保留原来的位置。

默认样式（浏览器）

body: margin

p: margin

ul: list-style:none

盒子大小

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n141" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">box-sizing: 默认值（content-box)width和height来决定内容区
border-box: width和height决定盒子可见框的大小即：内容+边框+内边距</pre>

轮廓和圆角,阴影

outline: 用法和border一样，但是它不会影响可见框的大小,它也可以取消表单聚焦时的轮廓颜色

outline:none

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n146" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">box-shadow:用来设置元素的阴影效果，不会影响页面布局
阴影是和元素重合的
第一个值：水平偏移量正值向右移动
第二个值：垂直偏移量正值向下移动
第三个值：阴影的模糊半径（虚实效果）
第四个值：阴影的尺寸
第五个值：颜色（rgba)
第六个值：inset 内部阴影</pre>

文字阴影：text-shadow

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n148" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">第一个值：水平偏移量正值向右移动
第二个值：垂直偏移量正值向下移动
第三个值：阴影的模糊半径（虚实效果）
第四个值：颜色（rgba)</pre>

圆角：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n150" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">border-top-left-radius:x轴取半径，y轴取半径（以相交点为圆心）
border-top-right-radius:
border-bottom-left-radis:
border-bottom-right-radius:

</pre>

浮动

float:left/right

水平布局的等式不需要强制成立，脱离文档流，不再占立文档流的位置

边界为父元素的边框

浮动元素不会覆盖文字

行类元素脱离文档流后，特点和块级元素一样

子元素无法支撑父元素的高度，引起塌陷问题

BFC(Block Formatting Context) 块级格式化环境

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n159" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">开启bfc后的特点：
利用BFC避免margin重叠。
BFC内部的元素和外部的元素绝对不会互相影响
不会被浮动元素所覆盖
开启后父元素可以包裹住浮动元素，不会产生塌陷</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n160" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">触发bfc: 设置父元素浮动
设置元素的性质为行内块 display：inline-block
设置overflow他的值为非visible，可取值：hidden，auto
开启绝对定位： position:absolute

        </pre>

清除浮动

clear：left/right/both 清除浮动对本元素的影响

原理：浏览器自动给元素加了一个上外边距，使其位置不能到浮动元素的影响

使用both，实际是清除比较大的那个的影响

解决浮动引起的塌陷：添加在父元素上，解决当父元素没有设置高度是，浮动的元素不能支撑起父元素的高度问题。

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n166" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">box::after{
content:'';
clear:both;
display:block
}
</pre>

解决浮动塌陷和父子外边距重叠

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n168" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">.clearfix::after,
.clearfix::before{
content:'';
display:table;
clear:both
}</pre>

定位

position:absolute/relative/fixed

相对定位：relative

相对于元素之前的位置进行定位，提升了元素的层级，没有脱离文档流，原来的位置不会被占用。不会改变元素本身的性质，使用偏移量来设置元素的位置。

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n173" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">top/bottom/left/right</pre>

绝对定位：absolute

会脱离文档流，原来的位置被占用，会改变元素的性质，行内变成块级，块的高度被内容撑开使元素提升一个层级，相对于他的最近开启了定位的祖先元素进行定位，不能撑起父元素的高度

固定定位：fixed

参照于网页视口进行定位

不会随网页滚动条而动

粘滞定位 sticky(了解)

设置元素当达到条件时不随滚动条滚动，性质与相对定位差不多

以可视化窗口为参照物

关于绝对元素的定位

left/right/top/bottom的默认值为auto

元素的层级

z-index: 值越大，层级越大

祖先元素层级不会覆盖住子代元素

图片字体：

字体库：icomoon

网址：https://icomoon.io/

将下载的压缩中的font文件保存在对应引入的css中出现的文件路径中。

注意：需要给图标所在的标签添加font-family

样式写入:

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n193" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?o6gjq1');
src: url('fonts/icomoon.eot?o6gjq1#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?o6gjq1') format('truetype'),
url('fonts/icomoon.woff?o6gjq1') format('woff'),
url('fonts/icomoon.svg?o6gjq1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n195" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@font-face{ //将服务器中的字体引用来使用
font-family:"自定义名称"；
src:url('字体路径')
}</pre>

用户界面

鼠标样式

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n198" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cursor:
pointer 小手
move 移动
not-allowed 禁止</pre>

防止拖拽文本框（text area）

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n200" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">设置一个属性：
textarea{
resize：none
}</pre>

CSS3

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n204" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> 图片模糊处理：filter:blur(5px) 数值越大模糊越严重
contenteditable 属性可编辑段落
calc函数：进行一些属性值的计算
例如：width：calc(100%-80px)</pre>

线性渐变

background-image:linear-gradient(to bottom,red,green) 红色向绿色过渡

默认从上往下：to bottom

to top /to left / to right

还可以表示：0 deg :表示旋转的度数后开始的渐变 1turn:表示旋转的圈数后的渐变可以有多个颜色值：background-image:linear-gradient(red,green,blue,yellow)

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">当颜色后面有值时，表示从什么地方开始渐变
background-image:linear-gradient(red 50px,yellow)</pre>

background-image:repeating-linear-gradient(red 50px,yellow 50px) //平铺的线性渐变

径向渐变

background-image:radialgradient(red,yellow) 红色在中间向外辐射

设置参数：background-image:radial-gradient(100px 100px red,yellow) 指定中心辐射半径大小，也可以写参数：circle和ellipse

设置中心辐射圆位置：

background-image:radial-gradient(at 100px 100px ,red,yellow)

过渡

与:hover搭配使用

transition :属性：

transition-property: width,height执行过渡的属性

transition-duration:2s 执行过渡的时间

transition-timing-function 过渡时序函数

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n224" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">属性值：ease默认值，效果：慢速开始，先加速，后减速
linear 效果：匀速过渡运动
ease-in 效果：慢速开始，持续加速
ease-out 效果快速开始，持续减速
ease-in-out 效果：先加速，后减速
指定时序函数： transition-timing-function:cubic-bezier(.17,.67,.83,.67)
https://cubic-bezier.com/ （网址）
steps(数字，start/end) ：分多少步完成,分配的时间开始执行或完成后执行</pre>

transition-delay: 延迟执行，等待一段时间后

使用transition可以表示所有属性，但是若写入延迟时间，则第一个时间为持续时间（transition-duration）

动画

自动触发动态属性

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n230" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">设置关键帧
@keyframes test{
from{ //开始状态

}
50%{
}

to{ //结束状态
}

}
在关键帧中通过写百分号的形式，确定在不同时间段里执行的效果</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n232" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-delay： y
animation-duration
animation-timing-function
animation-property
animation-iteration-count: 动画执行的次数
值：infinite :无限执行
animation-direction: 执行动画的方向

normal/reverse/alternate :从from 到to，重复执行时从to 到from返回
alternate-reverse:从to到from，重复执行时，反向返回
alternate和alternate-reverse增加了一种反复时的过程

animation-play-state: running/paused动画运行状态
animation-fill-mode:
none:默认值
forwards:动画执行完毕后停止在动画结束的位置
backwards:动画延时等待是，元素就处于from时的状态
both：结合forwards和backwards的状态</pre>

元素变形

transform:函数属性-> 变形不会影响元素的布局,不会改变其他元素的位置变化。

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n235" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">translateX()沿着x轴平移
translateY()沿着y轴
translateZ()沿着z轴
平移时使用百分数，是相对于自己的长/宽而言
translate3d(x,y,z)

rotateZ（90deg)或（0.25turn) : 绕z轴旋转

缩放：
scale(倍数)，scaleX(),scaleY()

</pre>

backface-visibility:hidden/visible 元素背面是否显示

transform-origin: 10px 10px;默认值为center 设置变形的原点

补充：给HTML添加属性

perspective:500px, 增加屏幕的可视距离(添加到被观察的父级身上)

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n240" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> transform-style:preserve-3d 保持3D空间，增加 3D效果加在父级上，效果在子级</pre>

less

less是一门css的预处理语言

vs中工具easy less

在.less中可以声明一个变量，用来存储任意值

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n245" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">语法：
@a:red a为任意变量名
用时：
background-color：@a

若变两为一个类时/作为部分引用：如：@b:box1 @c:images;
用时：
.@{b}{
url("@{c}/picture.jpg")
}

.box1{
width:100px;
height:$width //引用width的值
}

&符号：会锁定外层的父级元素

p2:extend（p1）对p1元素样式的扩展，给p2生成相同的样式
{
可以定义p2独有的样式
}</pre>

混合函数：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n247" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">.box1(参数){ //用来被引用，单独用不显示，可以写参数
width:参数
}</pre>

color:average(red,blue) 取这两个颜色的中间值

background-color:darken( 颜色，10%)//加深10%的颜色

补充：在less中数值可进行计算

通过import导入less文件，进行多个less文件的合并

flex 弹性盒布局

一种布局手段，使元素具有弹性让元素可以跟随页面大小而改变

弹性容器：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n255" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">display:flex //块级
display:inline-flex //行内元素不会独占一行</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n256" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">flex-direction:column （竖直排列）
row （默认值，自左向右）
row-reverse （自右向左）
colnun-reverse（自下向上）

</pre>

弹性元素的直接子元素是弹性元素

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n258" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">flex-grow: 1 默认值为0 弹性容器有空白时，元素的填充系数
指定元素的伸展的系数（当父元素有空间时）
弹性元素将按比例进行分配填充，

flex-shrink: 当父元素的容量不够时进行收缩系数
当值为0时：子元素就不会进行伸缩

flex-basis: 指定元素在主轴上的初始长度（会覆盖掉原始值）
默认值 auto 表示参考元素自身的高度或宽度
总结：
简写flex: grow shrink basis
或者：值： initial 对应得时：‘0 1 auto'
auto '1 1 auto'
none '0 0 auto'(弹性元素没有弹性)

order：number 数字越小，元素越靠近起始位置 </pre>

主轴：弹性元素伸缩的方向

辅轴：与主轴垂直的方向

flex-wrap: 设置弹性元素是否在弹性容器中是否自动换行

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n262" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">值：nowrap 默认值，元素不会自动换行
wrap 元素延辅轴方向自动换行
wrap-reverse 元素延辅轴反方向换行

</pre>

flex-flow: wrap和direction的简写方式

justify-content: 元素的位置分配

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n266" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">值： flex-start 对于元素
flex-end 对于元素
center 对于元素，整体居中对其
space-around 将空白平均分配到元素两侧（空白不会重叠） space-between :空白平均分配到元素之间
space-evenly 将空白分配到元素的一侧</pre>

align-item 弹性容器中元素在辅轴上的位置调节

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n268" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">值： stretch 默认值将元素的长度设置为相同的值
flex-start 元素在辅轴的位置，不会被拉伸，沿辅轴的起始边对齐
flex-end 元素在辅轴的位置，沿辅轴的终边对齐
center 元素居中对齐
baseline 沿基线对齐</pre>

align-content: 辅轴空白空间的分布

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n270" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">center :
flex-start
flex-end
space-around
space-between
</pre>

对于子项：

align-self: 辅轴，单独进行布局

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n273" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">值： stretch 默认值将元素的长度设置为相同的值
flex-start 元素在辅轴的位置，不会被拉伸，沿辅轴的起始边对齐
flex-end 元素在辅轴的位置，沿辅轴的终边对齐
center 元素居中对齐
baseline 沿基线对齐</pre>

order:定义排列的顺序，与z-index不一样

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n275" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">order:0 默认值
值越小，越靠前</pre>

媒体查询

响应式布局：

网页可以根据不同的设备或者窗口大小呈现出不同的效果

可以使一个网页适应于不同的设备

通过媒体查询，可以为不同的设备，或者不同的状态分别设置样式

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n282" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">媒体类型：
all 所有设备
print 打印设备
screen 有显示器的设备
speech 屏幕阅读器
在媒体类型前面可以写个only用来兼容一些老版本浏览器
用法：
@media only all{
body{

}}

媒体特性：
width: 可视口的宽度
height：可视口高度
min-width: 可视口的最小宽度
max-width: 可视口的最大宽度
min-width 与max-width 用and连接，表示同时满足
写法：
@media(width:px){
body{

}
}</pre>

知识积累

select 消失箭头

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n285" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">appearance: none;</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n286" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">document.querySelector('video').playbackRate=3
//视频播放的倍速</pre>

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n287" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">改变input 中placeholder的样式
input::placeholder{
co
}</pre>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342

HTML与CSS

HTML

meta标签

属性：

内联框架iframe

table表格

form表单

html5

video

audio

input新增type属性值

CSS

样式权重：

字体

选择器

复合选择器：

关系选择器：

属性选择器(css3)：

伪类

伪类选择器：

链接的伪类：

伪元素

颜色

文档流

盒子模型（box model)

水平布局

垂直布局

省略号三件套：

多行显示省略号

默认样式（浏览器）

盒子大小

轮廓和圆角,阴影

浮动

BFC(Block Formatting Context) 块级格式化环境

清除浮动

解决浮动塌陷和父子外边距重叠

定位

相对定位：relative

绝对定位：absolute

固定定位：fixed

粘滞定位 sticky(了解)

关于绝对元素的定位

元素的层级

图片字体：

用户界面

鼠标样式

防止拖拽文本框（text area）

CSS3

线性渐变

径向渐变

过渡

动画

元素变形

less

flex 弹性盒布局

弹性容器：

弹性元素的直接子元素是弹性元素

媒体查询

知识积累

推荐阅读更多精彩内容