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键