前端基础知识

 一、文本框和按钮不对齐现象(高度得设置一样)

- input 设置左浮动 (float:left)。

  取消input 默认的2px边框 和上下1px内边距

  设置1px的边框

  设置高

- button设置高度比input的高度大2px

  ```html

  input {

  /* 直接设置1px边框覆盖 */

  border: 1px solid red;

  /* 取消默认的上下1px内边距 */

  padding: 0;

  height: 60px;

  float: left;

  }

  button,

  .sub,

  .sub1 {

  height: 62px;

  }

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

  <button>按钮</button>

  <input type="submit" class="sub">

  <input type="reset" class="sub1">

  按钮：

  <button>按钮</button>

  <input type="submit">

  <input type="reset">

  ```

# 二、CSS 用户界面属性

## 轮廓线

概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

​      输入框边缘外的线

outline简写

- 在一个声明中设置所有的轮廓属性。

- 可以设置的属性分别是（按顺序）：

  outline-color, outline-style, outline-width

- 说明：

  - 轮廓样式 outline-style

  - 轮廓颜色 outline-color

  - 轮廓宽度 outline-width

  - 语法：空格隔开

- 取值：参考边框

- 清除设置 input ，textarea的轮廓线

  ```css

   input, textarea {

              /* 清除轮廓线 */

              outline: none;

              /* 设置轮廓线  */

              outline: 1px solid red;

          }

  ```

## 用户界面

### 1）文本域的resize属性：用户是否可以对元素尺寸进行调整

- resize: none; 不允许用户手动调整元素的尺寸

- resize: both; 用户可以调整元素的宽度和高度

- resize: horizontal; 用户可以调整元素的宽度

- resize: vertical; 用户可以调整元素的高度

## CSS 鼠标样式

通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状

- 常用值

  - 默认值：auto

  - default 通常是一个箭头

  - text    显示为光标

  - pointer 光标呈现为指示链接的指针（一只手）

  - move    此光标指示某对象可被移动。

- 其他值

  ```html

  e-resize  此光标指示矩形框的边缘可被向右（东）移动。

  ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。

  nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。

  n-resize  此光标指示矩形框的边缘可被向上（北）移动。

  se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。

  sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。

  s-resize  此光标指示矩形框的边缘可被向下移动（南）。

  w-resize  此光标指示矩形框的边缘可被向左移动（西）。

  text  此光标指示文本。

  wait  此光标指示程序正忙（通常是一只表或沙漏）。

  help  此光标指示可用的帮助（通常是一个问号或一个气球）。

  ```

```html

 <ul>

        <li style="cursor:auto">auto</li>

        <li style="cursor:crosshair">Crosshair</li>

        <li style="cursor:default"> Default</li>

        <li style="cursor:pointer"> Pointer</li>

        <li style="cursor:move"> Move</li>

        <li style="cursor:e-resize"> e-resize</li>

        <li style="cursor:ne-resize"> ne-resize</li>

        <li style="cursor:nw-resize"> nw-resize</li>

        <li style="cursor:n-resize"> n-resize</li>

        <li style="cursor:se-resize"> se-resize</li>

        <li style="cursor:sw-resize"> sw-resize</li>

        <li style="cursor:s-resize"> s-resize</li>

        <li style="cursor:w-resize"> w-resize</li>

        <li style="cursor:text"> text</li>

        <li style="cursor:wait"> wait</li>

        <li style="cursor:help"> help</li>

    </ul>

```