css总结6:行高和字体大小的关系

1 CSS line-height 属性

代码:

p.small {line-height:70%}
p.big {line-height:200%}

运行后:70%与200%宽高

2 CSS font-size 属性

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}

两者特点:

1 一行文字行高和父元素高度一致的时候,垂直居中显示

2 行高:文字高度+上下边距

原文地址:https://www.cnblogs.com/autoXingJY/p/8598311.html

时间: 2024-10-08 13:19:33

css总结6:行高和字体大小的关系的相关文章

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

之前对css中行高的理解还是有些肤浅,深入后才发觉里面内有乾坤.学习line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html) 顶线/中线/基本/底线 <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > span { pa

CSS中字距,词距,首行缩进,字体大小,排版相关问题的探讨

先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也不大. div{ border: 1px solid black; color: red; font-size: 14px; } <div>文字,咋,排-hello Spacing</div> 就是这么简单的页面.显示结果如下 汉字占的地方是绿色部分是宽14px,高14px 英文字符占

第七天-css基础(行高,盒子模型,边距)

摘要: 基础知识-css第七天,昨天因为同学的婚礼,所以没有整理,今天继续,今天是css基础的最后一天,知识点不多也不难,主要是后期多练习,巩固前面学习的知识.还有2个案例的时候视频,下周学习.下周也要开启js基础的模式,敬请期待吧-- line-height 行高 行高是基线与基线的距离(浏览器默认字体16px) 行高=文字高度+上下边距 单行文字垂直居中 设置容器高度和line-height值相等 多行文字垂直居中 1.高度固定容器:自己设置上下padding值相等就ok了 2.高度未知容器

《转载》深入理解 CSS 中的行高与基线

这篇文章总结的很好,故转载收藏. 1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行

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

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

深入理解 CSS 中的行高与基线

百度面试直接被面试官问住了,回来总结下css 行高相关问题! 1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母"x"的下端沿. 2. 内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高 行高(line-height):包括内容区与以内容区

Python+PyCharm的一些基本设置:安装使用、注册码、显示行号、字体大小和快捷键等常用设置

一 下载与安装 软件下载,软件文档下载:http://www.jetbrains.com/pycharm/download/ 如下图: 官方网站下载:http://www.oschina.net/p/pycharm 此外本人提供网盘下载,这个版本无需破解,下载安装即可使用:http://pan.baidu.com/s/1c2INnRM 二 注册码 注册码转自:http://www.cnblogs.com/zdz8207/p/python_learn_note_18.html PyCharm4注册

ListControl 设置表格行高与字体

设置行高: CImageList   m_l; m_l.Create(1,18,TRUE|ILC_COLOR32,1,0);   listCtrl.SetImageList(&m_l,LVSIL_SMALL); 设置字体: CFont m_font; m_font.CreatePointFont(50, "新宋体"); m_listCtrl.SetFont(&m_font); 原文地址:https://www.cnblogs.com/qingtian224/p/9248

标题大小与字体大小的关系

<h1>这是1号标题</h1><font size="6">这是6号字体文本</font> <h2>这是2号标题</h2><font size="5">这是5号字体文本</font> <h3>这是3号标题</h3><font size="4">这是4号字体文本</font> <h4>这是4号标