【关于 行高lineheight的概念及与Vertical-align、内容框、基线等的关系】的更多相关文章

关于 行高lineheight的概念及与Vertical-align、内容框、基线等的关系

1.关于行高 行高:顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离,他也是底线和顶线之间距离   (1)内容区…

CSS行高--line-height

遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这个问题,如下图:     解释 定义:line-height 属性设置行间的距离(行高),不能使用负值.该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内…

【转】css行高line-height的一些深入理解及应用

一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考.另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解.所讲述的并不一定都是正确的,欢迎指正欢迎交流. 二.一些字面意思“行高”顾名思意指一行文字的高度…

CSS行高——line-height 垂直居中等问题

CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</titl…

CSS行高——line-height

初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</title> <style type=…

CSS行高line-height的理解

一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基线,是a,c,z,x等字母的地边线. ————————顶线(top line)———————————————— ——————————中线(middle line)———————————— ————————————基线(base line)——————————— ———————————————底线(b…

ie对行高line-height的诡异解释

切 游戏页面真地是要求太精细了,做按钮的时候我犯了一个错误,居然用span的内联元素的行高和padding来控制,虽然有很多好处,但是IE对 line-height的解释导致按钮经常下边会缺一小部分,也就是说,实际上居中的文本距离顶部和底部的距离会差2个像素左右,一般情况看不出问题,但 在精细的场合就没办法了.所以最好用块元素的PADDING来做按钮,而且高度最好为偶数值. 先写个height.line-height都为25px,背景为红色的元素,设置文字为12px.然后量下,文字上面是6像素,…

(转)CSS行高——line-height

原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head…

css行高line-height的用法（转）

本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.所有浏览器都支持 line-height 属性. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比…

CSS行高line-height的一些深入理解及应用

一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a.c.z.x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是有关联的,但具体细节如果,浏览器差异怎样,还不是很清楚. 但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线,对不上眼.定义是一回事,表现则是另一回事…

css中的行高line-height

“行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是由关联的,但具体细节如何,浏览器差异怎样,我还不是很清楚. 但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线——对不上眼.您理解为底线之差也不为不可.只是定义一回事…

CSS 基础 例子 行高line-height

“行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height…

关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等

CSS基线之道 http://www.qianduan.net/css-baseline-road.html 垂直对齐:vertical-align属性 http://www.ddcat.net/blog2005/archives/2008/07/233.html 行高:line-height属性 http://www.ddcat.net/blog2005/archives/2008/06/232.html…

行高 line-height

一.行高的定义 line-height(行高):两行文字基线之间的距离 1.什么是基线? 2.为何是基线? 3.需要两行吗? 1.什么是基线? 我们上学的时候都用过,抄写英文字母的时候.其中有一条红线,这个红线就是基线,是为了写英文的时候对齐用的.   2.为何是基线? 为什么不是底线,不是中线呢?因为基线乃*线定义之根本! 3.需要两行吗? 两行的定义已经决定了一行的表现! 如图,首先基线与基线之间的距离就是行高   接下来我们看看line-height:200px跟这个基线到底怎么纠葛,起作…

css行高line-height的用法

一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height 属性设置行间的距离(行高),不能使用负值.该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和…

CSS行高line-height的学习

一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置固定的行间距. %基于当前字体尺寸的百分比行间距. inherit规定应该从父元素继承 line-height 属性的值. 注释:不允许使用负值. 浏览器支持 所有浏览器都支持 line-height 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "…

我不知道的行高——line-height

概述 对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度. 对于非替代行内元素,line-height用于计算line box的高度. 对于替代行内元素,如button 或其他input元素,line-height没有影响 取值 normal 取决于用户代理.桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family.(存在差异性) <number> 所用的值是无单位数值乘以元素的 font size.计算出来的值与使用数…

对于行高(line-height)的一些理解

刚一开始学习这个特性的时候,总是出一些当时看起来很奇怪的问题.现在决定重新整理一下.毕竟使用css,十行揉在一起凑出效果是一种使用,知道为什么会有这种效果也是一种使用.我们需要做一些测试,所以首先需要了解一下到底哪些DOM元素适合. 那我们第一个问题就来了. line-height可以应用于哪些元素 * line-height只影响行内元素,并不能直接应用于块级元素. * line-height 具有可继承性,块级元素的子元素会继承该特性,并且在行内元素上生效. 所以,我们在这里可以只考虑行内元…

CSS行高——line-height

学习资料 : http://www.cnblogs.com/dolphinX/p/3236686.html…

css中line-height行高的深入学习

之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html 该文章略有补充四种盒子) 顶线/中线/基本/底线    <!DOCTYPE html> <html> <head> <title>Test</title> <style type="t…

