网站接广告能赚多少钱,网络优化app,国内网络推广平台,重庆那些网站1、基本概念 1. 基线、底线、顶线、中线 注意#xff1a;基线#xff08;base line#xff09;并不是汉字文字的下端沿#xff0c;而是英文字母“x”的下端沿。 2. 内容区 内容区是指底线和顶线包裹的区域#xff08;行内元素display#xff1a;inline可以通过bac… 1、基本概念 1. 基线、底线、顶线、中线 注意基线base line并不是汉字文字的下端沿而是英文字母“x”的下端沿。 2. 内容区 内容区是指底线和顶线包裹的区域行内元素displayinline可以通过background-color属性显示出来实际中不一定看得到但确实存在。内容区的大小依据font-size的值和字数进行变化。 3. 行距、行高 行高line-height包括内容区与以内容区为基础对称拓展的空白区域我们称之为行高。一般情况下也可以认为是相邻文本行基线间的距离。 行距指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然我更愿意认为是上文本行行高-内容区高度/2下文本行行高-内容区高度/2。 4. 行内框 行内框是一个浏览器渲染模型中的一个概念无法显示出来但是它又确实存在它的高度就是行高指定的高度。 5. 行框 行框line box同行内框类似的概念行框是指本行的一个虚拟的矩形框也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值以行高值最大的行内框为基准其他行内框采用自己的对齐方式向基准对齐最终计算行框的高度。 Vertical-align:垂直居中 上一节我们讲解了行高与单行纯文字的垂直居中line-height而如果行内含有图片和文字在浏览器渲染出来后读者可以发现文字和图片在垂直方向并不是沿中线居中而是沿基线对齐。这是因为元素默认的垂直对齐方式为基线对齐vertical-align: baseline。 CSS 语法vertical-align 语法 baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比 | 长度 | inherit 说明 设置元素内容的垂直对齐方式。 参数 baseline 基线对齐 sub 下标显示 super 上标显示 top 顶端对齐 text-top 文本的顶端对齐 middle 中部对齐 //没有研究透的属性 bottom 底端对齐 text-bottom 文本的底端对齐 百分比和长度 CSS2可为负数。 初始值baseline 继承性不继承 此处需要特别注意的是垂直对齐属性只对文本有效是指包含了#Text节点的元素节点才能正确地处理vertical-align属性。同时该属性不能继承。 属性值详解 在上面一节中介绍了文本的基线、顶线、中线和底线还有内容区、行内框和行框而本节的垂直对齐和这几个概念密切相关。 垂直对齐主要属性值的表现形式如上图所示。 1. 基线对齐vertical-align : baseline 基线对齐vertical-align : baseline使元素的基线同基准元素取行高最高的作为基准的基线对齐 2. 顶端对齐vertical-align : top 顶端对齐vertical-align : top是将元素的行内框的顶端与行框的顶端对齐 3. 文本顶端对齐vertical-align : text-top 文本顶端对齐vertical-align : text-top是将元素行内框的顶端同文本行的顶线对齐 4. 底端对齐vertical-align : bottom 底端对齐vertical-align : bottom与顶端对齐vertical-align : top相反 5. 文本底端对齐vertical-align : text-bottom 6. 中间对齐vertical-align : middle 中间对齐vertical-align : middle通常使用在图片上将图片的垂直方向的中线与文本行的中线对齐。对于文字的处理有些偏差具体依据还没有研究出来有研究的同学可以联系我哦~~ 中线的定义为中线位于基线的上方与基线的距离为小写字母x高度的一半 即0.5ex 而ex同font-size相关大部分浏览器认为1ex 0.5emem同样也是相对单位不是绝对单位因此会将基线以上四分之一em处作为中线来对齐。 7. 上标和下标 上标vertical-align:super使元素的基线相对于基准元素的基线升高下标vertical-align:sub使元素的基线降低移动的幅度CSS规范中没有规定由浏览器来决定。 上下标不会改变元素文字的尺寸大小。 8. 长度值和百分比 和上下标类似长度值和百分比值可使元素的基线相对于基准元素的基线升高正值或者降低负值。 上下标的移动尺寸是由浏览器确定的而设定长度值或者百分比可以精确控制文字上下移动的幅度。 百分比与行高有关line-height例如有如下代码其显示如图7-44所示。 我的测试 FireFox下 测试代码 style typetext/css p {vertical-align:baseline; font-size:20px; line-height:60px; background-color:yellow;} span {background-color: red;} u {background-color: blue;} del {background-color: pink;}/style //HTML代码pspanAjax测试/spanuAjax测试/udelAjax测试/delAjax测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试/p 默认情况 其他说明 1、SPAN、U、DEL标签的 offsetWidth SUM 字符 * font-size * 修正系数这里中文的修正系数为1数字的修正系数0.6英文字符修正系数差异很大比如ijl很小wmk等比较大大写英文同样修正系数不统一。 2、SPAN、U、DEL标签的 offsetHeight。 推论inline元素的背景渲染区域即内容区域大小直接受到font-size的影响。 对p块级元素块级元素的计算值高度由包含的行框高度累加而成因此这里height为60px 3、把 span.style.lineHeight 设置为 15px(从10px变化到60px) ---- 发现没有变化 推断内容区大小不受line-height影响line-height用于处理相邻文本行基线间的距离。 4、把 span.style.lineHeight 设置为 70px(从61px变化到80px) ----行框高度开始随着设置调整 推断行框高度是行内最高的行内框高度通过line-height调整。 p元素的height计算值为 span.style.lineHeight值不由p.style.lineHeight控制。 推断二不设定height属性的p的height计算值为行框高度累加值。 场景4line-height功能测试 5、把 span.style.verticalAlign subdel.style.verticalAlign super--看图说话 推断增加了行框的高度上下标基于基线进行移动。 场景5sub、super垂直居中效果的研究 6、所有对齐方式的确认 1、首先确认该行内的基准元素取line-height值为最大值的元素作为基准 2、其他文本向基准元素对齐依据line-height和vertical-align来实现效果 3、sub、super是改变基线的方式因此会对行框的最终高度产生影响 4、top、bottom是行内框对齐top指该元素行内框的顶端与基准行内框顶端对齐 5、text-top、text-bottom同样会影响最终行框的高度是指该元素行内框的顶端与基准元素的内容区顶端对齐当line-height内容区高度时跟基准内容区域顶端对齐。line-height小于内容区域高度时会出现文本继续上移的现象line-height设置为0px时正好是内容区域的垂直中部跟基准内容区域顶端对齐。 6、百分数和长度值基于基线进行移动百分数的计算值为行高*百分数。 7、关于middle感觉是根据一条基准线进行对称拓展但基准线产生的规则不清楚。 转载地址http://blog.csdn.net/q121516340/article/details/51483439
