什么是HTML、CSS
VSCode编辑器
HTML基本结构和属性
- HTML初始代码
- HTML注释
- 标题与段落
- 文本修饰标签
- 图片标签
- 路径的引入
- 链接标签
- 锚点
- 特殊字符
- 列表标签
- 表格标签
- 表单标签
- div和span
CSS基础语法
- CSS样式的引入方式
- CSS中的颜色表示法
CSS样式
- CSS背景样式
- CSS边框样式
- CSS文字样式
- CSS段落样式
- CSS复合样式：
CSS重点知识
- CSS选择器
- CSS继承
- CSS优先级
- CSS盒子模型
CSS小知识
- 标签分类
- 显示框类型
- 标签嵌套规范
- 溢出隐藏
- 透明度与手势
- 最大、最小宽高
- CSS默认样式
- PC端的布局
photoShop使用
css高级
- float浮动
- CSS 定位
HTML 与 XHTML(第四天)
- strong与b、em与i
- 引用标签
- iframe标签
- br 与 wbr
- pre 与 code
- map 与 area
- embed 与 object
- audio 与 video
- 文字注解
- link扩展学习
- meta扩展学习
- HTML5新的语义化标签
- 表格扩展学习
- 表单扩展学习
- BFC规范
第五天（3D效果）
- 浏览器前缀
- transition 过渡
- transform变形
- animation 动画
- animate.css
- 3D操作
- CSS3提供了扩展背景样式
- CSS3渐变
- 字体图标
第六天
- text-shadow:
- box-shadow：
- mask 遮罩
- box-reflect
- blur模糊
- calc计算
- 分栏布局
- 伪元素：
- CSS Hack分类
- IE低版本常见BUG
- 布局扩展

什么是HTML、CSS

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

如何看到网站的原始代码呢？

通过鼠标右键选择查看网页源代码。

VSCode编辑器

    ctrl + s : 保存ctrl + a : 全选ctrl + x、ctrl + c、ctrl + v : 剪切、复制、粘贴ctrl + z、ctrl + y : 撤销、前进shift + end : 从头选中一行shift + home : 从尾部选中一行shift + alt + ↓ : 快速复制一行alt + ↑或↓ : 快速移动一行tab : 向后缩进tab + shift : 向前缩进多光标 : alt + 鼠标左键ctrl + d : 选则相同元素的下一个

HTML基本结构和属性

HTML ： 超文本 标记 语言超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )标记 : <单词>语言 : 编程语言标记也叫做标签：<header><footer>写法分成两种：单标签   <header>双标签   <header></header>创建标签的快捷键：单词 + tab键 -> <单词>标签是可以上下排列，也可以组合嵌套。

HTML常见标签：http://www.html5star.com/manual/html5label-meaning/

HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
! + tab键 : 快速的创建html的初始代码

<!DOCTYPE html> 文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码
lang="en"表示是一个英文网站
lang="zh-CN"表示一个中文网站

<head> <meta charset="UTF-8">

元信息：是编写网页中的一些辅助信息
charset="UTF-8"国际编码，让网页不出现乱码的情况
<title>Document</title>
设置网页的标题
</head> <body> 显示网页内容的区域 </body> </html>

HTML注释

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

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

快捷添加注释与删除注释：1. ctrl + /2. shift + alt + a

标题与段落

标题 -> 双标签 : <h1></h1> ... <h6></h6>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。

h5、h6标签在网页中不经常使用。

段落 -> 双标签 :

文本修饰标签

强调 -> 双标签 : 、

区别：
1. 写法和展示效果是有区别的，一个加粗、一个斜体
2. strong的强调性更强，em的强调性稍弱。

下标 : <sub></sub>
上标 : <sup></sup>删除文本 : <del></del>
插入文本 : <ins></ins>

注：一般情况下，删除文本都是和插入文本配合使用的。

图片标签

img -> 单标签
src : 引入图片的地址。
alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小

路径的引入

    相对路径绝对路径

链接标签

a -> 双标签
href属性 : 链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank

