分类 : Web前端

CSS min-width最小宽度与CSS max-width最大宽度教程篇

最小宽度min-width与最大宽度max-width样式有什么作用?最小宽度最大宽度用于什么地方呢?如何应用?

在DIV+CSS布局中网页中插入html img图片

接下来CSS5NET让大家学会掌握min-width与max-width基础语法结构以及通过案例学习用法。

min-width max-width目录
  1. 基础语法结构

  2. 实际应用地方

  3. 用法案例

  4. 总结

一、CSS基础语法结构   -   TOP

min-width与max-width后面均跟具体数字+html单位

min-width:50px 最小宽度为50px
max-width:50px 最大宽度为50px

CSS样式结构
div{min-width:50px}
div{max-width:50px}

扩展阅读
1、css min-height
2、css max-height
3、css width
4、css height

二、实际应用说明   -   TOP

最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如,一个盒子里有文章有图片混排的时候,有时图片宽度不能确定,这个时候如果html img图片宽度超出了div盒子宽度,可能图片就会撑破div盒子造成图片混乱。

扩展阅读:
1、css设置图片高度宽度
2、CSS解决图片过大撑破DIV网页
3、css img
4、html img标签

三、min-width与max-width用法案例   -   TOP

我们设置2个div盒子,分别设置最大与最小宽度样式、同时设置css边框为1px css颜色为红色的实线盒子、css高度为100px。第一和第二个盒子CSS命名分别为divcss5-min-width、.divcss5-max-width;第一个盒子内图片原图片大小为宽为165px 高度60px;第二个盒子内图片原图片大小为宽度为375px 高度65px。

1、案例css代码

  1. .divcss5-min-width,.divcss5-max-width{ height:100px; border:1px solid #F00}

  2. .divcss5-min-width img{ min-width:200px}

  3. .divcss5-max-width{margin-top:10px}

  4. /* css注释:margin-top设置divcss5-max-width对象上间距为10px */

  5. .divcss5-max-width img{ max-width:200px; }

2、CSS+DIV案例html源代码片段

  1. <p>原图片大小:<br />

  2. <br />

  3. <img src="http://www.css5.net/img201301/divcss5-logo-2013.gif" /><br /><br />

  4. 宽为165px 高度60px<br />

  5. <br />

  6. <img src="http://www.css5.net/img201301/topad1.gif" /><br /><br />

  7. 宽度为375px 高度65px

  8. </p>

  9. 案例如下:

  10. <div class="divcss5-min-width">

  11.    <img src="http://www.css5.net/img201301/divcss5-logo-2013.gif" />

  12. </div>

  13. <div class="divcss5-max-width">

  14.    <img src="http://www.css5.net/img201301/topad1.gif" />

  15. </div>

3、案例在浏览器效果截图


css div Min-width与max-width案例效果截图

4、max-width最大宽度与min-width最小宽度案例小结
我们设置两个盒子一个“divcss5-min-width”设置对象里img图片最小宽度为200px,而实际图片只有165px,所以图片被拉伸到200px;一个“divcss5-max-width”设置对象里img图片最大宽度为200px限制,而实际对象里图片宽度是375px,这个时候我们设置了此图片最大宽度为200px,所以图片被CSS max-height缩小到200px

四、max-width与min-width总结   -   TOP

Css max-width与css min-width可以同时在一个CSS选择器使用设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多,但在IE6中不支持此两个属性,IE7及以上浏览器均支持,这个时候我们需要IE6支持兼容CSS min-width、ie6兼容max-width方法。


分类: Web前端    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    电脑知识    CSS基础
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 电脑知识 CSS基础

随机阅读

win7共享文件夹在哪? win7和win10怎么共享文件夹
电脑基础知识入门
爱剪辑如何添加字幕
JS获取文件大小,方法三,利用img的fileSize
Java.io.File中的delete()方法和deleteOnEx
国务院办公厅关于2021年部分节假日安排的通知
Iframe嵌套HTML网页的用法?
Azure Cosmos DB (二) SQL API 操作
html中如果不用frame和iframe,还能怎么在一个区域里显示另
“代码雨”纯HTML源码实现及效果
前端大文件上传代码,大文件上传
iframe—网页中嵌入其他网页
网页如何通过IFRAME嵌入另一个网页的一部分
asp EXL导入 SQL数据库
DIV+CSS教程_CSS+DIV教程

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
undefined是什么意思啊
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
DIV CSS字体(font-family)实现字体样式设置
C语言程序中break是什么意思?
C#语言之“string格式的日期时间字符串转为DateTime类型”
Mysql里表示布尔型的类型是什么
replace和replaceAll是JAVA中常用的交换字符的办法
前端该怎么学?推荐一个学习路线!


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16