最大宽度最小宽度

    css3又加入了min-width,min-height,max-with,max-height等属性

  这里以min-width和,max-width为例min-height和max-height类似

从属性名可以看出最小宽度,最大宽度,从名字看出这是一个限制尺寸的内容

确实如此,这个属性结合width和height以百分比为例最好,反正我是这样用的,我先把自己的代码贴一下

<style type="text/css">
			div{
				width:30%;
				height:50%;
				background:greenyellow;
				max-width:800px ;
				max-height:500px;
				min-width:100px;
				min-height:120px;
				margin:80px auto;
			}
		</style>
			<body>
		<!--最大最小宽度表面某个区域受到上限和下限-->
		<div>我是一个色块区域</div>
	</body>

看一下上述的代码,width和height使用了占用浏览器的百分比,当浏览器的可视区域变大时候,实际元素的尺寸随之增大,但是min-width起到了一个很好的最小宽度现在,max-width则限制最大的宽度尺寸,达到该上限元素的区域则不发生改变!min-height和max-height的用法类似!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

初级 Web 前端核心技能点

933
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

high:被界定为高的值的范围。 low:被界定为低的值的范围。 max:规定范围的最大值。 min:规定范围的最小值。 optimum: 规定度量的最...

1553
来自专栏行者常至

002.css常用基础知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版...

941
来自专栏owent

JQuery扩展插件--提示信息

https://github.com/owt5008137/SimpleMetro

591
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页。但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力。 ? 如何改善这种很平淡的页面呢? 让我们开始...

3007
来自专栏闵开慧

struts2标签示例

常用UI标签: Textfield标签输出一个HTML单行文本输入控件 Textarea标签输出一个HTML多行文本输入控件 Radio标签输出单选按钮 che...

2926
来自专栏Python研发

HTML

一个完整的网页是由HTML(超文本标记语言),css(层叠样式表)JavaScript(动态脚本语言)三部分组成.

6262
来自专栏黑泽君的专栏

Java中菜单组件

3673
来自专栏程序员八阿哥

开心学前端(一):HTML、CSS入门(1)1.1 html概述及html文档基本结构1.2 html标签入门

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

1661
来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

1946

扫码关注云+社区

领取腾讯云代金券