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. dispatch_sync：As an optimization, this function invokes the block on the current thread when possible

    两件事情: 1.是否是一个线程: 2.queue task 的目标线程是否有未完成的task. 模型:一个线程处理当前的task还有通过gc d派发来的待执行task. 猜测: 如果目标thread上 ...

  2. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  3. 小程序组件 Vant Weapp 安装

    文件夹的名称必须是英文 第一步:npm init -y 第二步:npm i vant-weapp -S --production

  4. js中call、apply、bind的区别

    var Person = { name : 'alice', say : function(txt1,txt2) { console.info(txt1+txt2); console.info(thi ...

  5. php去除h5标签

    function html2text($str){  $str = preg_replace("/<style .*?<\\/style>/is", " ...

  6. orcale 多表连接

    多表连接:

  7. 0316 【案例】MySQL count操作优化案例一则

      转自http://blog.itpub.net/22664653/viewspace-1791124/ 一 背景 某业务的数据库定期报 thread_runing 飙高,通定位发现一个慢查询sql ...

  8. tomcat日志采集

    1. 采集tomcat确实比之前的需求复杂很多,我在搭建了一个tomcat的环境,然后产生如下报错先贴出来: Jan 05, 2017 10:53:35 AM org.apache.catalina. ...

  9. 用 Python 理解 Web 并发模型

    用 Python 理解 Web 并发模型 http://www.jianshu.com/users/1b1fde012122/latest_articles   来源:MountainKing 链接: ...

  10. [python]win32api

    安装完pywin32以后一定要重启啊!!!!!!!!!!!!