css min-width与max-width
类别:Web前端 浏览量:2414
时间:2015-4-13 css min-width与max-width
css min-width与max-widthCss max-width与css min-width可以同时在一个CSS选择器使用设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多。
一、最大宽度属性max-width
1、在CSS中,最大宽度属性(max-width)用来定义宽度显示的最大值,当拖动浏览器边框使其显示范围大于最大宽度的时候,元素显示最大宽度值定义的宽度。
2、在最大宽度属性值中,可以使用三种属性值,分别为auto值、长度值和百分比值,其语法结构如下所示
max-width: auto | length | percent;
注意:在IE6.0中,会忽略这个属性,将宽度使用默认值100%显示
二、最小宽度属性min-width
1、在CSS中,最小宽度属性(min-width)用来定义宽度显示的最小值,当拖动浏览器边框使其显示范围小于最小宽度的时候,元素显示最小宽度值定义的宽度。
2、在最小宽度属性中,可以使用三种属性值,分别为auto值、长度值和百分比值,其语法结构如下:
min-width: aotu | length | percent;
注意:在IE6.0中,会忽略这个属性,将宽度使用默认值100%显示
三、min-width与max-width实例
<li class="min-width"> <img src="url1" /> //宽为73px </li> <li class="max-width"> //宽度为457px<img src="url2" />
</li>
.min-width img{ min-width:300px} .max-width img{ max-width:300px;}
结果
(1)、“min-width”里的img图片最小宽度为300px,而实际图片只有73px,所以图片被拉伸到300px;
(2)、“max-width”里的img图片最大宽度为300px,而实际图片宽度是457px ,所以图片被缩小到300px
标签:css
您可能感兴趣
- css代码使用方法(写出牛逼的CSS代码13条建议你会哪几条)
- css布局图解(浅谈CSS三栏布局的N种实现)
- 用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)
- css3动画360循环旋转(利用纯CSS3实现文字向右循环闪过效果实例可用于移动端)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css瀑布流布局
- css style常用属性(CSS中的content属性使用教程)
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- css长度单位px、em、pt
- css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
- css3渐变动画(CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法)
- css中ul li的用法
- css边框设置颜色(CSS 制作带边框背景色透明的消息框)
- css画三角形几种方法(利用CSS绘制任意角度的扇形示例代码)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
- 今日菜价 椰菜涨幅最高 3.25 ,水空心菜降幅最高 2.58(今日菜价椰菜涨幅最高)
热门推荐
- css行高line-height的用法
- mysql主从复制配置(Mysql实现主从配置和多主多从配置)
- js打印斐波那契数列(JavaScript输出斐波那契数列的实现方法)
- tomcat运行中找不到路径(Tomcat将配置文件放在外部的解决方法)
- idea如何运行tomcat项目(在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目的过程详解)
- php提交表单验证表(php实现的表单验证类完整示例)
- mysql修改初始密码教程(使用MySQL命令行修改密码)
- mysql 时间戳获取(MySQL时间盲注的五种延时方法实现)
- mysqlcount使用方法(详解 MySQL中count函数的正确使用方法)
- windows下nginx 命令(win10安装配置nginx的过程)