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. 【sqli-labs】 less7 GET - Dump into outfile - String (导出文件GET字符型注入)

    使用此漏洞需要知道WEB程序的根路径并且MYSQL的secure-file-priv配置应为可写入该路径 添加单引号,发现错误被屏蔽 对应的SQL语句应为 ')) ... 字段还是3个 在数据库中执行 ...

  2. beetl模板入门例子

    加入maven依赖 <dependency> <groupId>org.beetl</groupId> <artifactId>beetl-core&l ...

  3. vue点击实现 路由的跳转

    点击按钮实现路由的跳转 <div @click="gotoMenu">按钮</div> 实现跳转 methods: { gotoMenu(){ //跳转到上 ...

  4. Linux—Ubuntu14.0.5安装gitlab

    1.下载gitlab-ce,到该连接选择版本   https://mirror.tuna.tsinghua.edu.cn/gitlab-ce/ubuntu/pool/trusty/main/g/git ...

  5. Problem 22

    Problem 22 Using names.txt (https://projecteuler.net/problem=22)(right click and 'Save Link/Target A ...

  6. 1.sts的下载安装

    sts的官方下载如下: http://spring.io/tools3/sts/all/ 将下载后的压缩文件解压,在解压后的sts-bundle下的sts-3.9.1RELEASE目录中STS.exe ...

  7. phpcms_完整版

    {pc:content action="category" catid="0" num="6" siteid="$siteid&q ...

  8. SBC37x交叉编译平台QT+OPENCV【2】虚拟机Vbox下Ubuntu的磁盘扩容

    虚拟机Vbox下Ubuntu,当初为了学习,仅仅分配了8g,结果qt,opencv等一上,就说room空间不够了.于是开始折腾磁盘扩容. 网上一大堆,也不知道有多少是自己动手走过,正是不但浪费别人时间 ...

  9. 0809MySQL实战系列：大字段如何优化|数据存储结构

    转自https://yq.aliyun.com/articles/59256?spm=5176.100239.blogcont59257.9.5MLR2d 摘要: 背景 线上发现一张表,1亿的数据量, ...

  10. MySQL Workbench常用快捷键及修改快捷键的方法

    常用快捷键: 1.执行整篇sql脚本:[Ctrl]+[Shift]+[Enter] 2.执行当前行:[Ctrl]+[Enter] 3.注释/取消注释:[Ctrl]+[/] 4.格式化sql语句(美化s ...