1.行高 line-height
- 浏览器默认文字大小：16px
- 行高是文本行基线间的垂直距离（基线与基线位置）
- 行高=文字高度+上下边距
行高实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style type="text/css">
a.one{
text-decoration-line:none;
display: inline-block;
width:120px;
height: 58px;
background: url(bg1.png);
color: white;
text-align: center;
line-height: 50px;
}
a.two{
text-decoration-line:none;
display: inline-block;
width:120px;
height: 58px;
background: url(bg2.png);
color: white;
text-align: center;
line-height: 50px;
}
a.three{
text-decoration-line:none;
display: inline-block;
width:120px;
height: 58px;
background: url(bg3.jpg);
color: white;
text-align: center;
line-height: 50px;
}
a.four{
text-decoration-line:none;
display: inline-block;
width:120px;
height: 58px;
background: url(bg3.png);
color: white;
text-align: center;
line-height: 50px;
}
a.one:hover{
background: url(bg2.png);
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>行高单位
| 单位 | 文字大小 | 值 |
| px | 20px | 20px |
| em | 20px | 40px |
| % | 20px | 30px |
| 2 | 20px | 40px |
总结：单位除了像素以外，行高都是与文字大小乘积
| 行高单位 | 父元素文字大小 | 子元素文字大小 | 行高 |
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| %150 | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
总结：不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字相乘，行高以像素为单位，就是定义行高值。 推荐行高使用像素为单位。
2. css盒子模型
1.边框 border
border-top-style:solid;实线 dotted；点线 dashed；虚线
border-top-color 颜色
border-top-width 宽度
以上属性可连写：border-top：red solid 12px； 线型必写
四个边框：border：red solid 12px；
边框合并：border-collaspe：collaspe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 200px;
height: 100px;
border: 1px solid red;
/*边框合并*/
border-collapse: collapse;
}
td{
border: 1px solid green;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>效果
实战之表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
<style>
.username{
border: 0 none; /*去掉边框,兼容性更好*/
outline-style: none;/*去掉轮廓线*/
/*重新定义*/
background: #ccc;
border: 1px dashed green;
}
.username:focus{
background: red;
}
.email{
border: 0 none; /*去掉边框,兼容性更好*/
outline-style: none;/*去掉轮廓线*/
/*重新定义*/
border-bottom:1px dotted pink;
}
.search{
border: 0 none; /*去掉边框,兼容性更好*/
outline-style: none;/*去掉轮廓线*/
/*重新定义*/
border: 1px solid #999;
background: url(1.jpg) no-repeat right;
}
</style>
</head>
<body>
用户名：<input type="text" class="username"><br><br>
邮 箱：<input type="text" class="email"><br><br>
搜索一下：<input type="text" class="search">
</body>
</html>效果图：
2. 内边距：padding
属性：padding-left、padding-right、padding-top、padding-bottom
简写：padding：20px；上右下左内边距都是20px
padding：20px 30px；上下20px ；左右30px
padding：20px 30px 40px；上内边距20px；左右内边距30px；下内边距40px
padding：20px 30px 40px 50px；上 20px；右30px；下40px；左50px；
内边距影响盒子大小：内边距会撑大盒子
影响盒子宽度的因素；
1. 内边距影响盒子的宽度；
2. 边框影响盒子的宽度；
盒子的宽度 = 定义的宽度+边框的宽度+左右内边距
注意：继承的盒子一般不会撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给予盒子设置左右内边距，一般不会撑大盒子。
盒子之新浪导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.nav{
height: 40px;
background: #eee;
border-top: 3px solid orange;
border-bottom: 1px solid #aaa;
}
.nav_con{
width: 1000px;
background: #aaa;
height: 40px;
margin: 0 auto;
/*line-height: 40px;*/
}
a{
font: 12px/40px 微软雅黑;
color: #333;
display: inline-block;
height: 40px;
text-decoration: none;
padding: 0 12px;
}
a:hover{
background: #999;
font: 14px;
}
</style>
</head>
<body>
<div class="nav">
<div nav_con>
<a href="#">设置首页</a>
<a href="#">手机新浪</a>
<a href="#">移动客户</a>
</div>
</div>
</body>
</html>盒子模型存在疑惑有待提高？？？？？
外边距
