一、文本框和按钮不对齐现象(高度得设置一样)
-
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 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(南)。 w-resize