随笔

在PS里选中的文字怎样查看字体高度：按住Alt键滑动鼠标滑轮放大图片，查看像素大小。

 

 

行高、行距与半行距

 

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

 

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

 

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

 

 

 

内容区、行内框、行框

 

内容区：底线和顶线包裹的区域，即下图深灰色背景区域。

 

 

 

行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

 

行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

 

 

<div style="background-color:#ccc;">

                <span style="font-size:1em;background-color:#666;">中文English</span>

                <span style="font-size:3em;background-color:#999;">中文English</span>

                <span style="font-size:3em;background-color:#999;">English中文</span>

                <span style="font-size:1em;background-color:#666;">English中文</span>

            </div>

 

 

 

line-height

 

基本概念搞明白了我们就可以说说本文的主角line-height属性了。

 

定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

 

 

　　div标签嵌套原则详解

这个也许平时人们不注意，但是非常有用，尤其是当你实在找不到原因为什么网页显示错误的时候。

XHTML 的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套——XHTML 必竟不是 XML。

在 XHTML 的语言里，我们都知道：ul 标签包含着 li、dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确。但是，还有许多标签是独立的，它们没有被捆绑在一起，比如 h1、div、p……那么这些标签的嵌套规则到底是怎样的？今天就来说说这个话题。

提到 XHTML 标签的嵌套规则，我们先得知道有这么二类 XHTML 标签，一类叫做 块级元素(block)，一类叫做 内嵌元素（inline，也有许多人叫它：内联、行内、线级等）。

 

span标签里面都可以嵌套其他标签的，这个要看你怎么用了，一般span都作为二级标签

 

p标签虽然是一个块标签 但是不可以存放别的块标签 这样是放不进去的 你可以放一下试试 然后F12看看 存放的块标签是在p标签外部的