CSS宽度问题

一、魔法

为 DOM 设置宽度有哪些方式呢?最常用的是配置width属性,width属性在配置时,也有多种方式:

  • width
  • min-width
  • max-width

通常当配置了 width 时,不会再配置min-width max-width,如果将这三者混合使用,会有什么魔法效果呢?

测试代码:

html 复制代码
<style>
  .box {
    display: inline-block;
    border: 1px solid #e8e8e8;
    min-width: 200px;
    width: 100px;
    max-width: 300px;
  }
</style>

<div class="box">sdsd</div>
min-width width max-width 盒子最终宽度
200px 最小宽度 200px
100px 定宽 100px
300px 最大宽度 300px
200px 100px 定宽 Max(min-width, width)
100px 300px 定宽 Min(width, max-width)
200px 100px 300px 定宽 Max(min-width, width)

二、应用

ElementUI 的组件 Select,当可选项的文本较长时,弹框也会跟着扩增宽度,因为它只设置了min-width属性。

提出需求,当可选项的文本过长时,以省略号展示,不运行弹框宽度增加。

此时可以应用上述的规则,为弹框添加一个width: 0px即可

相关推荐
北海-cherish4 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist6 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端7 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友8 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端