CSS3之size属性

最新推荐文章于 2023-09-18 09:55:40 发布

Programmer.杨

最新推荐文章于 2023-09-18 09:55:40 发布

阅读量3.2k

点赞数 1

分类专栏：前端技术-CSS 文章标签： width max-height min-width CSS 属性

本文链接：https://blog.csdn.net/YWB88888888/article/details/102711204

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

width:

说明：
          设置元素的宽度
作用：
          width属性不包括填充，边框，或页边距
常用值：
          (auto)：默认值，浏览器会计算出实际的宽度
          (length)：指定宽度数值

max-width:

说明：
          设置元素的最大宽度
作用：
          元素使用最大宽度属性，当设置宽度数值超出这个限制时数值无效，元素宽度会停留在最大宽度
常用值：
          (none)：默认值，定义对元素的最大宽度没有限制
          (length)： 定义元素的最大宽度值

min-width:

说明：
          设置元素的最小宽度
作用：
          元素使用最小宽度属性，当设置宽度数值超出这个限制时数值无效，元素宽度会停留在最小宽度
常用值：
          (none)：默认值，定义对元素的最小宽度没有限制
          (length)：定义元素的最小宽度值

height:

说明：
          加粗样式设置元素的高度
作用：
          加粗样式height属性不包括填充，边框，或页边距
常用值：
          (auto)：默认值，浏览器会计算出实际的高度
          (length)： 指定 高度数值

max-height:

说明：
          设置元素的最大高度
作用：
          元素使用最大高度属性，当设置高度数值超出这个限制时数值无效，元素高度会停留在最大高度
常用值：
          (none)： 默认值，定义对元素的最大高度没有限制
          (length)： 定义元素的最大高度值

min-height:

说明：
          设置元素的最小高度
作用：
          元素使用最小高度属性，当设置高度数值低于这个限制时数值无效，元素高度会停留在最小高度
常用值：
          (none)：默认值，定义对元素的最小高度没有限制
          (length)：定义元素的最小高度值

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之size属性</title>
    
    <style type="text/css">
        #showdiv1 {
            background-color: pink;
            margin: 100px auto 0 auto;
            height: 400px;
            max-height: 600px;
            min-height: 200px;
            
            width: 100px;
            max-width: 600px;
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div id="showdiv1"></div>
</body>
</html>