Input&Em&Rem&VH&VW...

表单控件

表单: form

Action 数据提交路径
Enctype 表单数据编码方式
Method 提交方式

• 1)get显示提交 2)Post 隐式提交 3)Put 4)Delete 5)…

表单元素 <input>

• Name 表单元素名字
• Value 表单元素默认值
• Disabled 禁用控件
• Type 表单元素类型

1.Text 单行文本框
2.Password 单行密码框,属性： Maxlength :最大长度, Readonly:只读,Name:控件名称
3.Checkbox 复选按钮，多选
4.Select 下拉菜单:Option下拉菜单的某个选项:Value 下拉菜单选项的默认值（提交后台的数据）
5.Radio 单选按钮
6.File 文件域
7.Button 普通按钮
8.Submit 提交按钮
9.Reset 重置按钮，恢复默认值
10.Hidden 隐藏域
11.Textarea 多行文本域

---

属性区别Display：none&&Visibility:hidden

/* display:none-->元素隐藏后不占据空间 */
        /* visibility: hidden-->元素隐藏后依旧占据空间 */
        /* display: none; */
        /* visibility: hidden; */

---

css选择器优先规则

/* 优先规则：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器*/

---

媒体查询

参考：mediaquery媒体查询

---

background

background-image: url(图片地址);
background-repeat: repeat（平铺）|no-repeat（不平铺）|repeat-x（沿x轴平铺）|repeat-y（沿y轴平铺）
background-position:x y ;x坐标和y坐标，可以使用方位名词（top|center|bottom|left|right）或者精确单位
background:rgba(0,0,0,0.3);前三个数值分别对应rgb值，最后一个是alpha透明度，取值范围在0~1之间
background-attachment:scroll | fixed 属性设置背景图像是否固定或者随着页面的其余部分滚动。
参考：背景设置

---

认识Em和Rem单位

em会根据父级元素的大小来嵌套换算
Rem 根据根元素html默认16PX换算
设置html{font-size：xxpx}
谷歌浏览器默认最小字号12px 要改的话在设置里调节
为了响应式一般html{font-size：62.5%} 换算为10PX整数

---

认识VH和VW单位

水平和垂直两个方向占页面的百分比，vh、vw是相对浏览器窗口大小，%是相对父元素的大小。
Height:100vh…视口高度单位
Width:100vw…视口宽度单位
1vw = 1/100视口宽度
1vh = 1/100视口高度
height:calc(100vh-50px);相当于视口的高度减去50px计算之后的高度
参考：vw和vh基本概念

---

transform

参考：
Transform全解
Transform详解

---

布局

参考：
前端常用的几种布局方式
html布局知识点总结
Flex布局详解
HTML Flex布局教程

---