html盒子左右边框边距,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

用  户名：

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键