Html和Css3

文本标签

加粗 strong

倾斜 em

删除线 del

下划线 ins 

相对路径

同一级 直接写 还有另外一个写法 ./ 相当于 直接写
下一级 /图片名字 或者 /图片文件夹
上一级 …/
绝对路径
本地的绝对路径

绝对路径的移植性不好

互联网上的绝对路径

外部链接

a href = 是一个必填项 http://
target

_self 在原窗口自身打开
_blank 在新窗口中打开

内部链接

href = ‘本地的地址’ 不需要带任何
href的地址跟src的路径使用方式一致
如果没有开发完成我们可以优先使用一个#来代替整个网页

转意字符

  空格

< 左箭头

> 右箭头

表单控件

input
type 类型

text 文本
password 密码框
radio 单选
checkbox 复选
reset 重置 （form表单里面）
submit 提交（form表单里面）
button 普通按钮（配合js来使用）
file 上传文件

value 内容
在text、password 给与一个默认值
在raido、checkbox 告诉后端传过来每一项是什么意思

maxlength 最大长度
限制表单的输入长度

placeholder 占位符
默认显示的内容 html5标准的
比value更加人性化

checked 默认选中
checked = “checked”
checked

文字粗细

font-weight

数字：100-900 常用400-700

单词：400 normal 700 bold

字体倾斜

font-style

normal 正常

italic 倾斜

模式转换

转换为块级 display：block 常用把a标签转换为其他，因为具备手型和跳转的功能
转换为行内 display：inline
转换为行内块 display：inline-block

背景图片

background-image：url()

背景图片 用于 超大图片、超小图片
图片标签 用于 普通图片 产品图片

图片和背景图最大的区别
**

img标签 占据了位置
背景图 不占据位置的，他也不会主动撑开元素

**

背景定位

background-position : 单词、数字
left、right、top、bottom
单词可以控制背景图在整个盒子的9个方向
数字 可以更加灵活控制背景图的位置（任何位置）
盒子的左上角就是坐标中心，也可以看做x、y轴 0 、0 位置
X 越大 越往右侧走 负值反之
Y越大 越往下走 负值反之

/* 数字可以结合方位名称一起使用 */

背景固定

background-attachment
scoll 背景随着滚动条滚动
fixed 背景固定
css三大特性-层叠性
就近原则（谁在下面谁做主，上面的属性被层叠掉了）
css三大特性-继承性
达到简化css的作用
跟文字有关系的属性（color、text-、font-、line-）
css三大特性-优先级
通配符和继承 0 0 0 0
标签选择器 0 0 0 1
类、伪类 0 0 1 0
id 0 1 0 0
行内样式 1 0 0 0
!important 无穷大

注意

1.继承过来的权重永远0
2.权重可以叠加，但是不能够进位
3.a标签比较特殊
/* a标签本身是拥有属性， *

特殊情况

继承过来的。a标签系统默认的比继承过来的大 */

/* *所有元素。*通配符 要比系统默认的大 */

内边距

padding：宽度
/* padding: 如果你这里只写1个值，代表了4个方向 /
/ padding: 如果你这里只写2个值，第一个值是上下、第二个值是左右 /
/ padding: 如果你这里只写3个值，第一个值是上、第二个值是左右、第三个值是下 /
/ padding: 如果你这里只写4个值，分别代表上右下左 */

边框和内边距 的大小都会影响到盒子真实（最终）的大小。所以在写代码的时候，一定要注意，测量盒子的方法。（要不就别量边框、要不就要减去边框）
如果当前没有width ，但是写了padding**。不会撑开盒子**
默认width就是100%。但是他会自动减去padding的值，达到盒子不被撑大的效果

外边距

argin 处理盒子与盒子之间的距离
使用方法跟padding基本一致
/* margin: 如果你这里只写1个值，代表了4个方向 /
/ margin: 如果你这里只写2个值，第一个值是上下、第二个值是左右 /
/ margin: 如果你这里只写3个值，第一个值是上、第二个值是左右、第三个值是下 /
/ margin: 如果你这里只写4个值，分别代表上右下左 */

外边框的特殊情况（外边距塌陷问题）
两个元素上下结构 两个都有外边距的话，取较大的这一个值
2.父子结构元素，内层元素拥有margin-top的时候，会带动父盒子一起往下

浮动特点

1.浮动是脱标的
2.浮动不占据位置
3.浮动是按照顶部对齐，跟高度没关系
4.如果浮动元素一行放不下了，会自动落到第二行上
5.浮动的元素，无论之前是块级还是行内，只要加了浮动属性之后，就具备了行内块的特点 能够设置宽高、宽度默认内容撑开
清除浮动
因为咱们浮动非常好的好用，只要是一排显示的内容，都给他加上浮动即可。
但是会造成一些问题。

里面盒子浮动后，会脱离标准流，那么父级标准流的盒子认为，里面一楼已经没有内容了，所以高度变为0。导致影响后面的元素

第一种方式 ：隔墙法
在浮动元素的内部最后加一个标签（块级标签） clear:both;

