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. 深入了解Spring Boot 核心注解原理

    SpringBoot目前是如火如荼,所以今天就跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到 ...

  2. ORACLE 查询不走索引的原因分析，解决办法通过强制索引或动态执行SQL语句提高查询速度

    (一)索引失效的原因分析: <>或者单独的>,<,(有时会用到,有时不会) 有时间范围查询:oracle 时间条件值范围越大就不走索引 like "%_" ...

  3. python 生成HTmL报告页面

    计划做一个html页面 py3.4 代码: # -*- coding=utf-8 -*- # import time,os class Template_mixin(object): "&q ...

  4. jboss的下载安装、环境变量配置以及部署

    1. 下载安装 http://jbossas.jboss.org/downloads/   jdk为1.7 我下载的是:JBoss AS7.1.1.Final 2. 解压安装包  D:\program ...

  5. 【剑指Offer】62、二叉搜索树的第k个结点

      题目描述:   给定一棵二叉搜索树,请找出其中的第k小的结点.例如(5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4.   解题思路:   本题实际上比较简单,主要还是考察对 ...

  6. 【剑指Offer】46、圆圈中最后剩下的数

      题目描述:   每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后 ...

  7. sql查询原理

    1.单表查询:根据WHERE条件过滤表中的记录,形成中间表(这个中间表对用户是不可见的):然后根据SELECT的选择列选择相应的列进行返回最终结果. 1)简单的单表查询 SELECT 字段 FROM ...

  8. Linux—Ubuntu14.0.5安装Redis

    1.前言 Redis是常用基于内存的Key-Value数据库,比Memcache更先进,支持多种数据结构,高效,快速.用Redis可以很轻松解决高并发的数据访问问题:做为时时监控信号处理也非常不错. ...

  9. workspace 配置

    1.新建workspace 在配置好相关信息前,请勿引入工程代码,避免环境不完整的情况下编译进入长时间等待 2.设置工作窗体结构 建议使用Java模式开发窗体设置 3. 编码 工程全部采用UTF-8编 ...

  10. netty helloWord (一)

    什么是nettty netty是基于javaNio模型的网络编程框架.很多框架底层也是用netty实现的 比如dubbo 与NIO的区别 1.简化了API的使用.基于事件驱动.只需要在对应的事件写相应 ...