您现在的位置是：网站首页> 编程资料编程资料
CSS中行间距问题示例探讨CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
2021-09-06
975人已围观
简介 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值，今天了解到了一条相关知识， 明白这个方法的实现原理。在此与大家分享下
高度给定的元素, 其内部单行文本垂直居中的一种实现方式为: 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值。
今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现两行文本的间距, 并非等于line-height的值.
浏览器计算和分配行间距的方法
间距 ="line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)
逻辑上如此无懈可击~ o.0
小知识点(济宁网站建设认为, 应该这样)
"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于,line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距。若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题。
看下边的例子
Line-heighg demo
line-height:24px;
line-height:24px;
line-height:2;
line-height:2;
今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现两行文本的间距, 并非等于line-height的值.
浏览器计算和分配行间距的方法
间距 ="line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)
逻辑上如此无懈可击~ o.0
小知识点(济宁网站建设认为, 应该这样)
"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于,line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距。若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题。
看下边的例子
复制代码
代码如下:line-height:24px;
line-height:24px;
line-height:2;
line-height:2;
相关内容
- div 的边框显示不同效果示例代码设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- 使用CSS格式化页面布局示例(附图)CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9CSS3+DIV实现漂亮的动画彩色标签HTML5 SVG和CSS3实现的表单浮动标签特效源码仅6个span标签实现的纯CSS3动态Loading加载特效源码jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效纯css3实现的tab标签(无图片)CSS3的几个标签速记(推荐)
- float元素浮动后高度不一致导致错位的解决办方法理解CSS浮动float、定位positioncss浮动(float/clear)使用讲解清除浮动(float)的影响介绍
- JS/CSS压缩工具(YUI Compressor)使用方法JS与css 压缩工具 yuicompressor
- css页面中常见左中右分栏布局的两种实现方式用纯CSS实现容器内图片上下左右居中css实现div内图片上下左右居中css页面左中右分栏布局示例详解css布局实现左中右布局的5种方式
- div+css实现圆角即网页上常用的圆角效果设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- IE7 float:left左浮动失效的解决方法浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- CSS实现的div悬浮框并且兼容IE6的样式CSS鼠标悬浮DIV后显示DIV外的按钮解决方法纯CSS结合DIV实现的右侧底部简洁悬浮效果采用CSS定位属性实现Html中DIV层叠与悬浮纯CSS实现DIV悬浮的示例代码(固定位置)
- a标签样式 和 a标签属性写法html5 的a标签 Href 拨电话的写法a标签伪类的作用及书写顺序是什么CSS中a标签样式的“爱恨”原则：定义链接样式的四个伪类去掉a标签超链接的虚线框的方法有关于a标签的4个伪类的使用方法
