css max-width属性设置元素最大宽度

原创 国哥笔记  2019-03-02 19:32  阅读 354 views 次

max-width属性定义及用法

在css中,max-width属性是使用来设置元素的最大宽度,就是元素达到最大宽度后,不会随元素内容的增加而增加。元素可以比指定值窄,但不能比其宽。不允许指定负值。该属性设置的最大宽度不包括填充,边框,或页边距。

max-width属性一般是用来防止元素内容太多把宽度撑的太宽而影响布局效果,设置最大宽度之后,就不会因为元素内容太多将宽度撑的太宽而影响整体的布局。

max-width属性相似属性

max-width属性语法格式

  1. css语法:max-width:none/length/%/inherit;
  2. JavaScript 语法: object.style.maxWidth="100px";

属性值说明

  • none:默认,元素的宽度没有限制;
  • length:定义元素的最大宽度值;
  • %:定义基于包含它的块级对象的百分比最大宽度;
  • inherit:从父元素继承max-height属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css max-width属性设置元素最大宽度</title>
<style type="text/css">
div{max-width:300px;height:100px;background: aliceblue;border:1px solid royalblue;}
</style>
</head>
<body>
<div>css max-width属性设置元素最大宽度,该元素的最大宽度为300px</div>
</body>
</html>

运行结果

css max-width属性设置元素最大宽度

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-max-width.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情