max-width:从字面意思可以看出,是规定元素本身最大宽度，元素本身宽度应小于等于最大宽度值。

min-width:从字面意思可以看出，是规定元素本身最小宽度，元素本身宽度应大于等于最小宽度值。

1、max-width

一般我们在布局时，不想要元素的宽度限定死，并且想要它的实际宽度随其本身内容自适应，但又不想宽度过大破坏整体布局，这个时候就会应用到max-width限制元素的最大宽度，元素实际宽度在0~max-width之间。

示例代码如下：

<!doctype html>

<html>

    <head>

        <style>

            .box1{max-width:100px;background:red;}
　　　　　　　.box2{max-width:800px;background:yellow;}
        </style>

    </head>

    <body>

	<div class="box1">你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码</div>
　　　　　<div class="box2">你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码</div>
    </body>

<html>

效果如下图：

从上图我们可以看出，当max-width的值大于内容实际宽度时，元素的宽度等于max-width值;当内容实际宽度大于max-width的值，元素的宽度等于max-width值。

2、min-width

一般我们在布局时，通常会用到min-width规定元素的最小宽度，以免元素宽度过小破坏整体布局.

示例代码如下：

<!doctype html>

<html>

    <head>

        <style>

	    div{display:inline-block;}

            .box1{min-width:100px;background:red;}

	    .box2{min-width:800px;background:yellow;}　　　　　　　

        </style>

    </head>

    <body>

	<div class="box1">你好我是示例代码你好我是示例代码你好我是示例代码你好我是

        示例代码你好我是示例代码</div>

　	<div class="box2">你好我是示例代码你好我是示例代码你好我是示例代码你好我是

        示例代码你好我是示例代码</div>

    </body>

<html>

效果如下图：

从上图我们可以看出，当min-width的值小于内容实际宽度时，元素的宽度等于min-width;当内容实际宽度小于max-width的值，元素的宽度等于min-width。

说明：max-height和min-height也是相同原理。

css中max-width和min-width的应用的更多相关文章

  1. 理解css中min-width和max-width，width与它们之间的区别联系

    css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...

  2. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  3. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  4. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  5. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  6. css中height, width默认值

    转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...

  7. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  8. table中的td限制宽度width也不能让字符过长变成省略号生效？

    table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...

  9. SQL中MAX()和MIN()函数的使用（比较字符串的大小）

    在SQL数据库中,最大/最小值函数—MAX()/MIN()是经常要用到的,下面就将为您分别介绍MAX()函数和MIN()函数的使用,供您参考,希望对您学习SQL数据库能有些帮助. 当需要了解一列中的最 ...

  10. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

随机推荐

  1. bootstrap 模态框日期控件datepicker被遮住问题的解决

    找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

  2. layui confirm

    layer.confirm('是否要删除信息!', { btn: ['确定', '取消'] }, function (index, layero) { //移除元素 $("#tr" ...

  3. icheck使用

    1.使用: <link rel="stylesheet" href="css/skins/all.css">或者<link rel=" ...

  4. tomcat多实例的部署

    解压部署tomcat程序创建2个实例的工作目录mkdir -p /usr/local/tomcat8_instance/tomcat1mkdir -p /usr/local/tomcat8_insta ...

  5. luogu P2852 [USACO06DEC]牛奶模式Milk Patterns 后缀数组 + Height数组 + 二分答案 + 扫描

    后缀数组有一个十分有趣的性质: $height[rk[i]] >= height[rk[i-1]] - 1$    Code: #include <bits/stdc++.h> #d ...

  6. 【airtest, python】报错：requests.exceptions.ConnectionError: ('Connection aborted.', ConnectionResetError(54, 'Connection reset by peer'))，解决方法如下

    环境及设备 mac, xcode , iphonex 问题 最近出现一个让人费解的问题,airtest 没跑多长时间,服务就断掉,而且总是报“requests.exceptions.Connectio ...

  7. 1016 部分A+B （15 分）

    正整数 AAA 的“DAD_AD​A​​(为 1 位整数)部分”定义为由 AAA 中所有 DAD_AD​A​​ 组成的新整数 PAP_AP​A​​.例如:给定 A=3862767A = 3862767 ...

  8. Python中的特殊方法：__call__

    本文结构: 1.__call__方法 2.callable():判断对象/函数能否被调用 3.举例:斐波那契数列类 1.__call__方法 一个对象实例可以有自己的属性和方法,当我们调用实例方法时, ...

  9. NLTK学习笔记(二):文本、语料资源和WordNet汇总

    目录 语料库基本函数表 文本语料库分类 常见语料库及其用法 载入自定义语料库 词典资源 停用词语料库 WordNet面向语义的英语字典 语义相似度 语料库基本函数表 示例 描述 fileids() 语 ...

  10. ps图标长投影如何做？

    https://jingyan.baidu.com/article/2f9b480dad9c8e41cb6cc297.html ps图标长投影