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">&emsp;用户名：</label>
          <input type="text" name="username" id="uname">
        </p>

        <p>
          <label for="pwd">&emsp;&emsp;密码：</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>
          <label><input type="checkbox" name="hobby" value="sleep">睡觉</label>
        </p>
        <p>
          居住城市：
          <select name="city">
              <option value="beijing">北京</option>
              <option value="shanghai">上海</option>
              <option value="tianjin">天津</option>
              <option value="zhengzhou">郑州</option>
          </select>
        </p>

        <p><label for="address">详细地址：</label></p>
        <p><textarea name="address" rows="10" cols="30" id="address"></textarea></p>
    </fieldset>
  </form>

提交按钮和重置按钮

输入类型：type="submit" 定义提交表单数据至表单处理程序的按钮。

  <form action="action_page.php">
        <p>
          <input type="reset">
          <input type="submit">
        </p>
  </form>

如果我们省略了提交按钮的 value 属性，那么该两个按钮将获得默认文本。

定义可点击的普通按钮

输入类型：type="button" 定义按钮。

<input type="button" value="点击我">

<button> 元素定义可点击的按钮：

<button type="button">按钮</button>

定义图片按钮

输入类型：type="image" 定义按钮。

<input type="image" src="./img/image_btn.png" alt="图片按钮">

我们最终的表单：

  <form action="action_page.php">
    <fieldset>
        <legend>账户信息：</legend> 

        <p>
          <label for="uname">&emsp;用户名：</label>
          <input type="text" name="username" id="uname">
        </p>

        <p>
          <label for="pwd">&emsp;&emsp;密码：</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>
          <label><input type="checkbox" name="hobby" value="sleep">睡觉</label>
        </p>
        <p>
          居住城市：
          <select name="city">
              <option value="beijing">北京</option>
              <option value="shanghai">上海</option>
              <option value="tianjin">天津</option>
              <option value="zhengzhou">郑州</option>
          </select>
        </p>

        <p><label for="address">详细地址：</label></p>
        <p><textarea name="address" rows="10" cols="30" id="address"></textarea></p>
        <p><input type="reset"><input type="submit"></p>
        <p><button type="button">按钮</button></p>
        <p><input type="image" src="./img/image_btn.png" alt=""></p>
    </fieldset>
  </form>

设置光标样式

cursor属性用来改变贯标的外形。下表总结了一些常用的属性值：

属性值	说明
default	默认光标
pointer	小手
wait	等待效果
help	问号
text	文本指示
crosshair	十字状

当鼠标划过被设置样式的元素时，cursor属性的不同取值告诉浏览器显示不同的光标形状。下面的例子演示了该属性的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置光标样式</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">默认光标</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: wait;">等待效果</li>
        <li style="cursor: help;">问号</li>
        <li style="cursor: text;">文本指示</li>
        <li style="cursor: crosshair;">十字状</li>
    </ul>
</body>
</html>

透明度

opacity属性定义元素的不透明度

语法：opacity: number(0-1之间的数值)

opacity的值为1的元素是完全不透明的反之，值为0的是完全透明的。 opacity: 0.8;

IE的半透明滤镜

语法：filter:alpha(opacity=number);

number的取值为100-0之间的数值 因为ie不支持opacity，只支持自己的滤镜filter:alpha(opacity=50);

外边线

• outline-width
• outline-style
• outline-color
• outline

特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