简单地做了下总结！也是工作上比较经常使用的对自己也是有些帮助！
有什么问题也可以留言一起探讨下！！！谢谢
html
一.html
1.xhtml和html的区别
(1)头部doctype生命不同，xhtml的头部必须按照规定XHTML DTD
(2)html元素必须正确嵌套，不能乱
(3)属性必须是小写的
(4)属性值必须加引号
(5)标签必须有结束
2.html 块级元素和行内元素 块级元素和行内元素区别
块级元素：div p ui li h1-h5 from table
行内元素：span i input img lable button select
区别：
行内元素：不能设置宽高；margin设置左右有效，上下无效；padding无效；不会自动换行
块级元素：可以设置宽高；margin和padding都有效；可以自动换行；多个块状从上到下
一，h5新特性
1.语义化标签
header 标签包含导航
footer 作者信息，相关链接
nav 构建导航组件
aside 主要装载广告，侧边栏
article 包含文章 内嵌header footer h1 p标签
section 可以用在以上任一 一个标签划分组件
hgroup
2.表单新增功能
placeholder属性
<inputtype="text"placeholder="请输入密码"/>
autofocus属性 页面只能有一个
<inputtype='text'autofocus/>
css
css
1.盒模型
网页元素如何显示和元素之间的相互关系
boder padding margin content 填充
2.弹性布局flex
(1)提供一种更加有效的方式来对一个容器中的条目进行排列，对齐和分配空白空间。
(2)即便容器的条目的尺寸未知或是动态变化，弹性盒布局模型也能正常的工作。
3.水平垂直居中弹性布局flex
(1)父元素：display:flex;弹性布局
子元素：align-self：center
.box{
height:600px;
width:600px;
background-color:yellow;
display:flex;
}
.box1{
/*水平居中*/
margin:0auto;
width:300px;
height:300px;
background-color:aqua;
/*垂直居中*/
align-self:center;
}
(2)display:flex;
justify-content:centen;
align-items:center;
.box3{
height:100px;
width:100px;
background-color:red;
display:flex;
justify-content:center;
align-items:center;
}
.box4{
height:50px;
width:50px;
background-color:#FFFF00;
}
(3)绝对定位+transform
position:relative;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
.box5{
width:100px;
height:100px;
position:relative;
background-color:#FF0000;
}
.box6{
width:50px;
height:50px;
position:absolute;
background-color:#00FFFF;
left:50%;
top:50%;
transform:translate(-50%,-50%);//移动
}
4.rem em vh(移动端相关的知识)
(1)em
是根据父元素的大小来改变的
(2)rem
是根据html的大小来设置的
(3)vh vw
是根据html来判定的
(4)
.box{
height:100vmin;
width:100vmin;
}
.box{
height:100vmax;
width:100vmax;
}
