css的一些基础（一）

2022-09-22 08:03:33

定位

定位相关属性用于设置目标组件的位置，常用的定位相关属性如下。

属性	说明	值
`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

码农公寓

css的一些基础（一）

定位

静态定位（static）

相对定位（relative）

绝对定位（absolute）

固定定位（fixed）

设置元素的层叠顺序

表单

设置光标样式

透明度

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

IE的半透明滤镜

外边线

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

码农公寓

定位

静态定位（static）

相对定位（relative）

绝对定位（absolute）

固定定位（fixed）

设置元素的层叠顺序

表单

设置光标样式

透明度

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

IE的半透明滤镜

外边线

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

相关文章