css的一些基础（一）
定位
定位相关属性用于设置目标组件的位置，常用的定位相关属性如下。
| 属性 | 说明 | 值 |
|---|---|---|
position |
设置定位方法 | static、relative、absolute、fixed |
left |
||
right |
为定位元素设置偏移量 | 长度、百分比、auto |
top |
||
bottom |
||
z-index |
设置定位元素的层叠顺序 | 数字 |
静态定位（static）
静态定位就是元素标准流的显示方式（默认定位）。
相对定位（relative）
说到相对定位，首先我们需要明确一个概念，相对定位是相对于元素原来的位置进行定位。可以通过TRBL来移动元素的位置，元素在视觉上相对原来的位置移动了，实际上该元素依然占据文档中原有的位置。具体案例如下：
1、元素使用相对定位时，无论是否进行移动，元素仍然占据原来的空间
2、使用相对定位的元素进行移动时，以自己原本的位置作为为参照
3、使用相对定位的元素不能进行元素的模式转换
4、子元素设置绝对定位，父元素设置相对定位
绝对定位（absolute）
1、当给一个单独的元素设置绝对定位时，元素会以浏览器左上角（body）为基准进行定位。
2、当元素发生嵌套关系的时候，如果祖先元素没有设置定位，设置绝对定位的子元素会以浏览器左上角为基准进行定位。
3、当元素发生嵌套关系的时候，如果祖先元素设置了定位，设置绝对定位的子元素会以父盒子左上角为基准进行定位。
4、设置了绝对定位的元素不占位置（脱离文档流）
5、给行内元素设置绝对定位后，该元素会转化为行内块元素
固定定位（fixed）
1、固定定位不占位置（脱离标准文档流）
2、将行内元素转化为行内块元素
设置元素的层叠顺序
z-index 属性指定元素显示的层叠顺序，属性的值是数值，且允许取负值。值越小，在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会派上用场。
表单
定义表单
表单是用于收集用户输入的，网页中常见的表单有，登录表单，注册，调查问卷。
<form> 元素定义 HTML 表单：
<form>
. form elements .
</form>
输入文本的表单域
输入类型：text
<input type="text"> 定义供文本输入的单行输入字段：
<form> 用户名：<br> <input type="text" name="username"> <br> </form>
定义表单域的标签
想要把 <label> 与 <input> 元素关联起来，只需要把 for 属性的值设置为 <input> 元素的 id 属性的值。
<form>
<label for="uname">用户名：</label> <br>
<input type="text" name="username" id="uname"> <br>
</form>
也可以写成这样：
<form>
<label>用户名：<br><input type="text" name="username"></label> <br>
</form>
输入密码的表单域
输入类型：type="password" 定义密码字段：
<form>
<label for="pwd">密码：</label> <br>
<input type="password" name="password" id="uname"> <br>
<label for="prompt_pwd">确认密码：</label> <br>
<input type="password" name="promptPassword" id="prompt_pwd"> <br>
</form>
文件选取域
输入类型：type="file" 定义文件选取按钮。
<form>
<p>
<label for="avatar">上传头像：</label>
<input type="file" name="avatar" id="avatar">
</p>
</form>
单选按钮
输入类型：type="radio" 定义单选按钮。
<form>
性别：<br>
<label><input type="radio" name="sex" value="male" checked>男<br>
<label><input type="radio" name="sex" value="female">女</label>
</form>
复选按钮
输入类型：type="checkbox" 定义复选按钮。
<form>
爱好：<br>
<label><input type="checkbox" name="hobby" value="delicacy">美食</label><br>
<label><input type="checkbox" name="hobby" value="tour">旅游</label><br>
<label><input type="checkbox" name="hobby" value="read">阅读</label><br>
<label><input type="checkbox" name="hobby" value="game">游戏</label><br>
<label><input type="checkbox" name="hobby" value="sleep">睡觉</label><br>
</form>
下拉列表
<select> 元素定义下拉列表
<option> 元素定义下拉列表中的列表项
<form>
居住城市：<br>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
<option value="zhengzhou">郑州</option>
</select>
</form>
多行表单域
<textarea> 元素定义多行文本域：
<form>
详细地址：<br>
<textarea name="address" rows="10" cols="30"></textarea>
</form>
将表单元素分组
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
<form action="action_page.php">
<fieldset>
<legend>账户信息：</legend>
<p>
<label for="uname"> 用户名：</label>
<input type="text" name="username" id="uname">
</p>
<p>
<label for="pwd">  密码：</label>
<input type="password" name="password" id="uname">
</p>
<p>
<label for="prompt_pwd">确认密码：</label>
<input type="password" name="promptPassword" id="prompt_pwd">
</p>
</fieldset>
<fieldset>
<legend>个人信息：</legend>
<p>
<label for="avatar">上传头像：</label>
<input type="file" name="avatar" id="avatar">
</p>
<p>
性别：
<label><input type="radio" name="sex" value="male" checked>男
<label><input type="radio" name="sex" value="female">女</label>
</p>
<p>
爱好：
<label><input type="checkbox" name="hobby" value="delicacy">美食</label>
<label><input type="checkbox" name="hobby" value="tour">旅游</label>
<label><input type="checkbox" name="hobby" value="read">阅读</label>
<label><input type="checkbox" name="hobby" value="game">游戏</label