-
2021-08-04 06:26:04
代码1：
【◇ 一月送你一个吉祥 ◇】
【◇ 二月送你一个如意 ◇】
【◇ 三月送你一个快乐 ◇】
【◇ 四月送你一个欢喜 ◇】
【◇ 五月送你一个健康 ◇】
【◇ 六月送你一个福气 ◇】
【◇ 七月送你一个温暖 ◇】
【◇ 八月送你一个甜蜜 ◇】
【◇ 九月送你一个兴旺 ◇】
【◇ 十月送你一个顺利 ◇】
【◇ 十一送你一个聪明 ◇】
【◇ 十二送你一个富裕 ◇】
【◇ 祝愿朋友四季安康 ◇】
【◇ 祝愿朋友一生幸福 ◇】
代码2：
【◇ 一月送你一个吉祥 ◇】
【◇ 二月送你一个如意 ◇】
【◇ 三月送你一个快乐 ◇】
【◇ 四月送你一个欢喜 ◇】
【◇ 五月送你一个健康 ◇】
【◇ 六月送你一个福气 ◇】
【◇ 七月送你一个温暖 ◇】
【◇ 八月送你一个甜蜜 ◇】
【◇ 九月送你一个兴旺 ◇】
【◇ 十月送你一个顺利 ◇】
【◇ 十一送你一个聪明 ◇】
【◇ 十二送你一个富裕 ◇】
【◇ 祝愿朋友四季安康 ◇】
【◇ 祝愿朋友一生幸福 ◇】
代码解析：
请看上面的两段文字代码：第一段行高设置为line-height: 1em，第二段行高设置为line-height: 1.5em，比较一下两段文字中两行文字之间的间距，体会设置不同行高的不同显示效果。
更多相关内容 -
css控制文本的行高
2021-12-31 15:21:36line-height可以控制文本的行高 示例 <p> 这是一个标准行高的段落。 在大多数浏览器默认行高约20 px。 这是一个标准行高的段落。 这是一个标准行高的段落。 </p> <p class="p1"> 这是一个更小...展开全文line-height可以控制文本的行高
示例
<p>
这是一个标准行高的段落。
在大多数浏览器默认行高约20 px。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p><p class="p1">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p><p class="p2">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>
<p class="p3">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p><p class="p4">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>
<p class="p5">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p><p class="p6">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>样式
.p1 { line-height: 10px } .p2 { line-height: 30px } .p3 { line-height: 0.5 } .p4 { line-height: 2 } .p5 { line-height: 50% } .p6 { line-height: 200% }效果
这里给出了三种设置行高的方式，
数字：默认是1，0.5表示缩小一半的行距，2表示扩大两倍
像素值：一般默认行距为20px左右，10px大概是一半行距，40像素大概是2倍行距。
百分比：50%指的是一半行距，200%表示扩大两倍 。
-
css设定行高、绝对定位
2021-08-04 06:27:21设定行高2种方式使用width、height(假定现宽38,高22 ；目标宽70，高30).welcome{width: 70px;height: 30px;line-height: 30px;text-align: center;}使用padding.welcome{padding: 4px 16px;line-height: 22px;}补充...展开全文设定行高2种方式
使用width、height(假定现宽38,高22 ；目标宽70，高30)
.welcome{
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}
使用padding
.welcome{
padding: 4px 16px;
line-height: 22px;
}
补充：
使用width、height 时若文字发生变动会出现bug(显示不全)
使用padding时，目标高度30px减现高度22px得出上下内边距为4px，左右同理；不同机器现行高可能存在差异，通过设置line-height固定值消除bug
绝对定位
思路：
子元素absolute
父元素relative
子元素相对于父元素定位
.welcome{
position: relative;
}
.welcome .triangle{
position: absolute;
left:4px；
top:100%；
}
补充：子元素位于父元素下方(使用top属性)，子元素相对于父元素移动(使用left)
综合应用
效果图：
代码：
.welcome{
background:red;
color:white;
padding:4px 16px;
line-height:22px;
position:relative;
}
.inner{
display:block;
border: 10px solid transparent;
width:0px;
border-left-color:red;
border-top-width:0px;
position:absolute;
left:6px;
top:100%;
}
Hello
-
CSS基础(22)_行高、文字简写属性、文本样式
2022-04-22 21:13:09行高、文字简写属性、文本样式展开全文行高(line height)
行高指的是文字占有的实际高度(包括字体框和文字上下空隙，相当于红格本红线之间的距离)。
行高设置：
1、可以直接指定一个大小(px em)。
2、也可以直接设置一个整数，如果是一个整数的话，行高将会是字体指定大小(字体框)的倍数。行高特性：
1、在大多数浏览器中，默认行高是20px;百分比的情况下是110%-120%。
2、行高经常用来设置文字的行间距。
3、行高会在字体框的上下平均分配。字体框(font-size)
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。单行文字垂直居中
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。文字的简写属性
font可以设置字体相关的所有属性：
语法：font：字重 字体风格 字体大小/行高 字体族;备注：
1、font-weight：字重,字体的加粗。可选值：nomarl默认值、不加粗。hold加粗、100-900九个级别(没什么用)
2、font-style：字体风格。可选值：normal正常的、italic斜体。
3、行高可以省略不写，如果不写使用默认值。
4、字重 字体风格的位置可以互换，也可忽略不写，如果不写使用默认值。<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>行高、文字简写属性、文本样式</title> <style> div{ /* 此时div默认高度是被内容撑开的，高度也是60px，此时文字之间行间距（60-30）/2*2=30px */ border: 1px red solid; font-size: 30px; line-height: 2; line-height: 60px; /* font中的font-weight和font-style属性为默认值，所以下面代码覆盖了上面的加粗和斜体效果*/ font-weight: bold; font-style: italic; font:30px/2 "微软雅黑"; } </style> </head> <body> <div>友情健康提示：每天早上<span>一杯水</span>，提神醒脑助消化。</div> </body> </html>
文本的水平和垂直对齐
text align 文本的水平对齐
可选值：
left 左侧对齐(默认值)
right 右侧对齐
center 居中对齐
justify 两端对齐vertical-align 元素的垂直对齐
可选值：
baseline 基线对齐(默认值)
top 顶部对齐
bottom 底部对齐
middle 居中对齐(和x字母的中线对齐)备注：
图片的垂直对齐默认是基线对齐，底部会有一段缝隙，可以设置vertical-align为middle或top、bottom来消除缝隙。在style标签内继续添加代码：
div { font: bold italic 30px/2 "微软雅黑"; } span{ font-size: 40px; color: darkgreen; /* 该垂直对齐为默认值，不设置也是这个效果 */ vertical-align: baseline; }效果图：
其他文本样式
text-decoration 设置文本修饰
可选值：
none 无(默认值)
underline 下划线
line-through 删除线
overline 上划线支持多属性一起写，如：text-decoration：underline red dotted;(此格式IE不支持)
/* 在以上代码中的span标签内添加样式： */ text-decoration: underline darkgreen solid;效果图：
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白text-overflow:ellipsis 文本溢出：省略号
/* 在以上div标签内添加样式：*/ div { font: bold italic 30px/2 "微软雅黑"; width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }效果图：
-
CSS之行高属性
2021-06-25 07:58:08一行文字的结束到上一行文字结束的间距：line-height 页面展示 程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&... -
【css】行高的计算
2020-11-23 19:32:25行高概念图 行高的计算 假设有如下代码 p { ...深入了解css的行高Line Height属性 真正的能理解CSS中的line-height，height与line-height [学习笔记] css中的line-height CSS line-height 属性 ... -
详解CSS行高
2021-08-04 05:57:57“行高”即CSS中line-height所描述的属性，它表示两行文字间基线之间的距离，不允许使用负值。在弄清行高之前，我们先来了解几个概念:顶线、中线、基线、底线上图所示线条从上到下为：12345678910vertical-align:top... -
CSS line-height行高上下居中垂直居中样式属性
2021-08-05 04:03:48常常使用line-height设置内容(图片、文字)行高上下居中样式效果。一、line-height行高语法line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%}line-height:+数字+单位(在CSS布局... -
css文本行高怎么设置-电脑自学网
2021-08-05 03:07:34最后通过div标签的class属性mybkkd设置文字上下的行高。本教程操作环境：windows7系统、css3版，DELL G3电脑。css文本行高的设置方法：1、我们新建一个html网页文件，把他命名为test.html，接下来我们用test.html... -
css属性行高line-height的用法详解
2020-12-13 16:19:10古时候我们使用印刷机来出来文字。印刷出来的每个字，都位于独立的一个块中。 行间距，即传说中控制两行文字垂直距离的东东。在CSS中，line-height被用来控制行与行之间垂直距离。 不过，行间距与半行间距，还是取决... -
CSS之行高(line-height)详解
2020-01-20 19:30:48行高(line-height) ...2.浏览器中默认文字行高为18px； 行高=文字大小+上下间距 1.通过设置文字的行高，改变的就是文字的上下间距。 ... -
CSS——行高、字体、文本的样式
2020-11-06 23:10:55一、行高 行高(line height) 行高指的是文字占有的实际高度 可以通过line-height来设置行高 行高可以直接指定一个大小（ex pm） 也可以设置一个整数 ... 行高经常用来设置文字的行间距 行间距等于行 -
P53-前端基础CSS-行高设置
2021-01-24 13:37:14P53-前端基础CSS-行高设置 1.概述 行高（line height） 行高指的是文字占有的实际高度 可以通过line-height来设置行高 行高可以直接指定一个大小（px em） 也可以直接为行高设置一个整数 如果是一个整数的话，... -
CSS设置行高文字不剧中的问题
2020-03-03 16:31:17通过在对象内增加一个元素（例如 span），将其字体设置 N倍大小，然后再通过scale 设置缩小N倍（将缩放中点设置为左边）。 这样严格来讲，文字其实还是没有剧中的。但是误差缩小为原来的 1/N了，肉眼基本看不出来了... -
CSS 设置了line-height等于行高之后文字未垂直居中
2021-04-04 23:21:29<body> 文字div> body> 上述代码的结果： 发现文字并没有垂直居中 文字垂直居中的原理： line-height(行高)=文字高度+上空隙+下空隙 （ 上空隙=下空隙） 当line-height=height 的时候 文字被挤到中间，就是垂直居中 ... -
CSS布局中设置字体文字大小值大于行高值.docx
2021-11-22 16:15:39CSS布局中设置字体文字大小值大于行高值.docx -
CSS教程：行高line-height属性(2)
2020-12-11 20:06:12相关文章：CSS教程：行高line-height属性(1) 7.3.3行高的计算与继承 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下： 字高20px，行高2em。</p> 字高30px，行高2em。 2个段落的行高都... -
CSS怎么控制行高？
2021-07-03 01:23:54要实现上下换行文字行间距行高样式其实我们只用对文字所在对象设置line-height样式即可，一般行距值设置大于14px以上即可，根据css字体大小，css行高值不能小于字体值，不然行距设置值比字体大小值小后字体会重叠一... -
【CSS】字体、行高、文本对齐
2022-06-07 10:54:28字体的样式 图标字体的应用 字体的简写属性 行高 文本的水平对齐和垂直对齐 如何将溢出的内容设置成省略号 -
css简单去除行高
2019-05-10 11:16:33思路： 标签行高设置为字体大小 // 例 div { font-size: 16px; line-height: 16px; } -
CSS继承之行高
2021-07-29 17:58:31css继承的行高继承 行高可以带单位，也可以不带单位，1.5表示，作用于继承的子元素的字体大小的1.5倍，此时div的行高就是1.5*16=24 <!DOCTYPE html> <html lang="en"> <head> <meta charset=... -
CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理
2021-11-06 17:43:19CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理：用pink老师的一张ppt就成让人一下子明白过来。 -
CSS 行高1.5与150%的区别
2021-09-26 10:40:41行高1.5 HTML结构 <div> 如果我是dj 你还爱我吗 </div> <p>嘿嘿嘿嘿嘿嘿嘿嘿<...CSS ... /* 子元素继承了父元素body的行高1.5 */ /* 这个1.5就是当前元素值文字大小font-siz -
深入了解css的行高Line Height属性
2021-06-14 00:50:09古时候我们是用印刷机来处理文字，印出来的每个字都位于独立的一个块里。行间距，即传说中控制两行文字之间垂直距离的东东。在CSS，line-height被用来控制行与行之间的垂直距离。不过行间距与半行间距还是取决于CSS... -
深入剖析 CSS：字体度量、行高和垂直对齐
2022-04-14 07:00:57它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。vertical-align 例如，可以设置为长度或无单位值line-height1，但默认值为 。好吧，但什么是正常的... -
CSS行高
2022-07-16 23:31:555.如果一个盒子中存储的是...3.在开发中常将盒子的高度和行高设置为一样，来保证。在css中所有的行都有自己的行高。2.文字在行高中默认是垂直居中的。1.行高和盒子高度不是一个概念。在盒子的高度中是垂直居中的。... -
div css文字字体行高行距 深入理解css行间距设置
2017-12-26 22:12:52div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置，字体行距如何最简单地设置。 在文章中，要实现调节设置每行文字字体间距（行距）是使用line-height属性。 要使得每行的文字一定的间距距离所以可以... -
【css】不设置行高，文字水平垂直居中显示
2017-12-06 16:22:24不过要注意一个问题：当.box被绝对定位的时候，文字无法垂直居中，但是相对定位仍然可以垂直居中。 既是当 .box 加上 position:absolute; 的时候，无法垂直居中。 当.box 加上 position:relative; 的时候，...
