1、行高定义
浏览器默认文字大小：16px
行高：基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示
2、行高的单位
文字大小 行高单位 行高的值
20px 350px 35px （和文字大小无关）
20px 2em 40px （20px*2）
20px 150% 30px （20px*150%）
20px 2 40px （20px*2）
总结：单位除了像素以外，行高都是与文字乘积
父元素文字大小 子元素文字大小 行高单位 行高
20px 30px 40px 40px
20px 30px 2em 40px
20px 30px 150% 30px
20px 30px 2 60px
总结：不带单位时，行高和子元素大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
u 推荐使用像素px为单位
3、盒子模型
3.1 边框border
border-top-style：solid 实线
dottled 点线
dashed 虚线
border-top-color:边框颜色
border-top-width 边框粗细
u 边框属性的连写：没有顺序要求，线型为必写项
border-top:red solid 5px;
border:red solid 5px;（四个边框相同时的写法）
3.2边框合并
border-collapse:collapse;（表格中的细线设置）
代码：
table{
width: 300px;
height: 200px;
border: 1px solid red;
border-collapse: collapse;
}
td{
border: 1px solid red;
}
3.3获取焦点
代码：.username{
border: 0 none;
outline-style: none;
background-color: pink;
border: blue 0.5px dottled;
}
.username:focus{
background: green;
}
获取光标焦点：Label for id
<label for="username">用 户 名：</label>
<input type="text" class="username" id="username">
3.4内边距
padding-left 距离左边
padding-right 距离右边
padding-top 距离上边
padding-bottom 距离下边
内边距连写
Padding:10px 上右 下左 内边距都是20px
Padding:10px 20px 上下20px 左右30px
Padding:10px 20px 30px 上内边距10px 右左20px 下30px
Padding:10px 20px 30px 40px 上10px 右20px 下30px 左40px
u 内边距撑大盒子问题
影响盒子的因素：内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度 = 定义的宽度 + 边框宽度 + 内边距
u 继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果盒子没有定义宽度，给盒子设置左右内边距，一般不会撑大盒子。
3.5外边距
margin-left 距离左边
margin-right 距离右边
margin-top 距离上边
margin-bottom 距离下边
u 外边距连写
margin:10px 上右 下左 内边距都是20px
margin:10px 20px 上下20px 左右30px
margin:10px 20px 30px 上内边距10px 右左20px 下30px
margin:10px 20px 30px 40px 上10px 右20px 下30px 左40px
u 垂直方向外边距合并
垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是设置的比较大的值。
u 外边距塌陷
问题：嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷。
解决方案：（1）给父盒子设置边框 border:red 1px;
（2）给父盒子设置overflow：hidden;
4、firework基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清除辅助线： 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离 ★先拉出2根辅助线
★切换到指针工具
★将光标放到2根辅助线之间，按住shift键