css中的行高，盒子模型（边框，内边距，外边距），以及firework的基本使用

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键