码农教程 - 一技在手,衣食无忧! tools

目录

CSS 高度、宽度和最大宽度

❮ 上一节 下一节 ❯

CSSheight和width属性用于设置元素的高度和宽度。

CSSmax-width属性用于设置元素的最大宽度。

该元素的高度为 50 像素，宽度为 100%。

亲自试一试 »

CSS 设置高度和宽度

这个height和width属性用于设置元素的高度和宽度。

高度和宽度属性不包括填充、边框或边距。它设置元素的内边距、边框和边距内区域的高度/宽度。

CSS 高度和宽度值

这个height和width属性可能具有以下值：

  • auto- 这是默认值。浏览器计算高度和宽度
  • length- 定义高度/宽度（以 px、cm 等为单位）。
  • %- 定义包含块的高度/宽度（以百分比表示）
  • initial- 将高度/宽度设置为其默认值
  • inherit- 高度/宽度将从其父值继承

CSS 高度和宽度示例

该元素的高度为 200 像素，宽度为 50%

示例

设置 <div> 元素的高度和宽度：

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

亲自试一试 »

该元素的高度为 100 像素，宽度为 500 像素。

示例

设置另一个 <div> 元素的高度和宽度：

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

亲自试一试 »

笔记：请记住，height和width属性不包括填充、边框或边距！它们设置元素的内边距、边框和边距内区域的高度/宽度！

设置最大宽度

这个max-width属性用于设置元素的最大宽度。

这个max-width可以指定为长度值，如 px、cm 等，或以包含块的百分比 (%) 为单位，或设置为 none（这是默认值。意味着没有最大宽度）。

问题与<div>当浏览器窗口小于元素的宽度 (500px) 时，会发生上述情况。然后浏览器向页面添加水平滚动条。

使用max-width相反，在这种情况下，将改进浏览器对小窗口的处理。

提示：将浏览器窗口拖动到小于 500px 宽，以查看两个 div 之间的差异！

该元素的高度为 100 像素，最大宽度为 500 像素。

笔记：如果您出于某种原因同时使用width属性和max-width同一元素上的属性，以及该元素的值width属性大于max-width属性;这max-width将使用属性（并且width属性将被忽略）。

示例

此 <div> 元素的高度为 100 像素，最大宽度为 500 像素：

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

亲自试一试 »

亲自试一试 - 示例

设置元素的高度和宽度
此示例演示如何设置不同元素的高度和宽度。

使用百分比设置图片的高度和宽度
此示例演示如何使用百分比值设置图片的高度和宽度。

设置元素的最小宽度和最大宽度
此示例演示如何使用像素值设置元素的最小宽度和最大宽度。

设置元素的最小高度和最大高度
此示例演示如何使用像素值设置元素的最小高度和最大高度。

通过练习测试一下

练习:

将 <h1> 元素的高度设置为"100px"。

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

所有 CSS 尺寸属性

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ 上一节 下一节 ❯