base -> 单标签：作用就是改变链接的默认行为的。

锚点

两种做法
1. #号 + id属性
2. #号 + name属性（注意name属性加给的是a标签）

特殊字符

    1. & + 字符2. 解决冲突啊 左右尖括号、添加多个空格的实现3. &lt; &gt; &nbsp;

列表标签

无序列表 -> ul li 符合嵌套的规范
有序列表 -> ol li 一般用的比较少，可以用无序列表来实现
定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容

注：列表之间可以互相嵌套，形成多层级的列表。

表格标签

table、tr、th、td、caption 等

注：之前是有嵌套关系的，要符合嵌套规范。

语义化标签：tHead、tBody、tFood

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

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

表单标签

form、input、textarea、select、label …
input(单标签)标签有一个type属性，决定是什么控件。
还有一些常见的属性：
checked、disabled、name、for …

div和span

div : 做一个区域划分的块
span : 对文字进行修饰的内联

CSS基础语法

选择器 { 属性1 : 值1 ; 属性2 : 值2 }

width : 宽
height : 高
background-color : 背景色长度单位 : 1. px -> 像素2. % -> 百分比    外容器1 -> 600px  当前容器 50% -> 300px外容器2 -> 400px  当前容器 50% -> 200px

CSS样式的引入方式

1. 内联样式style属性
2. 内部样式style标签区别：内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理。
3. 外部样式引入一个单独的CSS文件，name.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )

CSS中的颜色表示法

1. 单词表示法 : red blue green yellow ...2. 十六进制表示法：#000000   #ffffff0 1 2 3 4 5 6 7 8 9 0 1 0 1 2 3 4 5 6 7 8 9 a b c d e f3. rgb三原色表示法：rgb(255,255,255);取值范围 0 ~ 255

获取颜色的工具：
提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

CSS样式

CSS背景样式

background-color 背景色
background-image 背景图url(背景地址)默认：会水平垂直都铺满背景图
background-repeat 平铺方式repeat-x   x轴平铺repeat-y   y轴平铺repeat ( x , y 都进行平铺，默认值 )no-repeat  都不平铺
background-position : 背景位置x y : number(px、%) | 单词x : left、center、righty : top、center、bottom
background-attachment : 背景图随滚动条移动的方式scroll : 默认值  ( 背景位置是按照当前元素进行偏移的 )fixed ( 背景位置是按照浏览器进行偏移的 )

CSS边框样式

border-style : 边框样式solid : 实线dashed : 虚线dotted : 点线
border-width : 边框大小px ...
border-color : 边框颜色red #f00 ...

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

CSS文字样式

font-family : 字体类型英文、中文衬线体、非衬线体注意点：1.多个字体类型的设置目的2.引号的添加的目的
font-size : 字体大小默认 : 16px写法 : number(px) | 单词 ( small large ... 不推荐使用)font-weight : 字体粗细模式： 正常( normal )   加粗 ( bold )写法：单词(normal、bold)   |  number ( 100 200 .....  900 , 100到500都是正常的，600都900都是加粗的 )  font-style : 字体样式模式： 正常 ( normal )   斜体 ( italic )写法：单词 (  normal 、 italic )注：oblique也是表示斜体，用的比较少，一般了解即可。区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

CSS段落样式

text-decoration：文本装饰下划线 : underline删除线 :line-through上划线 : overline不添加任何装饰 : none注：添加多个文本修饰：line-through underline overlinetext-transform：文本大小写 （ 针对英文段落 ）小写：lowercase大写：uppercase只针对首字母大写：capitalizetext-indent : 文本缩进首行缩进em单位：相对单位，1em永远都是跟字体大小相同text-align : 文本对齐方式对齐方式 : left 、right、center、justify（两端点对齐）line-height : 定义行高什么是行高，一行文字的高度，上边距和下边距的等价关系。默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。取值：1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )letter-spacing : 字之间的间距
word-spacing : 词之间的间距  ( 针对英文段落的 )英文和数字不自动折行的问题：1. word-break : break-all; (非常强烈的折行)2. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)

