CSS 小数 处理

最新推荐文章于 2023-10-07 22:58:11 发布
最新推荐文章于 2023-10-07 22:58:11 发布
阅读量433 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/54855
版权

在不同浏览器或者同一浏览器的不同版本中，CSS 都会对小数进行取整（直接去除小数还是会根据小数的大小进行判断就不一定了）
测试代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .class1 {
            width: 10.1px;
            height: 10.8px;
            border: 0px;
            background-color: Black;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var div1 = document.getElementById("div1");
            var clientWidth = div1.clientWidth;
            var offsetWidth = div1.offsetWidth;
            var scrollWidth = div1.scrollWidth;
            var ul = document.createElement('ul');
            var oLi1 = document.createElement('li');
            oLi1.innerHTML = "div.clientWidth=" + clientWidth;
            ul.appendChild(oLi1);
            var oLi2 = document.createElement('li');
            oLi2.innerHTML = "div.offsetWidth=" + offsetWidth;
            ul.appendChild(oLi2);
            var oLi3 = document.createElement('li');
            oLi3.innerHTML = "div.scrollWidth=" + scrollWidth;
            ul.appendChild(oLi3);


            var clientHeight = div1.clientHeight;
            var offsetHeight = div1.offsetHeight;
            var scrollHeight = div1.scrollHeight;
            var oLi4 = document.createElement('li');
            oLi4.innerHTML = "div.clientHeight=" + clientHeight;
            ul.appendChild(oLi4);
            var oLi5 = document.createElement('li');
            oLi5.innerHTML = "div.offsetHeight=" + offsetHeight;
            ul.appendChild(oLi5);
            var oLi6 = document.createElement('li');
            oLi6.innerHTML = "div.scrollHeight=" + scrollHeight;
            ul.appendChild(oLi6);
            div1.appendChild(ul);            
        }
    </script>
</head>
<body>
    <div id="div1" class="class1">
    </div>
</body>
</html>

测试结果：
这里写图片描述
这里写图片描述
这里写图片描述

作者：jiankunking 出处：http://blog.csdn.net/jiankunking

