min-width

版本：CSS2，设置或检索对象的最小宽度。

语法：min-width：length | percentage

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

length：用长度值来定义最小宽度，不允许负值

percentage：用百分比来定义最小宽度，不允许负值

max-width

版本：CSS2 ，设置或检索对象的最大宽度。

语法：max-width：length | percentage | none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

none：无最大宽度限制（默认值）

length：用长度值来定义最大宽度，不允许负值

percentage：用百分比来定义最大宽度，不允许负值

min-height

版本：CSS2 ，检索或设置对象的最小高度。

语法：min-height：length | percentage

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

length：用长度值来定义最小高度，不允许负值

percentage：用百分比来定义最小高度。不允许负值

max-height

版本：CSS2 ，检索或设置对象的最大高度。

语法：max-height：length | percentage | none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 | 时

none：无最小高度限制（默认值）

length：用长度值来定义最大高度，不允许负值

percentage：用百分比来定义最大高度，不允许负值

编码示例

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8"/>
<title>visibility 样式</title>
<style>/*div1宽高为100px，图片宽高为 80px,默认图片没有填满 div1*/.div1 {width: 100px;height: 100px;background-color: #1b6d85;float: left;}/*div2宽高为100px，图片宽高为 80px,设置图片最小宽高为父容器的宽高，所以会拉伸进行填满*/.div2 {width: 100px;height: 100px;background-color: #1b6d85;float: left;margin-left: 200px;}.div2 img {/*min-width 与 min-width 只设置其中一个时，另一个会等比例进行缩放*/min-width: 100%;min-width: 100%;}/*div3宽高为50px，图片宽高为80px,设置图片最大宽高为父容器的宽高，所以会压缩进行填满*/.div3 {width: 50px;height: 50px;background-color: #1b6d85;float: left;margin-left: 200px;}.div3 img {/*max-width 与 max-height 只设置其中一个时，另一个会等比例进行缩放*/max-width: 100%;}
</style>
</head>
<body>
<div class="div1">
<img src="../image/1.png">
</div>
<div class="div2">
<img src="../image/1.png">
</div>
<div class="div3">
<img src="../image/1.png">
</div>
</body>
</html>

min-width_min-height_max-width_max-height 设置元素最小或最大长度相关推荐

jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
jQuery获取和设置元素
本篇文章聊聊如何使用jQuery获取和设置元素内容与值. 一.获取和设置元素内容在 jQuery 中,操作元素内容的方法包括 html() 和 text().前者与 JavaScript 中的 in ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
设置元素的宽和高元素的left和top 元素卷曲出去的值为元素绑定事件
设置元素的宽和高 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
点击按钮设置某个元素的标签内容 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
dom元素滚动条高度 js_javascript 设置元素滚动大小
3. 滚动大小最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...

min-width_min-height_max-width_max-height 设置元素最小或最大长度

min-width

max-width

min-height

max-height

编码示例

min-width_min-height_max-width_max-height 设置元素最小或最大长度相关推荐

最新文章

热门文章