CSS复合样式：

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。

1. background : red url() repeat 0 0;2. border : 1px red solid;3. font :
注：最少要有两个值 size familyweight style size family  √style weight size family  √weight style size/line-height family √

注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

CSS重点知识

CSS选择器

1. ID选择器   #elem{}      id="elem"注：1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）3. 驼峰写法 : searchButton (小驼峰)  SearchButton (大驼峰)  searchSmallButton短线写法：search-small-button下划线写法：search_small_button2. CLASS选择器.elem{}      class="elem"注：1. class选择器是可以复用的。2. 可以添加多个class样式。3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。4. 标签+类的写法3. 标签选择器(TAG选择器)div{}          <div></div>使用的场景：1. 去掉某些标签的默认样式时2. 复杂的选择器中，如 层次选择器4. 群组选择器(分组选择器)可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。5. 通配选择器*{  } ->  div,ul,li,p,h1,h2....{}    注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。使用的场景：1. 去掉所有标签的默认样式时           6. 层次选择器后代  M N { }父子  M > N { }兄弟  M ~ N { }  当前M下面的所有兄弟N标签相邻  M + N { }  当前M下面相邻的N标签7. 属性选择器M[attr] {}    = : 完全匹配*= : 部分匹配^= : 起始匹配$= : 结束匹配[][][] : 组合匹配8. 伪类选择器M:伪类{}:link       访问前的样式    ( 只能添加给a标签 ):visited    访问后的样式    ( 只能添加给a标签 ):hover      鼠标移入时的样式  (可以添加给所有的标签):active     鼠标按下时的样式  (可以添加给所有的标签)注：一般的网站都只设置  a{}   ( link visited active )    a:hover{}:after、:before    通过伪类的方式给元素添加一段文本内容，使用content属性:checked、:disabled 、:focus 都是针对表单元素的   结构性伪类选择器nth-of-type()   nth-child()角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大first-of-typelast-of-typeonly-of-type nth-of-type()和nth-child()之间的区别type : 类型child : 孩子

CSS继承

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

CSS优先级

1. 相同样式优先级当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2. 内部样式与外部样式内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
3. 单一样式优先级style行间 > id > class > tag > * > 继承注：style行间 权重 1000id       权重 100class    权重 10tag      权重 1
4. !important提升样式优先级，非规范方式，不建议使用。( 不能针对继承的属性进行优先级的提升 )5. 标签+类与单类标签+类 > 单类 6. 群组优先级群组选择器与单一选择器的优先级相同，靠后写的优先级高。7. 层次优先级1. 权重比较ul li .box p input{}   1 + 1 + 10 + 1 + 1.hello span #elem{}    10 + 1 + 1002. 约分比较    ul li .box p input{}    li p input{}.hello span #elem{}      #elem{}

CSS盒子模型

