深入 radio 和 checkbox
radio 指的是单选框,而 checkbox 指的是复选框。对于 radio 和 checkbox,我们主要学习一个方面就行了,即单选框或复选框与文字垂直居中对齐。
默认情况下,单选框或复选框与它们周围的文本是以 vertical-align:baseline 的方式对齐的,这导致两者在垂直方向上对不齐。既然是 vertical-align 属性导致的问题,那么我们就可以使用 vertical-align 属性来解决,“以其人之道还治其人之身”。
vertical-align:像素值
当文字大小为 12px 时,像素值为 -3px
当文字大小为 14px 时,像素值为 -2px
-apx 表示元素相对于基线向下偏移 apx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#p1 {
font-size: 12px;
}
#p1 input {
vertical-align: -3px;
}
#p2 {
font-size: 14px;
}
#p2 input {
vertical-align: -2px;
}
</style>
</head>
<body>
<p id="p1">
<input id="rdo1" type="radio" /><label for="rdo1">单选框</label>
<input id="cbk1" type="checkbox" /><label for="cbk1">复选框</label>
</p>
<p id="p2">
<input id="rdo2" type="radio" /><label for="rdo2">单选框</label>
<input id="cbk2" type="checkbox" /><label for="cbk2">复选框</label>
</p>
</body>
</html>
textarea
固定大小,禁用拖动
固定大小
在 CSS 中,我们可以使用 min-width 和 min-height 来定义 textarea 的最小宽度和最小高度,也可以使用 max-width 和 max-height 来定义 textarea 的最大宽度和最大高度。
textarea
{
max-width: 100px;
max-height: 100px;
min-width: 50px;
min-height: 50px;
}
禁止拖动
textarea
{
width:100px;
height:80px;
resize:none;
}
表单对齐
实现方式:
▶ 每一行分为左栏和若干右栏。所有行的左栏长度相等,所有行的右栏所有盒子长度之和相等。左栏一般是一个 label,右栏是若干个文本框。
▶ 所有左栏盒子和右栏盒子都设置为左浮动。
▶ 左栏 text-align 属性定义为 right,使得文字右对齐。
▶ 每一行左栏长度和右栏所有盒子的总长度之和等于行宽,这里的盒子包括 width、padding、border、margin。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
form
{
width:320px;
font-family:Arial;
font-size:14px;
font-weight:bold;
}
/*清除每一个p中的浮动*/
p{overflow:hidden;}
label
{
float:left;
width:60px;
height:40px;
line-height:40px;
text-align:right;
margin-right:10px;
}
input:not(#submit)
{
float:left;
height:16px;
padding:10px;
border:1px solid silver;
}
#tel,#pwd
{
width:228px;
}
#verifyCode
{
width:118px;
margin-right:10px;
}
#submit
{
width:100px;
height:40px;
border:1px solid gray;
padding:0;
background-color:#F1F1F1;
}
</style>
</head>
<body>
<form method="post">
<p>
<label for="tel">手机号</label>
<input id="tel" type="text"/>
</p>
<p>
<label for="pwd">密码</label>
<input id="pwd" type="password"/>
</p>
<p>
<label for="verifyCode">验证码</label>
<input id="verifyCode" type="text"/>
<input id="submit" type="submit"/>
</p>
</form>
</body>
</html>
例子中,使用 overflow:hidden 清除每一个 p 元素中的浮动,
第 1 行中的长度情况如图,60px 是左盒子的长度(width+border+padding),250px 是右盒子的长度(width+border+padding)。因此,第 1 行总长度为 60px+250px+10px = 320px,刚好等于行宽 320px,其中 10px 是 margin 值。
第 3 行中的长度情况如图,60px 是左盒子的长度(width+border+padding), 140px 是中间盒子的长度(width+border+padding),100px 是右盒子的长度(width+border+ padding)。因此,第 3 行总长度为 60px+140px+100px+10px+10px=320px,刚好等于行宽 320px, 其中 10px 是 margin 值。