文本框和按钮不对齐现象

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

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

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

  设置1px的边框

  设置高

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

  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的轮廓线

   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 此光标指示某对象可被移动。

• 其他值

  e-resize    此光标指示矩形框的边缘可被向右（东）移动。
  ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  n-resize    此光标指示矩形框的边缘可被向上（北）移动。
  se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。