组成 : content -> padding -> border -> margin物品        填充物     包装盒      盒子与盒子之间的间距content : 内容区域  width和height组成的padding : 内边距(内填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）单一样式只能写一个值：padding-leftpadding-rightpadding-toppadding-bottommargin : 外边距(外填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）单一样式只能写一个值：margin-leftmargin-rightmargin-topmargin-bottom注：1. 背景色填充到margin以内的区域 （不包括margin区域）    2. 文字在content区域添加。3. padding不能为负数，而margin可以为负数。box-sizing:盒尺寸，可以改变盒子模型的展示形态。默认值： content-box :  width、height -> contentborder-box : width、height -> content padding border使用的场景：    1. 不用再去计算一些值2. 解决一些100%的问题盒子模型的一些问题：1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。        扩展：1. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

CSS小知识

标签分类

按类型block : div、p、ul、li、h1 ...1. 独占一行2. 支持所有样式3. 不写宽的时候，跟父元素的宽相同4. 所占区域是一个矩形inline : span 、a、em、strong、img ...1. 挨在一起的2. 有些样式不支持，例如：width、height、margin、padding3. 不写宽的时候，宽度由内容决定4. 所占的区域不一定是矩形5. 内联标签之间会有空隙，原因：换行产生的inline-block : input、select ...1. 挨在一起，但是支持宽高注：布局一般用块标签，修饰文本一般用内联标签按内容Flow：流内容Metadata：元数据Sectioning：分区Heading：标题Phrasing：措辞Embedded：嵌入的Interactive：互动的（详情：https://www.w3.org/TR/html5/dom.html）按显示替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input ...非替换元素 : 将内容直接告诉浏览器，将其显示出来。div、h1、p ...

显示框类型

display: block inline inline-block none ...区别：
display:none   不占空间的隐藏
visibility: hidden 占空间的隐藏

标签嵌套规范

    ul、lidl、dt、ddtable、tr、td块能够嵌套内联<div><span></span><a href="#"></a></div> 块嵌套块<div><div></div></div>特殊：错误的写法：<p><div></div></p>内联是不能嵌套块错误的写法：<span><div></div></span>特殊：正确的写法：<a href="#"><div></div></a>

溢出隐藏

overflow : visible : 默认hiddenscrollautox轴、y轴overflow-x、overflow-y针对两个轴分别设置

透明度与手势

opacity : 0(透明) ~ 1(不透明)0.5(半透明)注：占空间、所有的子内容也会透明rgba() : 0 ~ 1注：可以让指定的样式透明，而不影响其他样式cursor : 手势default : 默认箭头要实现自定义手势：准备图片： .cur 、 .ico cursor : url(./img/cursor.ico),auto;

最大、最小宽高

min-width、min-height
max-width、max-height%单位：换算 -> 已父容器的大小进行换算的一个容器怎么适应屏幕的高 : 容器加height:100%;   body:100%;  html:100%;html,body{ height:100%;}.contrainer{ height:100%;}

CSS默认样式

没有默认样式的： div、span有默认样式的：body ->  marign : 8pxh1 ->  margin : 上下 21.440pxfont-weight : boldp  ->  margin : 上下 16pxul ->  margin : 上下 16px  padding : 左 40px默认点：list-style : disca ->   text-decoration: underline;css reset : *{ margin:0; padding:0;}优点：不用考虑哪些标签有默认的margin和padding缺点：稍微的影响性能body,p,h1,ul{ margin:0; padding:0;}ul{ list-style : none;}    a{ text-decoration: none; color:#999;}img{ dispaly:block}问题的现象：图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。vertical-align: baseline;  基线对齐方式，默认值img{ vertical-align:bottom;} 解决方式是推荐的写具体页面的时候或一个布局效果的时候：1. 写结构2. css重置样式3. 写具体样式

PC端的布局

通栏 : 自适应浏览器的宽度。
版心 : 固定一个宽度，并且让容器居中。

photoShop使用

组成：菜单项工具栏辅助面板

下载：
https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码: sc3v

快捷键：ctrl + r : 显示隐藏标尺在标尺上可以拖拽参考线可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线图层中的小眼睛可以对当前图层进行显示隐藏alt + 滚轮：可以对图片进行放大缩小png等图片的切图流程：1. 通过矩形选框工具，选择指定的区域微调：alt 减少区域  shift 增加区域   上下左右键进行微调利用参考线记录量取的位置，以便以后测量其他的值2. ctrl + c : 复制图层3. ctrl + n : 新建图层4. ctrl + v : 粘贴图层5. 存储为web格式        psd图片的切图流程：1. 启动生成器2. 图像资源3. 重命名图层，自动获取切图4. 可上传到线上，方便数据获取

css高级

float浮动

脱离文档流，延迟父容器靠左或靠右进行排列。

left、right、none

float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。

 如何清除浮动？上下排列：clear属性，表示清除浮动的，left、right、both嵌套排列：固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。设置空标签 : 不推荐 , 会多添加一个标签。after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。( clear属性只会操作块标签，对内联标签不起作用 )

CSS 定位

position : static（默认）relativeabsolutefixedstickyrelative：如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流不影响其他元素布局left、top、right、bottom是相对于当前元素自身进行偏移的absolute：使元素完全脱离文档流使内联元素支持宽高 （让内联具备块特性）使块元素默认宽根据内容决定（让块具备内联的特性）如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）fixed：使元素完全脱离文档流使内联元素支持宽高 （让内联具备块特性）使块元素默认宽根据内容决定（让块具备内联的特性）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响sticky黏性定位：在指定的位置，进行黏性操作。z-index定位层级。

HTML 与 XHTML(第四天)

  DOCTYPE文档及编码元素大小写 属性布尔值属性引号图片的alt属性单标签写法双标签闭合

strong与b、em与i

表现形态都是 文本加粗  和  文本斜体区别：是否具备语义化

引用标签

blockquote  :  引用大段的段落解释
q  :  引用小段的短语解释
abbr  :  缩写或首字母缩略词
address  :  引用文档地址信息
cite  :  引用著作的标题

iframe标签

可以引入其他的html到当前html中显示。主要是利用iframe的属性进行样式的调节。

br 与 wbr

br 就是换行、  wbr 就是软换行（在指定时机进行换行）

pre 与 code

针对网页中的程序代码的显示效果。

map 与 area

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

embed 与 object

给flash和一些插件进行渲染操作的标签。

audio 与 video

引入音频与视频的标签。属于H5的功能。

文字注解

ruby  、 rt 这样一个组合

link扩展学习

添加网址标题栏前的小图标：
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
DNS预解析：
<link rel="dns-prefetch" href="//static.360buyimg.com">

meta扩展学习

meta添加一些辅助信息。<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团购">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

HTML5新的语义化标签

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航注：header、footer、main 在一个网页中只能出现一次。article : 独立的内容
aside : 辅助信息的内容
section : 区域
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分   datalist : 选项列表
details / summary : 文档细节 / 文档标题
progress / meter : 定义进度条 / 定义度量范围
time : 定义日期或时间
mark : 带有记号的文本

表格扩展学习

添加单线 : border-collapse : collapse
隐藏空单元 : empty-cells : hide
斜线分类 : border / rotate
列分组 : colgroup  / col

表单扩展学习

美化表单控件：   1. label + :checked    2. position + opacity新的input控件email  :  电子邮件地址输入框url  :  网址输入框number  :  数值输入框range  :  滑动条date / month / week  :  日期控件  search  :  搜索框color  :  颜色控件tel  :  电话号码输入框  ( 在移动端会默认调起数字键盘 )time  :  时间控件表单属性：autocomplete  :  自动完成  默认 on  /  offautofocus  :  获取焦点required  :  不能为空pattern  :  正则验证method  :  数据传输方式enctype  :  数据传输类型name / value  :  数据的键值对扩展标签 :  fieldset  :  表单内元素分组 legend  :  为fieldset元素定义标题optgroup  :  定义选项组

BFC规范

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。触发的样式：float、display、position、overflow

第五天（3D效果）

浏览器前缀

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

transition 过渡

transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。

注：不要加到hover上。

transform变形

translate : 位移
translateX
translateY
translateZ ( 3d )

scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）scaleXscaleYscaleZ   (3d)

rotate : 旋转（旋转的值，单位是角度 deg ）
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )

skew : 斜切skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。skewY

transform的注意事项：
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素，但是不能添加给内联元素。
3. 复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)

animation 动画

animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式

注：1. 运动结束后，默认情况下会停留在起始位置。2. @keyframes :  from -> 0%   ,  to ->  100%animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效backwards  :  在延迟的情况下，让0%在延迟前生效forwards  :  在运动结束的之后，停到结束位置both  :  backwards和forwards同时生效animation-direction  :  属性定义是否应该轮流反向播放动画。alternate  :  一次正向(0%~100%)，一次反向(100%~0%)reverse : 永远都是反向 , 从100%~0%normal (默认值) : 永远都是正向 , 从0%~100%

animate.css

一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/

基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数

3D操作

transform:rotateX() : 正值向上翻转rotateY() : 正值向右翻转translateZ() : 正值向前，负值向后scaleZ() : 立体元素的厚度

3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。perspective-origin : 景深-基点位置，观察元素的角度。transform-origin: center center -50px;   （Z轴只能写数值，不能写单词）transform-style : 3D空间flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)backface-visibility : 背面隐藏hidden、visible (默认值)

