第五章 布局模型和表单

本章内容

1.布局模型（流动模型，层模型（重点）和浮动模型）

2.表单（作用，元素和属性）

第一节 布局模型

1.流动模型

​ 流动模型是我们网页布局的默认布局模型，块状元素从上向下布局，行内元素从左向右布局

2.层模型-定位（重点）

层模型主要通过盒子的定位来完成：1.静态定位 2.相对定位 3.绝对定位 4.固定定位 5.吸附定位

2.1静态定位

  position：static
  指的就是元素默认的位置，被浏览器解析以后不对他做任何改变的位置，一般是用来恢复盒子的定位

2.2相对定位

  
  position：relative
  相对于该元素原来的（静态）位置进行偏移，不会脱离文档零（被相对定位的元素，虽然位置发生了改变但是他原位置的空间依然保留）
  水平方向的位置left：10px   向右是正数，向左是负数
  垂直方向的位置top：10px   向下是正数，向上是负数

2.3绝对定位

  
  position：absolute
  绝对定位是相对于他的父级（包含块）元素进行定位的，当该元素没有父级包含块是，相对于浏览器的左上角（0.0）进行定位，脱离了文档凌（看似在当前网页中，但是不占用任何空间的，相当于漂浮在当前网页上）
  包含块：1.块状元素 2.该元素必须被定位（相对，绝对）

2.4 固定定位

  
  position：fixed
  固定在指定位置不会随着网页的滚动而发生改变

2.5 吸附定位（粘性定位）

  
  position：sticky
  指我的页面滚动到指定位置以后，元素就不会随着页面的滚动发生改变

3.浮动模型

float：注意不要出现浮动塌陷

第二节 表单

2.1为什么使用表单

将收集用户信息ton过表达你发送给服务器，登陆和注册

2.2常见的表单元素（记忆）

标签名	说明
form	表单的根标签，重要的属性 action数据提交的URL映射路径 method提交方式（get/post）
input	输入框，根据属性不同输入框有很多种形式
textarea	文本框 评论，自我评价
select	下拉框

2.3 input(重点)

  
  <input  id=""  name="" size="" vlaue="" maxlength="" type=""  placeholder/>
  常用属性
      name：标签名字，服务器接收表单数据通过name属性来完成
      size：输入框的大小
      value： 输入框的值，提交给服务器的数据
      

type属性

属性值	说明
text	type="text" 普通的文本框，默认
password	type="password" 密码
radio	type="radio" 单选框
checkbox	type="checkbox" 复选框
button	type="button" 普通按钮
submit	type="submit" 提交按钮
file	type="file" 文件域，文件上传
reset	type="reset" 重置
image	type="image" 可以给按钮添加图片
email	type="email"HTML5新属性，邮箱
number	type="number"表示数字，e除外
hidden	type="hidden"隐藏，当前输入框不显示

总结

1.布局模型：流动模型，层模型，浮动模型

定位：静态定位，相对定位，绝对定位，固定定位，吸附定位

2.表单元素：type属性（记忆）