前端入门part15文字界面&实战练习

行高

• 在css中所有的行都有自己的行高；
• 注意：行高是一行文字的高度，盒子的高度是标签的高度；
• 

规律：文字在行高中垂直居中；

• 问题需求：如何实现文字在盒子中垂直居中？

• 对于一行文字而言： 把盒子的高度和行高设置成一样的就可以了！

• 对于多行文字如何？用盒子高度减去文字长度除去2，设置为padding-top和padding-bottom，加上box-sizing: border-box;

• 两种方法效果一样体验一下！

应用举例：

• 
  
        对于一个盒子里面存放的都是文字，那么测试他的内边距的时候要注意:①水平方向上以左边距为主，右边距为辅；②在竖直方向上，上边距是顶部到行高的距离而不是到文字的距离；

  ---

在企业开发中如何根据设计师给的图片恢复文字界面呢？

以李老师上课的案例为例：

首先解读一下图片信息：

• ① 整个盒子包含边框一起是372px*232px;

• ② 边框的属性是 1px solid #666666；大盒子和里面内容之间的距离（内边距）为15px

• ③ 背景颜色是#efefef;

• ④ 标题由汉字和英文组成，汉字是微软雅黑 18px；英文为微软雅黑 14px；底部有一个边框样式为1px solid #666666；有一个10px的内边距；

• ⑤ 下面是五个li(列表) 列表前面没有那个小圆圈；ul和上面的底部边框之间有10px的边距（外边距）；每一个li的行高为30px；每一个li有一个底部边框；li中的文字为微软雅黑 12px；每个li的内边距为20px；

• ① 清空所有边距；（方法在上一个博客）+ 从外向内、从上向下编写网页；

• ② 设置整个边框

• ③ 设置背景颜色
  

• ④ 标题为同一个字体但大小不同，可以使用span标签改变局部样式；
  

• ⑤增加五个li（别忘了快捷键哟！）