行高：line-height图文解析

行高——line-height 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</title>…

cssline-height行高 全解

1.  基线.底线.顶线 2.  行距.行高 3.  内容区 4.  行内框 5.  行框 元素对行高的影响 扩展阅读 1.  基线.底线.顶线 行高指的是文本行的基线间的距离. 基线并不是汉字的下端沿,而是英文字母"x"的下端沿 2.  行距.行高 3.  内容区 底线和顶线包裹的区域,实际中不一定看得到,但却是存在. 4.  行内框 行内框只是一个概念,它无法显示出来,但是它又确实存在 它的高度就是行高(这句话有问题,看http://www.cnblogs.com/youxin/p…

CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r 清除辅助线:  视图---辅助线----清除辅助线 放大镜  z   放大镜状态下alt+鼠标左键 缩小 抓手   快捷键   空格 测量距离      ★先拉出2根辅助线 再在抓手的状态下按下shift即可: CSS行高 line-height 浏览器默认文字大小: 浏览器默认文字大小: 16p…

在iOS中如何正确的实现行间距与行高

最近准备给 VirtualView-iOS 的文本元素新增一个 lineHeight 属性,以便和 VirtualView-Android配合时能更精确的保证双平台的一致性.面向 Google 以及 Stack Overflow 编程了一会后发现,能查到的资料大部分是介绍如何实现 lineSpacing 属性,而不是 lineHeight.但是我就是因为 iOS 和 Android 的默认 lineSpacing 不一致所以才想实现个 lineHeight 啊!还是需要自己动手丰衣足食,顺带整理…

css行高的用法总结

css没有提供一个直接设置行间距的方式,所以只能通过设置行高来间接的设置行间距,行高越大行间距就越大,用 line-height 来设置行高. .p1 { /* 设置行高 */ line-height: 40px; } 行高类似于上学时使用的单线本,单线本是一行一行的线,线与线之间的距离就是行高,网页中的文字实际上是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示. 行间距 = 行高 - 字体大小 line-height 可以设置的值的类型: 直接接收一个大小,如:line-height…

css - 行高

css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被转换为行内块的容器元素(比如转换为行内块的span.div).不继承行高的元素:img.原生的行内块(input.textarea等). 层叠性:按照css层叠特性,行高可以被覆盖 作用:设置容器里每一行文本的高度,使每一行具有上下间距.比如设父元素行高100,则它包含的每一行文本的最终高度都是10…

line-height行高与图片的隐匿文本间隙消除方法

(标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/) 1.块级元素(block_element)中插入一个内联块级元素(inline_block)img后,产生多余间隙 (间隙存在原因说明:对于内联块级元素img默认对齐方式是基线baseline, 可以想象在line-boxes行框盒子中存在出图片外的匿名inline-box盒子包裹文本.…

行高不设单位的好处 line-height:1.8

今天无意间看了到了line-height:1.8 感觉挺有意思的,然后翻了下行高的知识,发现还挺有文章的,不妨温故而知新. 先回顾下:顶线.中线.基线.底线 vertical-align是元素的垂直对齐方式,也依赖于这些线,分别有top(顶线对齐).middle(中线对齐).baseline(基线对齐).bottom(底线对齐) 行距与行高(文本行的基线间的距离): 为了更方便在效果图上测量行高数值,一般我会选择文字底到文字底这方式测量,与上图的高度是一样的. =================…

line-height 行高

line-height 行高指一行文字的高度,具体来说是指两行文子间基线间的距离      line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. 行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离. 行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离. 半行距是行距的一半,即区域3垂直距离/2,区域1,2,3,4的距离之和为行高,而区域1,2,4距离之和为字体si…

关于line-height 行高的一些理解和技巧

大家都知道,如何设置文字垂直居中,也就是:设置line-height 和 外围盒子的高度height一致: 其实这里有个地方,是多余的,也就是height,设不设置都居中: 那么,行高是生产高度的? 先上一个小问题:当div没有设置高度的情况下,撑开其高度是里面的文字吗? 答案是否定的,你可以试试,当你设置行高为line-height: 0; 的时候,div的高度还是0:事实证明,撑开div高度与其里面文字的行高有关系: 先理解下,inline box模型,其中有个line boxes,它是看不…