发表于: 2019-09-27 17:55:28

1 857


今天完成的事件


解决文字居中学到line-height属性:定义行高的。

用它解决文字垂直居中的问题。

百度解释行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半,分别加到一个文本行内容的顶部和底部,可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)。表示有点不太理解。

但如果你想用这个解决文字垂直居中的话,那么你的父类最好设有高的值,用line-height上父类高一样的值就可以实现垂直居中效果如下。

代码如下:

displayblock;
font-size20px;
color#ffffff;
text-aligncenter;
height80%;
width100%;
line-height:50px;
border1px solid #fbb435;
background-color#fbb435;



遇到问题  

文字中间的空格不知道怎么弄的,

百度了下

 

即不换行空格,全称No-Break Space,是最常见且使用最多的空格。HTML字符值引用为:  ,宽度受字体影响明显而强烈

 

即“半角空格”,全称En Space,en是字体排印学的计量单位,为em宽度的一半,即等同于字体度的一半。宽度正好是1/2个中文宽度,而且基本上不受字体影响

 

即“全角空格”,全称Em Space,em是字体排印学的计量单位。宽度正好是1个中文宽度,而且基本上不受字体影响

 

即“窄空格”,全称Thin Space。宽度仅为em的六分之一

‌

即“零宽不连字”,全称Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,并以这两个字符原本的字形来绘制。其Unicode码位为:U+200C,HTML字符值引用为:‌。

‍

即“零宽连字”,全称Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。其Unicode码位为:U+200D,HTML字符值引用为:‍。

总的来说,html中的几种空格实体拥有不同的宽度,其中,非断行空格(&nbsp)是常规空格的宽度,可运行于所有主流浏览器。由于不同情况下,浏览器的em不同,所以其他几种空格(       ‌‍)在不同浏览器中宽度各异。 



代码如下:

<div class="C-box">

<span class="C-span-font">第1天&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span
class="C-span2-font">0小时07分</span></span>
<div class="C-div-font">晚上:5号被杀手杀死,5号是水民</div>
<div class="C-div-font">白天:8号被全民投死,8号是杀手</div>

</div>


效果如下

明天接着做任务7的底部 出了点小问题。



返回列表 返回列表
评论

    分享到