Html5+css基础

css样式固定样式
*{
margin: 0;
padding: 0;
list-style: none;
font-family: “microsoft yahei”;
}
a{
text-decoration: none;
}
.clearfix::after{
content: “”;
display: table;
clear: both;
}

动画库animate和wow
1、引入相关库文件
2、初始化动画库

3、给相应的HTML添加动画
<标签 class=“wow 动画名称” data-wow-delay="" data-wow-dueation="">

ul里面只能放li，li里面可以放其他任何标签

li里面一般都有a标记

DIV容器宽度默认是浏览器宽度的100%，高度默认是里面内容的高度之和

DIV容器必须结合css样式来一起使用

表格有行组成，行有格子组成

一个表格table
表格中行（tr=table row）
每行中有几个格子（td）

图片后缀名：
png支持透明，jpg不支持透明，gif支持动画

CSS3新增
transition; 过渡时间
box-shadow;
border-redius;

td中合并单元格用到colspan和sowspan
colspan：夸列(纵向合并)
rowspan：夸行(横向合并）

a标记两个属性
href=“”：指定了链接跳转的目的地址
target=“[_blank/_self]”：指定目标网页的打开位置

在网站的首页中，所有链接的target设置为balnk

绝对路径：协议开头一般是http://
相对路径：
（1）相对于根（当前磁盘根目录）
1、 相对于根的路径始终以“/”开头，“/”表示当前磁盘的根目录，然后从磁盘根目录往下寻找，知道找到目标文件
（2）相对于文档
从当前网页开始，寻找目标网页，知道找到目标网页为止
1、如果当前网页和目标网页位于同一个目录中，直接书写文件名即可
2、向下查找：从当前网页开始，直接书写目标网页路径
3、向上查找：返回上一级用“…/”表示，然后直到找到目录网

href常见的属性值
#：空链接
mailto：123456@qq.com

1、a:link/正常链接：默认蓝色带下划线
2、a:active/正在点击的链接；
3、a:visited/点击过后的链接；
4、a:hover/鼠标经过的链接；
在网页制作过程中对于超链接应该设置的样式
（1）下划线去掉
（2）超链接只设置两种颜色[鼠标经过，其他时候]
a{
text-decoration:none；（去掉下划线）
color：#333；
text-align：center； （文本居中）

}
a:hover{
color#f30；
}

1、表单中包含元素有
文本框、密码框，单选按钮、复选按钮、列表菜单、文件域、文本区域、按钮
以上所有的表单元素必须包含在表单标签中
1、表单标记form
2、文本框标记
注：所有的表单元素标签都必须添加name属性
3、密码框标记
4、单选按钮
5、复选按钮
注：单选和复选按钮如果是同一组，name他们的name属性必须设为相同
如果包含有checkde属性，表示当前项默认被选中
6、列表菜单标记
教师
医生
工程师

注：在option中添加selected表示当前项默认被选中
7、文件域标记
8、文本区域标记
9、按钮标记

header

1、header表示网页的头部[一般包含有logo部分]
2、header中，可以包含标题组[hgroup],如果在header中有多个标题，可以使用hgroup把所以的标题包含起来。

nav
1、nav用来放网页的导航条[主导航、面包屑导航、分页导航、次导航]
2、nav一般要包含一个无序列表ul，列表的每一项都是li，li包含超链接

article

1、article默认存放网页中的文章，其中一般包含有标题和内容
2、article可以嵌套使用

section
1、section叫做节或段，是相对独立的内容，一个网页主题内容可以包含多个section，section也可以嵌套使用
2、section和div并不冲突，在网页中划分大块栏目的时候使用section，划分小块子栏目的时候使用div

aside
1、一般用来描述网页的侧边栏

1、在做任何网页之前，都需要添加一些默认的样式，用来清除标签自带的效果。
2、网页头部一般使用header标记，在header中一般包含有logo部分，搜索，站内导航等
3、参数除不尽的情况下，保留小数点后6位

图标下载:iconfont.cn
1、下载使用
2、字体图标
（1）添加至购物车，然后由购物车添加至项目
（2）选择font class，生成在线链接地址
（3）在网页中使用link标记，引入在线样式表链接地址
（4）在body标签之间书写：

fontawesome
1、引入fontawesome的库文件[bootcdr]
2、在body标签中书写:

块元素：独占一行，宽高可定义
常见块元素：div,p,hn,ul,ol,li,dl,table,form,address

内联元素：与其它内联可在一行，宽高定义无效
常见内联元素：span,a,label,strong,em,select,q

display:block 转换为块元素
display:inline 转换为内联元素
display:inline-block 转换为内联块元素

样式表分类：
1、内部样式表
书写位置：head的style标签内
语法：

样式表声明中属性值的写法：
1、带单位写法【如果值为0，不写单位，如果是小数，不写0】：100%，1px，2cm,3mm,2em
2、英文单词【一般表示颜色】
red,green,blue,yellow,white,cyan,black,
3、十六进制【颜色】
4、rgb函数【颜色】
rgb(255,255,255),rgb(0,0,0),rgb(255,255,0)

solid 实线
dashed 虚线
dotted 点画线
设置margin:auto的块元素，必须设置宽度才会居中

tab切换
1、如果子元素发生了浮动，需要给父元素设置overflow:hidden；
2、单行文本高度=行高，文字就会垂直居中

css继承：
大部分文本类样式都可以向上继承
权重计重器：
1、内联 1000
2、ID 100
3、类、伪类、属性选择器 10
4、标签、伪元素 1
5、标签属性 0.5
6、继承 0
总结：！important>内嵌（style=""）>[in–100,类–10，伪类–10，标签–1]>标签属性>继承

line-height的用法
line-height:单行文本高度=行高，文本垂直居中
如果是多行的段落排版，line-height一般设置为1.5-1.8之间

text-align:center 内容在盒子中居中
margin:auto 盒子居中
text-indent:2em 首行缩进2个字的宽度，一般定义给P标签使用

border-radius 设置盒子的圆角半径
border-radius：50% 正方形变正圆形
border-radius 左上 右上 右下 左下

box-shadow:10px 10px 10px rgba(0,0,0,0.5)；（外阴影）
box-shadow:0px 0px 10px blue inset；（内阴影）
box-shadow:0px 0px 10px rgba(0,0,0,0.5)；（外发光）
text-shadow:1px 1px 0 rgba(0,0,0,0.2)（给文字制作阴影）

text-overflow：设置超出容器的文本如何处理
常用组合：
text-overflow:ellipsis 省略号
white-space:nowrap 超出文本不换行
overflow:hidden 超出文本忽略

transition 设置元素的动画过渡时间
transition: opacity 0.5s ease-in-out 0.3s;
transition：0.5s=transition:all 0.5s

如果子元素发生了浮动，一定要给父元素设置清除浮动带来的影响
常见的清楚浮动的方法可以给父元素设置overflow:hidden

margin:auto块级元素有剩余空间时，可以给块级元素左右自动分配剩余空间，如果需要居中，前提条件是：
1、当前元素是块元素
2、当前元素有宽度
3、剩余空间必须是正值

inline元素上下margin无效，除非转成block,或者inline-block
inline元素上下padding只对边框有效

margin赋值
1、如果元素有固定的尺寸，margin仅仅只是实现元素的平移
margin-left,margin-top:自己动
margin-right,margin-bottom:别人动
2、如果元素没有固定的尺寸，margin会改变元素所占据的空间
如果是正值，元素占据的空间会自动缩小
如果是负值，元素占据的空间会变大

margin和padding的缩写
margin:1px;
margin:1px 2px;
margin:1px 1px 2px;
margin:1px 1px 2px 2px;

border缩写
border:1px solid red;
border:1px solid;如果不指定边框颜色，默认的颜色和文字颜色一致
如果要设置某一条边，四条边分别是top,right,bottom,left
border-top:1px solid red;

三角形：
i{
display: inline-block;
width: 0px;
height: 0px;
border: 20px solid red;
border-color: red green blue transparent（透明）;
}

背景的缩写
background：#f30
background: ur1(“img/1.jpg”) no-repeat center center

字体的缩写
最常用的写法
font：14px/1.7 “microsoft yahei”;

transform2D变换（位移、缩放、旋转、斜切，所有的变化操作都不影响周围的元素）
translate 位移
transform 自由变换 transform:translate(x,y)（右下为正，左上为负）
transtion 过渡时间
scale 缩放 transform：scale(x,y)（x和y取值是倍数，如果只有一个参数，那么x=y）
rotate 旋转 transform：rotate（deg）
如果transform中写多个变换属性，执行顺序是从右到左
改变轴心点的位置transform-orign:center center； transform-orign:left top；左上

transform3D变换（位移、缩放、旋转）
perspective[视距]用来设置眼睛到物体的距离，必须设置该元素，才能产生3D变换的效果，需要注意的是，该属性必须添加给设置动画的元素的父亲

rgba函数用来设置半透明的颜色，a的取值范围是0-1；opacity设置元素整体的透明度
使用rgba函数的有：文字颜色 背景颜色 边框颜色

半透明效果的两种制作方法：rgba函数和opacity属性
1、rgba函数使用的场合有
color、background、border、box-shadow
2、opacity属性：设置盒子模型整体的透明度变化
Opacity是属性，用于设置全局的透明度变化
Ragb是属性值，用于设置局部的透明度变化

Float元素
1、 float元素的初衷是为了制作文字环绕效果
2、 float的核心：一个元素浮动之后，后续元素会占据浮动元素的空间，同时后续元素中的内容会围绕浮动元素进行排列
3、 任何元素float之后，都会变成inline-block元素，再定义display无效（通俗的讲，float和display不能一起使用）
4、 Float对旁边元素的影响
Float元素如果前面是block元素，对前面的元素没有影响，会在自身的位置上漂浮起来
Float元素如果后面是block元素，float会在自身的位置漂浮起来，后面的block元素会占据float元素的位置，围绕float元素排列
5、清除浮动的方法
如果给子元素设置了浮动，给父元素设置overflow: hidden;
6、使用floot
（1）两列、三列、四列布局
两列：一左一右
三列：两左一右
四列：三左一右
Animation动画
语法;
Animation：自定义动画名称 时间 延迟 次数（infinite）
Animation； run 2s;
@keyframes run{
0%{
}
50%{
}
100%{
}
}
Animate.css的应用技巧
（1） 引入animate.css库文件（bootcdn）
（2） 在对应的标签上书写class为标签设置类class=”animated 动画名称”
滚动监听产生动画（wow.js的使用方法）
（1） 在网页中引入wow.js和animate.css文件，引入js文件使用，引入css文件使用link标记
（2） 在对应的标签上书写class为标签设置类，calss=”wow 动画名称”
如果需要添加延迟属性，可以给标签添加属性
Data-wow-delay=”0.2s”
如果需要添加动画时长，可以给标签添加属性
Data-wow-duration=”0.2s”
（3） 在head标签中添加动画的初始化