第二种方式：overflow：hidden
找到浮动元素的父级加上overflow：hidden 属性即可

第三种方式：单伪元素 ：after的方式   clearfix  伪元素清除浮动方式（原理就是在模拟第一种方式）
在浮动元素的父级身上，加上clearfix的代码。
::after{
clear:both;
display:block;
}

第四种方式：双伪元素：
在浮动元素的父级身上，加上clearfix（双伪元素）的代码。

盒子阴影 box-shadow

X 轴位置 px 必填
Y 轴位置 px 必填
模糊
尺寸
颜色
内外 默认 outset inset内阴影

文字阴影 text-shadow

X 轴位置 px 必填
Y 轴位置 px 必填
模糊
颜色

图片格式

jpg 颜色丰富
gif 动图
png 带透明背景的图片
psd 量取图片和位置的大小

定位

作用：
1.让一个元素压在另一个元素的上面
2.让元素固定在浏览器的某一个位置
属性position
定位 = 定位模式 + 边偏移
定位模式和边偏移一定要一起使用，哪怕是只使用了定位模式也达到了想要的效果。

理解：将盒子定在某一个位置，像浮动一样，但是没有浮动的限制，你想要如何摆就如何摆，非常的自由
定位模式4种
静态定位 static 了解 标准流
相对定位 relative
绝对定位 absolute
固定定位 fixed
边偏移4个值
left
right
top
bottom
在使用边偏移的时候，一般情况下，都只会使用其中的2个值
比如 使用了left就不会再使用right、使用了top，就不会使用bottom
相对定位

定对于自身移动
特点：
1.相对自身原来的位置定位
2.不脱离标准流的

绝对定位
特点：

绝对定位不占据位置 会脱离标准流

没有定位的父级元素以浏览器本身为标准。 right 0 top:0

有定位的父级元素以有定位的父级元素为标准，起到了限制里面绝对定位盒子的

子绝父相
父相 占据位置，给页面布局的，可以限制子绝的一个位置
子绝 不占据位置，自绝的元素可以摆放到任意位置，而且没有什么后顾之忧（子绝是压在父相的上面）

固定定位
特点
固定定位不占据位置
固定位置是以浏览器可视窗口的为标准显示

总结

定位方式 是否占据位置（是否脱标） 以什么为标准 静态定位
不脱标（占据位置） 不存在 相对定位
不脱标（占据位置） 以自身为标准 绝对定位
脱标（不占据位置） 1.有最近定位父级 以当前父元素为标准
2.没有最近定位父级 以浏览器窗口标准 固定定位
脱标（不占据位置） 以浏览器可视窗口为标准 黏性定位
不脱标（占据位置） 以浏览器可视窗口为标准

display 可以隐藏元素

转为块级、转为行内、转为行内块

隐藏 display:none;

显示 display:block;

visibility 可以隐藏元素

共同点都可以隐藏元素

display:none;

visibility:hidden;

不同点

display:none;  不占据位置

visibility:hidden; 占据了位置

overflow

两个其他的特性：

1.解决盒子塌陷问题

2.解决浮动带来的问题

本质自己 溢出隐藏

visible 正常显示

hidden 溢出隐藏

scroll    总是显示滚动条

auto     当内容超出当前盒子的时候，显示滚动条

让盒子超出父盒子

1. 定位
2. margin 负值

精灵图

把所有的小图片，全部放到一张大图上，减少了服务器的减轻次数

精灵图原理

准备精灵图，放页面上的小图标。

background-position

坐标轴的方向 ，x 右是正方形

字体图标本质是一个文字

精灵图本质是图片

简单的图表的时候，可以优先看一下是否存在字体图标

复杂图片依然使用图片

字体图标，轻量

可以去用css来美化我们字体图标 大小、颜色、透明、css3属性、

无论字体图标变成多大，都不会失真

字体图标采用阿里巴巴矢量图

步骤

1.下载字体包

1.1 百度打开阿里巴巴矢量图，进入到官网

1.2 注册新浪微博的帐号、github的帐号来登录阿里巴巴矢量图网站

1.3选择你需要的图标，加入购物车（免费）

1.4点击右上角的购物车，点击下载至本地

查看

2.解压至项目，打开demo_index.html文件来查看他的提示案例

2.1.选择demo里面的第二种类型 font class（最简单，步骤最少）

使用

3.1创建自己的项目

3.2 引入字体图标的css ，但是要注意修改路径。98%的错误都出现在路径上。

<link rel="stylesheet" href="./iconfont.css">

3.3 复制使用的代码

<span class="iconfont icon-xxx"></span>

3.4 选择你需要的图标，然后拿里面的类名替换里面XXX 打开页面即可

鼠标的样式

cursor

去掉表单聚焦后的黑边

outline：none、0

去掉文本域的拖拽

resize ： none

对齐方式

vertical-align

让行内块元素

语义化

特点：

1.语义化标签更针对的是搜索引擎

2.语义化标签，可以多次使用 footer

3.ie9 把语义化标签变成块级、更偏向移动端

视频

video