CSS3提供了扩展背景样式

background-size : 背景图的尺寸大小cover : 覆盖contain : 包含
background-origin : 背景图的填充位置padding-box (默认)border-boxcontent-box
background-clip : 背景图的裁切方式padding-box border-box (默认) content-box 注：复合样式的时候，第一个是位置，第二个是裁切

CSS3渐变

1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。2. 径向渐变 -> radial-gradient

字体图标

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

  好处：1.可以非常方便的改变大小和颜色font-size    color2.放大后不会失真3.减少请求次数和提高加载速度4.简化网页布局5.减少设计师和前端工程师的工作量6.可使用计算机没有提供的字体

使用：
@font-face语法

像.woff等文件都是做兼容平台处理的, mac、linux等。

第六天

text-shadow:

文字的阴影
x y blur color

注：阴影的默认颜色是跟文字样色相同
注：通过逗号的方式进行分割，可以设置多阴影

box-shadow：

x
y
blur
spread
color
inset
多阴影

注：盒子阴影的默认样色是黑色。
注：默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影。

mask 遮罩

url
repeat
x
y
w
h
多遮罩

注：mask目前还没有标准化，所以需要添加浏览器前缀。

注：默认是x、y都平铺。

box-reflect

above   上
below   下
left    左
right   右
距离
遮罩 | 渐变

