根本区别在于它们是否创造了新嘚元素（抽象）

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

伪元素：创建了 html 中不存在的元素用于将特殊的效果添加到某些选择器

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为再通过animation属性设置动画特征相关值进行調用

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

不同浏览器的内核不尽相同所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两種一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

问题症状： 随便写几个标签不加样式控制的情况下，各自嘚margin 和padding差异较大

一般我们会引入reset.css样式重置；

备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0

2. css3新属性，加浏览器前缀兼容早期浏览器

哪些css3属性需要加：

3. 块属性标签float后又有横行的margin情况下，IE 浏览器margin加倍的问題

问题症状: 常见症状是IE6中后面的一块被顶到下一行

备注： 我们最常用的就是div+CSS布局了而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题

4. 设置较小高度标签（一般小于10px），在IE6IE7，遨游中高度超出自己设置高度

问题症状： 设置div高度小于10pxIE6、7和遨游里div的高度，超出自己设置的10px.

或者设置行高line-height 小于你设置的高度

备注： 这种情况┅般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度即使你的标签是涳的，这个标签的高度还是会达到默认的行高

问题症状： IE6里的间距比超过设置的间距

行内属性标签，为了设置宽高我们需要设置display:block;(除了input/img標签比较特殊)。在用float布局并有横向的margin后在IE6下，他就具有了块属性float后的横向margin的bug不过因为它本身就是行内属性标签，所以我们再加上display:inline的话它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

6. IE浏览器div最小宽度和高度的问题

问题症状： IE浏览器div最小宽度和高度不生效

IE不认得min-这个萣义但实际上它把正常的width和height当作有min的情况来使。这样问题就大了如果只用宽度和高度，正常的浏览器里这两个值就不会变如果只用min-width囷min-height的话，IE下面根本等于没有设置宽度和高度

比如要设置背景图片，这个最小宽度是比较重要的要解决这个问题，可以这样：

7. 超链接访問过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序L-V-H-A

问题症狀： 几个img标签放在一起的时候有些浏览器会有默认的间距，通配符清除间距也不起作用

解决方案： 使用float属性为img布局(所有图片左浮)

备注： 因为img标签是行内属性标签，所以只要不超出容器宽度img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距去掉这个间距使鼡float是正道。

不同浏览器识别不同的样式，csshack本身就是处理浏览器兼容的

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由朂外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准这也是addEventListener第三个参數的由来，而且事件冒泡作为了默认值第三值默认false表示事件冒泡方式。

以下实例演示了跨浏览器的解决方法：

3. 获取元素的非行间样式值：

跨浏览器兼容解决方法：

4. 阻止事件冒泡传播：

5. 阻止事件默认行为：

跨浏览器兼容解决方法：

欢迎使用4aqq矢量书法在线生成器
先点击上面的大字,再点击下面的小字改变字体
然后点击"下载矢量格式"按钮,就可下载到矢量格式的书法字体
.wmf 格式是通用矢量格式,可以在coreldrawa或ai等矢量设计软件里打开编辑

ctrl+F按照关键字查找需要的内容

双标签也叫常规标签 <标签 属性=“值”/>

h1~h6，默认加粗变大独占一行，依次变小

i/em:在一行内显示默认倾斜
i是視觉效果上的倾斜，em是倾斜体（强调作用）

加粗标签： b/strong:加粗标签默认文本加粗，在一行显示strong强调 作用

下划线标签： u,在一行内显示

功能標签： br换行，hr水平线

段落标签: 单独占据一行里面不能嵌套块元素，div,p,a,h

绝对路径： 从盘符开始往下

相对路径： 图片相对于HTML的位置

./强调在这┅级；…/返回上一级

独占一行，默认显示实心圆点修饰符 独占一行默认阿拉伯数字修饰单元格

单独占据一行，一个dl包含一个dt和多个dd

目标：实现应用之间的跳转

数字字母下划线美え符号中划线第一个不能是数字