src 路径   想用多个视频标签（怕有兼容性问题的时候，可以使用）source 能够引入多次视频。 mp4格式

autoplay 自动播放

controls 播放控件

loop 循环播放

muted 静音

poster 默认显示的图片

width

height

音频

audio

src 路径，主要支持的是mp3格式

autoplay 自动播放

controls 播放控件

loop 循环播放

html5 新表单类型type

number  数字

url  地址

range 滑块

date 如期

html5表单新属性

placeholder 占位符  

input::placehodler ｛color｝

multiple   允许一次上传多个文件

属性选择器

可以不借助类、id来获取你想要的元素 都特指input type

属性选择器  []

[type]  选择了带有type属性的元素

[type = ‘checkbox’]  选择了带有type并且类型等于checkbox的元素

[class ^= 'icon' ] 类名以icon开头 

[class $= 'icon' ] 类名以icon结尾

 [class *= 'icon' ] 类名中间任意地方带有icon

结构伪类选择器

dom:first-child 第一个

dom:last-child 最后一个

dom:nth-child(n) 指定获取第n个 数字、公式、单词

伪元素

能够简化页面结构

伪元素其实就是一个假的元素，通过css模拟出来的

盒子模型

改变盒子真实宽度计算的方式

以前：box-sizing:content-box;

盒子真实宽度 = width + padding + border

以前：box-sizing:border-box;

盒子真实宽度 = width，在调整padding + border的时候，会根据width自动影响盒子内容的宽度

比如：

box-sizing:border-box;
width:100px;
padding:10px;
border:10px;
盒子最终还是100px宽 那么他有10*2内边距+10*2边框 剩下内容宽度60px

滤镜-模糊

filter: blur(10px);

里面的值越大，就说明模糊程度越大（越模糊）

过渡属性

transition： 过渡什么属性 执行时间 运动曲线 等待时间

2D

相似区分代码：

translate  平移

transform  2d

transition  过渡

移动盒子的方式

margin负值、定位、平移



transform:translate

因为transform只是一个2D开始的属性，下面有具体的平移、旋转、缩放、倾斜

transform 开启2D属性

平移 translate(X,Y)

请记住带单位

和相对定位相似

可以实现

在未知宽高的盒子中，实现居中效果

旋转 rotate(deg)

请记住带单位,并且是deg

顺时针 正直 逆时针 负值

默认旋转中心在整个元素的正中间，也可以直接理解为 50%，50%

transform-origin：X,Y

背景定位结合在一起来记

方位名词 top center

数字 比较灵活

缩放 scale(倍数)

元素* 倍数 大于1 放大 小于 1缩写

scale(x,y)

如果x和y的倍数是一样的，就可以省略y

scale(0.5)

比之前width height 优势：

不影响其他盒子，并且可以设置位置

倾斜skew(x,y)

x/y代表轴的方向

请记住xy的单位 deg 角度越大 倾斜的角度就越大

2D属性连写的问题

transform：translate scale skew rotate

注意 优先使用translate，中间用空格隔开

动画

能够实现，比较复杂的动画效果

1.定义

@keyframe move{

0%{}

20%{}

25%{}

100%{}

}

2.使用

animation-name:move;

animation-duration:5s;

缩写

animation: name duration timing-function delay iteration-count direction fill-mode;

动画名称 动画持续时间 运动曲线 等待时间 动画执行次数 是否方向播放 动画结束的状态

动画名称和持续时间是必填项

是否暂停，hover、js

只是动画中的 动画运动曲线的一种形式

linear

ease

steps(5)

多组动画一起使用animation ：a 2s,b 1s

3D

X/Y/Z轴

translate(x,y)

translate3d(x,y,z)

translateX(100px)

translateY(100px)

translateZ(100px) 

例如 我只想让元素对z轴走200px

translate3d(0,0,200px)

透视

透视视距能够在屏幕（这个平面）上面看出3D效果==近大远小

备注 透视属性应该写在祖辈元素身上

默认情况

眼睛 ------ 电脑屏幕（元素）

改变translateZ

眼睛 – （元素）---- 电脑屏幕-----（元素）

改变透视

眼睛 ---------改变这个视距-------------- 电脑屏幕（元素）

近大远小

旋转

X轴选择 rotateX

Y轴选择 rotateY

Z轴选择 rotateZ === rotate

旋转方向：左手法则：大拇指，正方形，其他手指就指向了旋转的正方形

子元素开启3D效果

如果说一个元素嵌套了另一个元素，里面的子元素也需要用到3d效果。那么就一定要让他的父级**（亲爸爸）**开启这个支持子元素3d的属性

transform-style：preserve-3d ；

私有前缀

让老一点的浏览器支持新一点的属性，就需要带上私有前缀

谷歌 -webkit-border-radius

欧朋 -o-border-radius

ie -ms-border-radius

火狐 -moz-border-radius

border-radius

注意把缩写，没有私有前缀的放到css代码最后

移动端 浏览器内核 比较新 没有什么特别的兼容性问题

移动端调试

非常注意 移动端适配问题，因为手机屏幕尺寸太多了