HTML 的width的简单研究

2022-10-09 02:03| 来源: 网络整理| 查看: 265

以前只是简单的写点html，没有真正的写过项目。最近公司给安排了点h5的活。在布局的过程中，发现子标签同时包含百分比和px，px具体像素有时候会失效，特此研究下，看看两者具体啥关系。

图1

图2

如上图1和图2，我们要求左边的宽度线可变，而要求右边文字的宽度一定，数字保持对其，文字保持对其。

高手这种布局高手略过，菜鸟布局

.KCERDIncomeDetail{ background-color: #f6faff; padding-top: 20px; padding-left: 25px; padding-bottom: 20px; /* padding-right: 18px; */ } .KCERDIncomeDetailItem{ display: flex; flex-direction: row; align-items: center;; justify-content: space-between; } .KCERDIncomeDetailGraphLength{ width: 100%; height: 10px; margin-top: 7px; margin-bottom: 8px; } .KCERDIncomeDetailGraph{ height: 10px; border-radius: 5px; } .KCERDIncomeDetailNameLength{ display: flex; align-items: center;; flex-direction: row; width: 150px; } .KCERDIncomeDetailName{ font-size: 9px; margin-left: 20px; color: #606060; width: 45px; } .KCERDIncomeDetailPrice{ font-size: 13px; margin-left: 10px; margin-right: 10px; width: 75px; color: #242424; } 电子支付240680.00 现金2400.00 现金240680.00 现金2.00 现金280.00 现金240680.00 现金2480.00 现金240680.00 现金24680.00

进度条的宽度类是

.KCERDIncomeDetailGraphLength{ width: 100%; height: 10px; margin-top: 7px; margin-bottom: 8px; }

而文字和价格类是

.KCERDIncomeDetailNameLength{ display: flex; align-items: center;; flex-direction: row; width: 150px; } .KCERDIncomeDetailName{ font-size: 9px; margin-left: 20px; color: #606060; width: 45px; } .KCERDIncomeDetailPrice{ font-size: 13px; margin-left: 10px; margin-right: 10px; width: 75px; color: #242424; }

这里我们进度条的宽度设置的是100%。而文字和价格的总宽度设置的是150px。这里我们要是去掉KCERDIncomeDetailName 和 KCERDIncomeDetailPrice 的width会发生什么呢？

去掉width 窄屏幕

去掉width 宽屏幕

这里我们发现了电子支付变成两行或者后面的价格不对齐了。但是文字和价格的在一起的总长度的每项长度不变，但是总长度在变化。（拖动html文件的窗口大小观察）

因此我们这里再把KCERDIncomeDetailName 的width=45px;

KCERDIncomeDetailName 的width=45

发现文本和价格完全不对齐了。将文本的颜色变成蓝色。我们发现如下

image.png

发现文字的宽度不变，而价格的宽度自适应了，相应的super div也跟着自适应了（我们设置的是width=150px）

总结如下：在多个子标签中对子标签使用width属性，要是子标签的width同时包含百分比和具体长度。分情况如下：

具体长度(px)的子标签没有child的：那么长度是定宽的。具体长度(px)的子标签有child的：具体长度取决于child的布局；

具体长度(px)的子标签有child的,但是child没有具体布局，那么，长度是具体长度(px)的子标签有child的,但是child自有布局指定的长度。具体长度(px)的子标签有child的,但是child 具有布局，但是不是确定的，那么长度是可变的。具体长度(px)的子标签有child的,但是child 具有布局，也确定了。那么长度是不变的。

【本文地址】

公司简介

联系我们