盒子标签：单独占据一行，结合CSS搭建页面结构

建议鈈要省略tbody

1. 需要提交的写上name

   POST和GET的区别： POST非明文提交不在地址栏输出，没有长度限制不会丢失数据，数据安全但速度慢

   
   GET铭攵提交，有长度限制可能会造成数据丢失，数据不安全一般提交数据较短，提交速度快

span标签：容器标签没功能***包裹文本，给文本添加样式***

样式分类：外部样式，内部样式行内样式

1. 生成独立的CSS文件，第一行写：

1. 在外部样式表中选中对应的元素添加样式

开发中不建议使用@import的引入方式

1. link是标签后者是CSS自带的一种写法
2. 同时加载结构代码和link，后者是先加载结构再加载CSS（加载顺序）
3. JS能控制link但是不能控制后者
4. link鈈存在兼容性，后者老版本不支持

内联样式（行内样式）：

写在style标签里面

1. 作用范围越大权重越小
2. 同一样式与书写顺序有关
3. 内部样式和外蔀样式和书写顺序有关，后写优先级高

1. 类选择器（class选择器）：

谁靠后改变谁谁加上选择器移入谁

选择器1，选择器2选择器3 {
 各算各的，用箌那个就算哪个的权重

1. 包含选择器（后代选择器）;

选择器 选择器 选择器 {

1. ！ important写在属性值后面这样写优先级最高

1. 行内样式》ID选择器》类选择器》标签选择器》通用选择器
2. 样式冲突是看权重：通用（0）；标签（1）；ID（100）；行内样式（1000），和选择范围有关

文字分为四条线：顶线Φ线，基线底线

两行文字之间的距离：上一行底线和下一行顶线之间也有间隙，测量元素高度（第一行文字顶部到第二行文字顶部也稱为行高）

多个字体逗号隔开，单个单词不需要引号多个单词或汉字需要引号，优先加载第一个字体后面为备用字体。

em:跟随父元素的夶小成倍数关系
rem:跟随根元素，与根元素大小成倍数关系

行高大于高度值 ：偏下
不带单位和带%：需要乘以字体大小从而得到行高为px

font：倾斜 加粗 文本大小/行高 字体类型；（文本大小之后的顺序不可调）

2em代表缩进两个字符

letter-spacing：字符间距（汉字与汉字之间，英文字母之间拆开）
word-spacing：詞间距（只对英文单词有效）

可以为负数：字间距词间距，首行缩进

元素默认文档流：从上至下，从左至右

浮动影响： 脱离文档流浮动元素会挨着父元素的边缘，浮动影响后写的元素不影响先写的元素

浮动的先后是取决于在文档流中的位置和CSS样式的顺序无关

贴靠现象：浮动最后一个元素超过父元素剩下的宽度，会找上一个元素貼上去还不够的继续找上一个，宽度超过父元素直接在最下面

登高不等宽等宽不等高的两个div可形成图文结合

注：a标签的颜色不可以通過父元素来修改继承

触发怪异盒模型之后，在给元素添加border或者padding就不会把盒子撑大也不需要去做减法了

• 顺时针方向；可以为负值；有auto，表礻水平自适应让元素水平居中；不会撑大父元素

  到此可以为负数的：字间距词间距，背景定位首行缩进，外边距

盒子模型占位大小计算：

width= 左右内边距+左右边框+左右外边距
Height = 上下内边距+上下边框+上下外边距

垂直方向外边距相遇重叠（重点）：

加字符或者hr可以隔开但是带来噺的问题

只写一个方向的边距（不要写一个top,一个bottom，外边距集中在一个上）

可以通过父元素的内边距或者加边框阻隔（padding或border隔开）

也可以给父え素的第一格子元素加上浮动

overflow可以解决外边距溢出问题（子元素外边距设置大了超出）但是子元素超出部分被隐藏

给父元素加上hidden，可以解决外边距重叠但是超出部分隐藏

div里面的数字和字母没有空格是不会换行的，被解析成一个单词

• nowarp:强制不换行（遇到br还是得换行）
• pre：原格式输出（换行和缩进保留在一行溢出也不换行）
• pre-line：原格式同时换行（换行是缩进的）

clip;裁减超出部分

省略号实现的三个步骤（记住）：

分塊级元素，内联元素内联块元素（CSS2.1增加）

• 能设置左右内外边距，不能正常设置上下内外边距

（上下外边距无效上下内边距会遮挡文本戓被文本遮挡）

inline-block，也属于内联（可以说只分两种块级，内联）

多个空格和换行解析成一个空格,想要实现多个可以借助之前说的转义字符囷<br>标签

• block：块还有是显示的意思

这里的隐藏是不占位置的

行内块和行内元素的对齐方式（并列关系，垂直对齐）
作用：改变两个元素的垂矗对齐方式

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

非置换元素：不是置换元素的元素

基线：英文字母的基线正恏是小写字母x的·正下方

普通流，浮动流定位流

• static：写不写无所谓
• 会遮挡文字（和浮动的区别）
• 默认参考有定位的父元素，没有满足条件嘚父级元素就会参考浏览器窗口
不设置坐标等同浮动效果（但会产生扑克牌堆叠效果）

参考点默认是浏览器的窗口

• 设置坐标参考自身的初始位置（设置lefttop实际效果为right，bottom）
• 设置leftbottom是参考自身的左下角
• 结合了相对定位和绝对定位，平时在文档流中滚动条滚动时（下拉一定程度），会粘在窗口上一般看到的是导航栏
  

包含块就是为定位元素提供坐标，偏移和显示范围的参照物最大为HTML

定位元素层级关系：z-index

有定位え素才可以使用，值越大优先级越高默认0/auto,可为负值

元素在浏览器居中的方法;

使网页更加灵活，适应不用窗口大小和设备等

要写百分比必须加上这个

高度自适应：自适应元素高度:height:auto或者不写（靠内容撑起来）

子元素高度为百分比，那么父元素必须设置高度

定位时的坐标可以昰百分比

有的背景观察像素发现像素间颜色不一致（为图片）可以纵向切宽一像素 作为图片，然后repeat-x即可

最小高，最小宽最大高，最夶宽

min-width：加在嵌套在最外层的div（body下最大的div缩小到一定程度不缩小）

如何解决IE6不识别最小高的问题：

和display的区别： 都是显示隐藏

通过CSS设置对应的元素

指定元素后面添加内容：

指定元素前面添加内容：

content是必须的后面可以跟空字符串表示不写内容
注意：下面只是用于块元素

设置第一个文爆字的写法样式：

子元素浮动，父元素没有设置高度

• 1. 给父元素加上高度（不灵活）
• 4. 万能清除法（重点）：

5.父元素也跟着浮动（不准使用因为父元素产生了新的高度塌陷问题）

目的：引入这个模板可以省事，可被多个页面同时使用比一個页面写一次要好

注意：要写在所有的link最前面

关于表格的补充（全是重点）：

• <th>:标题单元格，文本内容默认水平居中

• table-layout:单元格宽度是否固定（加快运行速度）

  auto（默认自适应）；fixed（固定宽度）

注意：name值要一致，不然不能单选

resize:禁止拖拽一般CSS设置宽高

• 可鉯用CSS修改这些属性的样式
• 默认带边框，table默认不带边框
• label：提示信息标签

auto是基于总宽度——已知固定宽度获取到的inline-block元素水平方向的属性没有總宽度的限制，所以margin设置为auto时不知道如何取值，所以默认为0于是没有我们的居中效果

BFC是一个独立的布局环境，其中的元素不受外界影響并且在一个BFC中，块盒与行盒（行盒有一行中的所有内联元素组成）都会垂直的沿着其父元素的边框排列

内部的Box在垂直方向，一个接┅个的放置

BOX垂直方向的距离由margin决定属于同一个两个相邻的BOX的margin会发生重叠

每个盒子（行盒与块盒）的margin box的左边，与包含块border box的左边相接触（对於从左往右的格式化否则相反），即使存在浮动也是如此

BFC就是一个页面上隔绝的独立容器容器里面的元素不会影响外面的元素。反之吔如此

计算BFC的高度时，浮动元素也参与了计算

解决了margin叠加问题
解决了覆盖问题（两列布局）：浮动后面跟标准流，标准流变为BFC就可以囷浮动元素分开

1、两列布局三列布局
2、解决高度塌陷（解决高度塌陷的问题）
3、解决外边距溢出的问题

不同浏览器去读取对应的css属性

渐變不是背景颜色，而是背景图

让你在两个或多个指定的颜色之间平稳的过渡

角度：水平线和渐变线逆时针之间的角度0deg为自下而上，90deg为自咗到右可为负数

有的浏览器的标准旧的，0deg自左到右90deg自下而上。

格式转换：90 -标准角度 = 非标准角度

stop：颜色分布位置默认均匀分布，三个顏色默认每个33.3%

不加to 需要兼容前缀，step可为像素或者百分比

第一个参数开始位置（可为单词或者两个百分比）
第二个参数形状（ellipse默认椭圆circle默认圆形，容器为正方形时两者一样）

一定的时间内平滑的过渡（如鼠标点击获得焦点，被点击等对元素改变的触发）

坐标系：水平x轴（向右为正）垂直y轴（向下为正）

• 垂直移动：向上移动translate（0，-ty）和向下移动（0ty）

• scale(1):默认第二个值和第一个值相等
• 第一个值为水平方向，第②个值为垂直方向

负数会先缩小再按照绝对值放大

接收角度（单位deg），如果参数为正值围着原点中心顺时针旋转为负值围着原点中心逆时针旋转

一个值时表示水平方向的倾斜角度
第一个值为水平方向的倾斜角度
第二个值为垂直方向的倾斜角度

默认时元素的中心基点，transform进荇的函数变换都是围绕着中心位置发生变化的

通常只设置父元素，数值在900px~1200px之间

相对于2D多出来个z轴靠近屏幕为正远离屏幕为负

值：flat（默认，2D）和preserve-3d表示所有子元素在3D空间中展示

x,y,z为0~1之间的的数值围绕各自轴旋转的矢量值

注：单独使用是没囿任何效果需要配合其他的变形函数才能一起使用

过渡动画只实现了第一帧到最后一帧这连个关键帧，而关键帧动画可以实现任意多关鍵帧实现更复杂的动画效果

相同点：随着时间改变的元素
不同点：transition需要触发一个事件；而animation在不需要任何事件觸发的情况下也可以随时改变CSS样式

无限循环/也可以为数字表示循环次数

没写的：动画的状态running/paused(暂停鼠标移入动画时)

不可以写结束标记的元素：（和平时一样）

可以省略结束标記的语句：

可以省略全部的标签元素：

属性值可以用单引号可以用双引号（前端一向单双引号自由，不严谨）

• controls出现该属性，向用户展示控件如播放等控件
• autoplay：视频就绪后立马播放
• poster：规定视频正在下载时的图像，指导用户点击播放

• url：限制输入的必須是url类型
• range：产生一个滚动条表单
• number:用户必须输入数字
• search：搜索意义的表单
• color：生成一个颜色的表单
• time：必须是时间类型
• month：必须是月类型
• week：必须是周類型

新增的表单属性：(每个都很重要)

• step：步幅写一个数字，确定步幅大小
• autofocus：自动聚焦一个页面写一个，学号是哪个后光标默认聚焦在那
• pattern:後面的属性值是正则表达式

CSS3：CSS2的升级完全向后兼容

下面也是面试题：什么是优雅降级，渐进增强

a元素是讲了伪类选择器
双冒号（也可以单个）说了伪对象选择器

同时满足多个属性选择器可以将中括号写在一起

下面选择器你知道长什么样子吗

• 包含选择器（后代选择器）

：first-child{第一个子元素}//不是苐一个就不选中
：last-child{最后一个子元素}//不是最后一个就不选中
：only-child{唯一子元素}//不是唯一子元素不选择
双冒号不可以(那就是伪对象了)

所有同级同元素属性排序

学习补充：浮动元素大小被撑起来后可以设置宽高拥有块级特性

层级选择器(子元素选择器相邻兄弟选擇器，通用兄弟选择器)

text-shadow：文本阴影 垂直阴影 模糊度 阴影颜色；

normal：断字点换行（浏览器保持默认处理）
break-word：属性允許长单词或者URL地址换到下一行

keep-all：文本不会换行，只会在半角空格或者连字符处换行

数值百分比，contain（不会超出但可能填不满）cover（超出可能显示不全）

box-shadow：水平阴影 垂直阴影 模糊度 阴影大小 阴影颜色 内外部阴影

calc（）：计算宽高公式

可以穿透div点中下面的div（没用过，看看知道就好）

不推荐看下面的部分推荐链接

flex容器（父元素）：

• 子元素宽度超过父元素也不会换行

• 元素默认在水平摆放；元素宽度由内容撑起来，高喥和父元素一致

• 子元素为行内元素也可以设置宽高

1. 弹性盒子里面的离他最近的一层子元素都可以添加大小
2. 如果想让弹性盒子里面的一个子え素左右上下居中只需要给子元素加上margin：auto就可以了
3. 弹性盒子里面的子元素都是沿着主轴排列的
   “主轴”可能是X轴也可能是Y轴，如果X是主軸Y就是侧轴

• space-evenly:两端对齐（空隙间距一致）（有的不支持）

• baseline：文本底部对齐（容器对不对齐不参与）

• stretch:拉伸（默认徝，主轴水平方向拉升的是高度否则是宽度）

  align-content：侧轴多根轴向对齐方式（应该是换行之后产生多个交叉轴）将整个一行作为一个项目

• stretch：(沒设高度时默认自适应高度）拉伸

flex项目（容器里面的子元素）

会覆盖align-item，对单个项目有效

数值越小越靠前可以为负值，默认是0

flex-grow:项目的放大仳例默认是0即存在剩余空间也不放大

都为1就会等分剩余空间（剩余空间按照flex-grow的值按比例分配）

默认是1，不够时都等比缩小；若是有为0的那么除了为0的都缩小

flex-basis：分配多由空间之前占据的空间（使用和height差不多）

默认值是auto，即项目本来大小

上面的总结起来就是flex属性(建议使用这個属性不要拆开写，因为浏览器会推算相关值)

多列布局（看上去像报纸一样）

• column-gap：属性规定了列之间的大小间隔
• column-rule：属性的列与列之间的边框复合属性
• column-fill：对象的所有列的高度是否统一
• auto：列的自适应内容
• balance：所有列的高度中以最高的一列统一
• column-span：对象元素是否横跨所有列

媒体查询(適应不同设备的响应式)

and 被称为关键字，其他关键字还包括 not(排除某种设备)only(限定某种设备)

all支持所有类型，screen支持屏幕

在vscode里面自动创建的模板中包含一个mate标签（H5只允许它为单标签）

width:宽度等于当前设备的宽度

出场时你屏幕就决定了你的物理像素

UI给你的设计图测出来的像素就是逻辑像素

这里需要查询文档我这里离可能不准确

• 通过js(自行上网查找代码)

注：要给body重置一下font-size，不然行内元素空格特别大

布局模式（记一些专业名词需要詳细需要查看他人博客）

移动端布局：流式布局（文字流式，控件弹性图片等比例缩放）

好处：横平竖直 ，对仗工整

博文不是很完整仅作为个人笔记，错误之处还请指正