行高
- 在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(别忘了快捷键哟!)