weixin_34043301
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS letter-spacing 属性
shengyin714959的博客
09-13 438
letter-spacing 属性增加或减少字符间的空白（字符间距）默认值：normal继承：yes版本：CSS1object。
浏览器对css小数点的处理
weixin_33676492的博客
01-07 1080
近期在开发的时候遇到一个奇怪的问题，如下图(ios系统，android暂未发现)，第一个和第三个子元素中的角标与父元素始终有一条缝隙，但是第二个没有，因为第一次遇到，没有意识到是小数点的问题，然后从头到尾重新看了相关的样式，布局，设置都没有问题，但是那条缝又明明确确的在那儿 核心代码： ul { display: flex; ...
浏览器对CSS小数点的解析——坑
weixin_33779515的博客
03-08 1489
在写移动端项目时，为了将一个元素垂直居中，于是我将元素的高和行高设置成一样的，但是显示出来的结果，却让人不得其解，如下： 可以看到按钮的底部有一条缝隙，一开始以为是代码写错了，于是检查了一下，发现没啥问题，代码长下面这样。 &lt;footer&gt; &lt;a href="javascript:;" class="submit"&gt;提交订单&lt;/a&gt; &lt;/foot...
css 保留两位小数,css – 在样式表规则中解释小数点后的位数？
weixin_36282765的博客
08-03 1447
所以最近我偶然发现了this answer’s CSS：larger {width: 66.66666666%;}smaller {width: 33.333333333%;}这让我想到：使用样式表的浏览器真正解释了多少位数？因为在Chrome中使用4位数时我没有看到差异.CSS：body,div {width: 100%;min-height:2em;margin:0px;padding:0px...
CSS文本超出显示小数点
最新发布
宝子的博客
10-07 2046
webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式。display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示。接着，使用-webkit-box-orient。然后，使用-webkit-line-clamp。属性配合-webkit-line-clamp。属性限制元素内部的文本行数。
css入门笔记
05-15
aplha:透明度，0-1之间的小数，值越大，不透明度越高 5.#rgb 16位数字 ：0-9和a-f 2.尺寸属性 1.作用 改变元素的宽度和高度 2.语法 width:宽度 取值：px % min-width:最小宽度 max-width:最大宽度 height...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不...解决0.1，0.2，0.04 等数字计算结果的问题可以输入0.1*0.1打断点查看处理fang'f
postcss-pxtorem:px转rem，基于postcss
05-09
postcss-pxtorem 移动端px to rem 例如设计师给出640px的设计稿，写css样式... //待处理文件or路径 相对路径 "files": ["./css/a.css", "./css/"], //默认根目录字体大小(px) "root_value": 20, //保留小数位 "uni
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
6.4.htm 将一个小数四舍五入到指定位数 6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8....
NumericUpDownLib:实现数字向下WPF控件，以使用文本框和可选的向上箭头（重复）按钮来编辑显示值（字节，整数，short，ushort等）。 可以通过水平水平垂直拖动鼠标，单击向上按钮，使用向上或向左或向右光标键，在鼠标悬停时旋转鼠标滚轮或编辑文本框来进行值编辑
05-25
概述 该库实现WPF控件上下数字编辑值： 通过垂直/水平拖动鼠标（请参见下面的记录）或 ...后端视图模型处理[0-1]值时，可以在[0-100]处编辑百分比，请参阅项目站点演示客户端中的FactorToDoubleConverter和Percentag
html css保留两位小数点,html – 使图像在文本后面,并使用css将其保留在中央
weixin_31792645的博客
06-15 913
我正在创建一个网页,我有一个图像,我想放在中心,然后在该图像的顶部,我想要有输入框和标签和提交按钮.我试图使用cssimg.center{z-index:-1;}但这不行.当我将代码更改为img.center{position:absolute;left:0px;top:0px;z-index:-1;}如果使图像落后,但是,因为我使用左：0px和顶部：0px …它将图像放在位置0,0 ..但我想让...
css li修改小圆点的颜色
qq_46617584的博客
09-19 1852
css li修改小圆点的颜色
金额小数点后面和前面字体大小不一致的实现
涂文远的博客
07-17 7554
核心代码： <TextView android:id="@+id/all_price" android:layout_width="wrap_content" android:layout_height="match_parent"
px 可以用小数(0.5px)
haibin_hu的专栏
07-01 6776
参考：https://segmentfault.com/q/1010000003053873在使用小数点时，也会存在一些浏览器解析差异的问题： .container{ width:10.9px; height:6.2px; } IE8 中会显示当前的宽度为11px，而在 IE7 会以10px进行显示； 所以对于小数点的使用不同浏览器会存在不同的解析方式：
CSS语法手册（三）文本填充，边框，边界和位置属性（一）
sugar88的学习收集专栏
08-01 1131
CSS语法手册（三）文本填充，边框，边界和位置属性（一） 转自:动态网制作指南 www.knowsky.com一、框填充属性1、padding-bottompadding-leftpadding-toppadding-right功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离。数值：长度 - 设置相对或绝对值。在数字后指定度量单位如下：mm, cm, in, pt, px, pc, ex
CSS像素设置为整数，渲染结果像素带有小数
weixin_30418341的博客
05-26 1014
今天进行网页设计学习时，CSS代码设计width:300px,但实际显示像素如下图所示为199.99px。 最后发现是浏览器运用了缩放，恢复100%的缩放后，像素显示为整数。 转载于:https://www.cnblogs.com/is-jackwen/p/10926244.html...
CSS
weixin_42617917的博客
05-03 178
简述盒子模型 box-sizing 有哪些属性，作用 box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度 盒子模型有四个边界： 内容边界 Content edge、 内边距边界 Padding Edge、 边框边界 Border Edge、 外边框边界 Margin Edge。 标准盒模型 box-sizing: content-box content-box: widt...
CSS定义li前小点( · )的样式
heyNewbie的博客
04-08 2510
语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | u..
css 保留两位小数
09-13
### 回答1： 在 CSS 中，可以使用 `toFixed()` 方法来保留数字的小数位数。例如，要保留一个数字为两位小数，可以使用以下代码： ``` .number { /* 保留两位小数 */ /* 四舍五入 */ /* 如果小数位数不够，补 0 */ /* 如果小数位数超过两位，截取前两位 */ /* 最终结果为两位小数 */ /* 注意：toFixed() 方法返回的是字符串类型，需要使用 Number() 方法将字符串转换为数字类型 */ font-size: 16px; color: #333; padding: 10px; } .number::before { content: attr(data-number) " -> "; } .number::after { content: Number(attr(data-number)).toFixed(2); color: #f00; } ``` HTML 代码： ``` <div class="number" data-number="3.1415926"></div> ``` 效果： ``` 3.1415926 -> 3.14 ``` ### 回答2： 在CSS中保留两位小数可以使用css的数字函数`number()`结合属性值的单位。可以使用以下方法来实现保留两位小数的效果。 首先，确保你要应用此效果的属性值是一个数字或者可以转换成数字的值。然后，将该属性值使用`number()`函数进行包裹，如`number(属性值)`。 例如，你想将一个长度值保留两位小数，可以这样写： ```css div { width: number(200px); } ``` 这样就会将`200px`转换成`200.00px`。 同样，你可以使用此方法来保留其他数字属性值的小数位数，如`opacity`、`font-size`等等。 需要注意的是，此方法只会在输出时显示保留两位小数的效果，实际上属性值仍然是一个数字。如果需要在计算中使用保留小数的效果，请使用其他方法进行处理，比如使用JavaScript来进行四舍五入或者保留小数位数的操作。 ### 回答3： CSS中可以通过使用`toFixed()`函数来保留两位小数。可以通过以下代码来实现： ```css .selector { property: value.toFixed(2); } ``` 其中，`.selector`是你要应用该规则的元素选择器。`property`是要设置的CSS属性名，`value`是具体的数值。 例如，如果你想将一个元素的宽度设置为10.456，你可以使用以下代码： ```css .element { width: 10.456.toFixed(2); } ``` 这样，元素的宽度将会被设置为10.46。 需要注意的是，`toFixed()`返回的是一个字符串，而不是一个数值。所以在使用的时候需要注意确保该属性必须接受字符串值，比如`width`、`font-size`等。如果属性需要接受数值类型的值，你可以使用其他方法来处理，比如使用JavaScript来动态生成CSS，或者使用CSS预处理器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值