css中max-width和min-width的应用
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的应用的更多相关文章
- 理解css中min-width和max-width，width与它们之间的区别联系
css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...
- css中的width,height，属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
- 【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- css中height, width默认值
转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- table中的td限制宽度width也不能让字符过长变成省略号生效？
table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...
- SQL中MAX()和MIN()函数的使用（比较字符串的大小）
在SQL数据库中,最大/最小值函数—MAX()/MIN()是经常要用到的,下面就将为您分别介绍MAX()函数和MIN()函数的使用,供您参考,希望对您学习SQL数据库能有些帮助. 当需要了解一列中的最 ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
随机推荐
- scala类型系统：24) 理解 higher-kinded-type
首先我们从最基本的泛型来看: 现在我们对上面泛型中的类型参数再进一步,也是个泛型会如何呢? 可以看到,java中不支持类型参数也是泛型类型的情况,而scala支持.这是一个很重要的区别,scala在类 ...
- 微服务常见安全认证方案Session token cookie跨域
HTTP 基本认证 HTTP Basic Authentication(HTTP 基本认证)是 HTTP 1.0 提出的一种认证机制,这个想必大家都很熟悉了,我不再赘述.HTTP 基本认证的过程如下: ...
- c# cookie帮助类
using System; using System.Collections.Generic; using System.Text; using System.Web; namespace Matic ...
- js-undefinde的一点延伸
前面写过一篇js中变量定义的问题:Js中判断变量存不存在的问题 本文再补充下,变量声明未初始化的情况,代码: <script> var a; alert(a==undefined)//tr ...
- ubuntu18.0安装RabbitMQ
RabbitMQ是一个消息队列,用于实现应用程序的异步和解耦.生产者将生产消息传送到队列,消费中从队列中拿取消息并处理.生产者不用关心是谁来消费,消费者不用关系是谁在生产消息,从而达到解耦的目的.本文 ...
- void 0 与 undefined
偶然看到一个问题:为什么有的编程规范要求用 void 0 代替 undefined? 如果不知道这个答案的小伙伴,第一反应就要问void 0是什么鬼? void 0 void是JavaScript的一 ...
- 数据类型---->Number
Javascript中有六种数据类型 1.undefined:这个值未定义 2.boolean:这个值是布尔值 3.number:这个值是数值 4.function:这个值是函数 5.object:这 ...
- [51Nod 1301] 集合异或和 (dp)
传送门 Solution 一道比较好的dp题 想了半天组合数QAQ 首先要知道的是 A<B一定是B有一位是1且A的这位是0且前面都相等 那么肯定是要枚举这一位在哪里然后求出方案数 方案数考虑类似 ...
- 多种方法爬取猫眼电影Top100排行榜,保存到csv文件,下载封面图
参考链接: https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/83663400 https://www.makcyun.top/web_sc ...
- linux 中，mysql数据库备份操作
1.新建一个sh脚本(可以先建一个txt文本,然后改为sh文件). 代码如下: #!/bin/bash #设置mysql备份目录 folder=/**/** cd $folder day=`date ...