简单地做了下总结！也是工作上比较经常使用的对自己也是有些帮助！
有什么问题也可以留言一起探讨下?。?！谢谢
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;
}
