HTML表单与定位知识点

1.1 表单

表单的作用： 用来收录用的信息

语法 :

<form action="" method=""></form>

属性 ：

action ： 表单提交的路径 , 如果不写值，默认提交在当前的页面中

method ： 表单的提交的方式： get( 默认 )/post

表单又叫表单域，里面包含好多的表单元素

1.2 常见的表单元素

1.input 系列 ， type 属性，值不一样，表现的形态不一样

type 的值：

text : 文本框

password: 密码框

radio : 单选按钮 ，注意：需要加 name, 值必须一样，代表他们是一组

checkbox : 复选框，注意：需要加 name, 值必须一样，代表他们是一组

file : 文件上传

submit : 提交按钮 ，默认的文本是提交，通过 value 属性可以更改

reset : 重置按钮， ，默认的文本是重置，通过 value 属性可以更改

button ： 普通按钮，默认任何按钮文本，通过 value 属性进行设置，没有功能在里面，要通过配合 js 使用

2. 下拉列表： select>option 默认显示的是第一项

3. 文本域： textarea

禁止用户拖拽改变文本域的尺寸 ： resize:none

cols 和 rows 可以去掉，用 css width 和 height 设置

4. label : 信息提示标签

点击 label ，光标聚焦到关联的输入框中，实现？

<label for = "uname" > 用户名： </label>

<input id = "uname" type = "text" >

for 的值要和 输入框的 id 的值一样，这样能把它们关联在一块

1.3 表单元素常见的属性

1. name ： 属性用于对提交到服务器后的表单数据进行标识

2. value 为 input 元素设定值

3. checked : 主要针对的单选按钮和复选按钮，页面加载时自动勾选选中项

4. selected : 主要针对的是下拉列表，下拉列表默认显示第一项，通过 selected 属性，页面加载时可以

更改默认选中项。

5. maxlength 属性，规定输入字段允许的最大长度

6. disabled 规定应该禁用 input 元素 ( 可以理解坏掉，不好使了 )

7. readonly : 只读

2.1 定位

语法 ：

position :

static : 静态定位（其实是没有定位，默认值）

fixed ：固定定位 ：不会随着滚动条滚动而滚动

应用场景 ： 返回顶部 、 吸顶效果、右下角的弹窗广告等

特点 ：脱离了文档流，不占位置，类似于行内块元素

参照物 ： 浏览器窗口

relative : 相对定位

应用场景 ： 大部分都是作为绝对定位的参照物

特点 ：不脱离文档流，还保留原来的位置

参照物 ： 以自身原来的位置来定位

absolute : 绝对定位

应用场景 ：出现层级关系（轮播图左右箭头、图片上的文字、轮播点等）

特点 ：脱离了文档流，不占位置，类似于行内块元素

参照物 ：必须加在 “ 父元素 ” 身上，以最近已定位的 “ 父元素 ” 为参照物 ，如果 “ 父元素 ” 上都没有

参照物，就以 html 为参照物 。

可以作为参照物的定位 ： 可以是固定定位，可以是相对定位，还可以绝对定位

最经典口诀 ： 子绝父相   子绝父绝  子固父固 

left

right

bottom

top

备注 ： 单独使用方向关键字没有效果，要配合定位去使用，除了 static 定位不支持，其他定位都支持

块级元素在浏览器中水平垂直居中？

/* 方法一： margin 负间距法 */

position: fixed;

left: 50%;

top: 50%;

margin-left: - 盒子宽度一半 ;

margin-top: - 盒子高度一半

/* 方法二 ： margin:auto 法 */

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin:auto

浮动和定位的区别？

哪些属性可以使元素脱离文档流 ( 不占位置，类似于行内块元素 ) ？

float : left /right

position : fixed / absolute

区别 ？

浮动 ： 脱离了文档里，没有脱离文本流

定位 ： 脱离了文档流，也脱离了文本流

行内元素可以让他设置宽高，有哪几种方式？

display:block

display:inline-block

float : left /right

position : fixed / absolute

3.1 css 精灵图

css sprites 叫精灵图又叫雪碧图

原理 ： 将多张小图拼合在一张大图（背景图）上，利用 background-position 进行背景图定位

备注 ：

适用于小图标

background-position 只有负值，没有正值

优点 ：

减少网页的 http 请求，从而大大的提高页面的性能

图片命名上的困扰

更换风格方便

缺点 ：

必须要限定容器大小符合背景图元素位置，需要计算

维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片