html中ch是什么单位,【CSS】ch（单位名称）

微信订阅号：Rabbit_svip

ch应该是一个鲜为人知的计算单位。

ch是一个相对于数字0的大小。

1ch 就是数字 0 的宽度。

比如定义一个3ch的宽度，那么久只能装下3个0。

0000

/* CSS代码 */

div {

width: 3ch;

background: powderblue;

}

微信订阅号：Rabbit_svip

重复一次：1ch 等于一个 0 的宽度！宽度！宽度！

注意，是0的宽度，和0的高度无关。

比如

/* CSS代码 */

div {

width: 6ch;

height: 6ch;

background: powderblue;

}

微信订阅号：Rabbit_svip

可以看到，是一个正方形，因为ch只等于0的宽度。

ch还有另一个规则：

1ch = 1个英文 = 1个数字

2ch = 1个中文

ch 是一个相对单位，所谓相对，意思是 ch 会根据当前容器的 ****font-size**** 变化而变化。

如果字体不是等宽字体，这时的ch看起来就不止是一个英文字母的宽度了。

比如

llllllllllllllll

/* CSS代码 */

div {

width: 8ch;

background-color: powderblue;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

font-size: 50px;

}

微信订阅号：Rabbit_svip

可以看到，16个小写L，并没有超出8ch。

同时，如果容器中的内容是中英文结合的话，用ch做长度单也不是那么好使。

上面用到的几个CSS属性，是用来控制如果内容超出容器，就用省略号显示超出的部分。【CSS】省略号

ch一般很少用得上，因为使用规则可能稍微有点复杂，而且通常需要 js 配合使用。

一般都会用em来代替ch~

html中ch是什么单位,【CSS】ch（单位名称）相关推荐

vw css什么单位,CSS vw单位
vw单位 vw是css的一个属性,和px,rem等类似,属于长度单位. 在浏览器中, 1 vw = viewport 的宽度 /100 根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于 ...
css font size 单位,css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
CSS的单位及css3的calc()及line-height百分比
说在前面的话阳历2014年已经离我们远去,2015年接踵而来.祝大家新年快乐!在新的一年,我将有新的蜕变!这是2015年的第一篇文章,写一篇关于css的单位的文章吧! 单位介绍说到css的单位,大 ...
移动H5开发入门知识，CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
字体单位 html,CSS字体单位
一.前言在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一.在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示.那么这4种单位哪一种更适合呢?这个问题引发 ...
关于JS下offsetLeft，style.left，以及jquery中的offset().left，css(left)的区别。
最近因为工作需要,仔细研究了一下关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别. JS下的off ...
css vw单位_使用CSS vw单位创建完美的响应形状
css vw单位 As page layouts become more complex, developers require access to a greater range of measur ...
css样式中的vw什么意思,css中vw是什么意思？
在css中,vw是一种视窗单位,也是相对单位.相对于视口的宽度,视口被均分为100单位的vw. 在css中,vw是一种视窗单位,也是相对单位.相对于视口的宽度,视口被均分为100单位的vw.下面本篇文 ...
html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘要信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...

html中ch是什么单位,【CSS】ch（单位名称）

html中ch是什么单位,【CSS】ch（单位名称）相关推荐

最新文章

热门文章