效果图:
核心点:
宽度自适应 width
默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽
如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定
相关介绍: MDN
resize 生效的条件: 不支持内联元素; 块级元素,需要overflow属性的计算值不是visible。
整体布局
content
基础知识, 拉伸区域的实现, 右下角出现可拉伸图标
.content {
width: 200px;
height: 200px;
resize: horizontal;
cursor: ew-resize;
overflow: hidden; // 必须要配合overflow来使用resize, 否则拉伸图标无法显示
border: 1px solid red;
}
content
限制拉伸尺寸
通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。
所有代码
Document
content
层级图
页面更新:2024-04-09
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号