[ css 深入理解 inline box 模型中line boxes ] css中深入理解line-height(行高)产生的原因:看不见的 line boxes

  到底这个line-height行高怎么就产生了高度呢:

  在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

  其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。则line boxes的高度就是40像素了

时间: 2024-10-11 04:27:35

[ css 深入理解 inline box 模型中line boxes ] css中深入理解line-height(行高)产生的原因:看不见的 line boxes的相关文章

mysql中的回车换行,jtable换行,自动调整行高,列宽&#160;\r&#160;\n&#160;&lt;br/&gt;

两个问题: 1.mysql里不支持换行,textarea里的回车传入后再传出来就变成了空格. 2.JTable的render默认是继承jlabel的,不支持换行显示. 为了实现换行,一种方法是新写个render继承jtextarea,但是这样了之后不好设自动调整列宽,行高不能根据回车调整,也调的不准,而且超级卡...这种方法代码可以自己网上搜. 下面介绍第二种方法:默认的render不支持换行显示,我们先实现让单元格可以换行.我们在某一个单元格的value前面加上,末尾加,中间要要换行的地方加

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

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

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

by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意思"行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle

【转】深入理解java内存模型

提纲 java线程之间的通信对程序员完全透明,内存可见性问题很容易困扰java程序员,本文试图揭开java内存模型神秘的面纱.本文大致分三部分:重排序与顺序一致性:三个同步原语(lock,volatile,final)的内存语义,重排序规则及在处理器中的实现:java内存模型的设计目标,及其与处理器内存模型和顺序一致性内存模型的关系. 深入理解java内存模型(一)——基础 深入理解java内存模型(二)——重排序 深入理解java内存模型(三)——顺序一致性 深入理解java内存模型(四)——

java内存模型(二)深入理解java内存模型的系列好文

深入理解java内存模型(一)--基础 深入理解java内存模型(二)--重排序 深入理解java内存模型(三)--顺序一致性 深入理解java内存模型(四)--volatile 深入理解java内存模型(五)--锁 深入理解java内存模型(六)--final 深入理解java内存模型(七)--总结 原文地址:https://www.cnblogs.com/jinggod/p/8495490.html

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

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

CSS line-height行高上下居中垂直居中样式属性

DIV CSS line-height行高上下居中属性教程篇常常使用line-height设置内容(图片.文字)行高上下居中样式效果.行高line-height目录(音乐放松椅)line-height行高语法行高应用line-height案例line-height总结一.line-height行高语法 - TOP line-height:22pxdiv{line-height:22px} linet-height样式属性解析图(音乐放松椅)line-height:+数字+单位(在CSS布局中我们

CSS在显示行高不一的问题解决方法

相信很多朋友在写CSS的时候都会遇到过这样的问题:英文字母和汉字的行高不一样,导致在全汉字.全英文字母以及汉字字母混合时设置好的margin或 padding 属性出现偏差. 当然这种情况之存在于IE浏览器,Safari.Google Chrome.Firefox.Opera均不存在类似的问题. 产生的原因: 1.全汉字的时候: 一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用css术语讲就是产生了padding-bottom属性,为了说明问题暂且就

电脑桌面上的CAD图纸在CAD中打开看不见内容怎么办?

电脑桌面上的CAD图纸在CAD中打开看不见内容怎么办?在日常的工作中,我们在编辑CAD图纸的时候会遇到非常多的问题,有的时候把编辑完成的CAD图纸下载到电脑桌面上在CAD中打开之后就看不见内容怎么办?这是怎么回事了?具体要怎么来进行操作?是哪里出现问题了吗?下面我们就来一起看看解决办法吧! 第一步:首先,在电脑中的任意一个浏览器中搜索迅捷CAD编辑器,进入到迅捷CAD官网,点击下载最新版本的迅捷CAD编辑器,然后双击打开CAD编辑器,进入到软件的操作界面. 第二步:进入到软件的操作界面之后,鼠标