CSS定位类型简介

 

CSS position定位（5种方式）

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：

取值	说明
static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed	固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

表格元素

元素	描述
<caption>	HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 table 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。
<col>	HTML <col> 元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于colgroup元素内。
<colgroup>	HTML 中的 表格列组（Column Group <colgroup>） 标签用来定义表中的一组列表。
<table>	HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
<tbody> (en-US)
<td>	HTML <td> 元素 定义了一个包含数据的表格单元格。It participates in the table model.
<tfoot>	HTML 元素<tfoot>  定义了一组表格中各列的汇总行。
<th>	HTML <th> 元素
<thead>	HTML的<thead>元素定义了一组定义表格的列头的行。
<tr>	HTML <tr> 元素定义表格中的行。 同一行可同时出现td 和th 元素.

表单

HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。

元素	描述
<button>	HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
<datalist>	HTML <datalist>元素包含了一组option元素，这些元素表示其它表单控件可选值.
<fieldset>	这个元素包含所有全局属性。
<form>	HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
<input>	HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。
<label>	HTML <label> 元素（标签）表示用户界面中某个元素的说明。
<legend>	HTML <legend> 元素用于表示其父元素 fieldset 的内容标题。
<meter>	HTML <meter>元素用来显示已知范围的标量值或者分数值。
<optgroup>	HTML元素 <optgroup> 为select 元素中的选项创建分组。
<option>	HTML元素 <option>  用于定义在 select,  optgroup 或 datalist 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。
<output>	HTML <output> 标签表示计算或用户操作的结果。
<progress>	HTML中的<progress>元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.
<select>	HTML <select> 元素表示一个提供选项菜单的控件：
<textarea>	HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。