渐变：只是针对透明度的渐变，不能支持颜色的渐变。

blur模糊

    filter : blur()

calc计算

    四则运算

分栏布局

  column-count : 分栏的个数column-width : 分栏的宽度 column-gap : 分栏的间距   column-rule : 分栏的边线column-span : 合并分栏注：column-width和column-count不要一起去设置。

伪元素：

    伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。:: selection:: first-line   /    first-letter:: before     /     after …

CSS Hack分类

1. CSS属性前缀法.elem{ _background:red; }2. 选择器前缀法*html .elem{ }3. IE条件注释法IE10以上已经不支持注释法

IE低版本常见BUG

1. 透明度
2. 双边距
3. 最小高度
4. 图片边框

布局扩展

1. 等高布局利用margin-bottom负值与padding-bottom配合实现。2. 三列布局，左右固定，中间自适应1. BFC方式 2. 定位3. 浮动 ( 双飞翼布局、圣杯布局 )margin负值4. flex弹性

HTML+CSS简单复习相关推荐

小蓝同学的前端之旅--HTML\CSS集成复习
小蓝同学的前端之旅--HTML\CSS集成复习前端学习路线复习模式 api的重要性 HTML基础总结 head标签的常用标签 body标签中常用标签文本元素标签表格标签表格分组框架表单 ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
用HTML+CSS简单做了张简历表格
这里写自定义目录标题用HTML+CSS简单做了张简历表格效果图: 代码块: 用HTML+CSS简单做了张简历表格效果图: 代码块: <!DOCTYPE html> <html& ...
HTML+css简单实现手机邮箱导航网页
HTML+css简单实现手机邮箱导航网页前言基本完成了手机邮箱导航的样式,是很经典的一个试验. 一.邮箱网页代码 <!DOCTYPE html> <html lang=&qu ...
墨者学院—Webmin未经身份验证的远程代码执行（简单复习）
墨者学院-Webmin未经身份验证的远程代码执行(简单复习) 背景描述: Webmin是目前功能最强大的基于Web的Unix系统管理工具.管理员通过浏览器访问Webmin的各种管理功能并完成相应的管理 ...
calc()：css简单的数学运算–加减乘除
calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); ...
如何使用CSS简单的制作一个视频网站
如何使用CSS简单的制作一个视频网站 1.主页的设置 <!DOCTYPE html><html lang="en"><head> <met ...

HTML+CSS简单复习

目录