css中行高指的是什么

  介绍

小编给大家分享一下css中行高指的是什么,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

行高是包括内容区与以内容区为基础对称拓展的空白区域,一般情况下,也可以认为是相邻文本行基线间的垂直距离。在css中可以使用行高属性设置行高;该属性设置行间的距离(行高),不允许使用负值。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> 1。,基线,底线、顶线

 css中行高指的是什么

<李>

行高是包括内容区与以内容区为基础对称拓展的空白区域,一般情况下,也可以认为是相邻文本行基线间的垂直距离。

<李>

基线并不是汉字的下端沿,而是英文字母“x"的下端沿

<强> 2。,行距,行高

 css中行高指的是什么

<强> 3。,内容区

 css中行高指的是什么

<李>

底线和顶线包裹的区域,实际中不一定看得到,但却是存在。

<强> 4。,行内框

 css中行高指的是什么

<李>

行内框只是一个概念,它无法显示出来,但是它又确实存在

<李>

它的高度就是行高

<李>

在没有其他因素(填充)影响的时候,行内框等于内容区域

<强> 5。,行框

 css中行高指的是什么

<李>

行框(线框)。同行内框类似,行框是指本行的一个虚拟的矩形框

<李>

行框高度等于本行内所有元素中行高最大的值

<强>元素对行高的影响

<李>

对于行内元素如em,强劲、跨度和等,其填充、保证金,border-top,边界底部不会增加行高。
填充会覆盖,保证金将重置为0;border-top和边界底部同样会覆盖。
padding-left padding-right, border-left和边境可用。

<李>

img元素会影响行高

<李>

设置行内元素的填充、边界和保证金并不会撑大外层元素的高度,如下图: css中行高指的是什么

<强> 6。,设置行高

在CSS中我们可以使用行高属性来设置行高.line-height属性可用于设置行间的距离(行高),不允许使用负值。

行高属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

行高与字体大小的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

示例:

& lt; ! DOCTYPE  html>   & lt; html>      & lt; head>   & lt; meta  charset=皍tf-8"祝辞   & lt; style 类型=拔谋?css"比;   p.small  {   行高:90%   }      p.big  {   行高:200%   }   & lt;/style>   & lt;/head>      & lt; body>      & lt; p>   这是拥有标准行高的段落只在大多数浏览器中默认行高大约是,110%,到,又是120%;这是拥有标准行高的段落只这是拥有标准行高的段落只这是拥有标准行高的段落只这是拥有标准行高的段落只这是拥有标准行高的段落。   & lt;/p>      & lt; p 类=皊mall"祝辞   这个段落拥有更小的行高只这个段落拥有更小的行高只这个段落拥有更小的行高只这个段落拥有更小的行高只这个段落拥有更小的行高只这个段落拥有更小的行高只这个段落拥有更小的行高。   & lt;/p>      & lt; p 类=癰ig"祝辞   这个段落拥有更大的行高只这个段落拥有更大的行高只这个段落拥有更大的行高只这个段落拥有更大的行高只这个段落拥有更大的行高只这个段落拥有更大的行高只这个段落拥有更大的行高。   & lt;/p>      & lt;/body>      & lt;/html>

css中行高指的是什么