参考资料

  1. CSS 阴影设置
  2. CSS阴影颜色
  3. 属性选择器详细说明以及案例
  4. css阴影效果属性
  5. css布局格式
  6. Vanta.js 如何与 CSS 过渡结合？
  7. 如何避免Flex容器高度塌陷？
  8. 伪元素选择器详细说明以及案例

CSS尺寸属性用于控制元素的宽度、高度、最小和最大尺寸等。以下是常见的CSS尺寸属性及其详细说明和案例：

1. width

  • 说明: 设置元素的宽度。

  • 值: 可以是像素(px)、百分比(%)、auto等。

  • 案例:

    div {
    width: 300px;
}

2. height

  • 说明: 设置元素的高度。

  • 值: 可以是像素(px)、百分比(%)、auto等。

  • 案例:

    div {
    height: 200px;
}

3. min-width

  • 说明: 设置元素的最小宽度。

  • 值: 可以是像素(px)、百分比(%)等。

  • 案例:

    div {
    min-width: 100px;
}

4. min-height

  • 说明: 设置元素的最小高度。

  • 值: 可以是像素(px)、百分比(%)等。

  • 案例:

    div {
    min-height: 50px;
}

5. max-width

  • 说明: 设置元素的最大宽度。

  • 值: 可以是像素(px)、百分比(%)等。

  • 案例:

    div {
    max-width: 500px;
}

6. max-height

  • 说明: 设置元素的最大高度。

  • 值: 可以是像素(px)、百分比(%)等。

  • 案例:

    div {
    max-height: 300px;
}

7. box-sizing

  • 说明: 控制元素的宽度和高度的计算方式。

  • 值: content-box（默认，宽度和高度不包括内边距和边框）、border-box（宽度和高度包括内边距和边框）。

  • 案例:

    div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

8. aspect-ratio

  • 说明: 设置元素的宽高比。

  • 值: 宽高比，如16/9、1/1等。

  • 案例:

    div {
    aspect-ratio: 16/9;
}

9. resize

  • 说明: 允许用户调整元素的尺寸。

  • 值: none（默认，不允许调整）、both（允许调整宽度和高度）、horizontal（仅允许调整宽度）、vertical（仅允许调整高度）。

  • 案例:

    div {
    resize: both;
    overflow: auto;
}

10. overflow

  • 说明: 控制元素内容溢出时的处理方式。

  • 值: visible（默认，内容溢出时可见）、hidden（内容溢出时隐藏）、scroll（显示滚动条）、auto（根据需要显示滚动条）。

  • 案例:

    div {
    overflow: auto;
    width: 200px;
    height: 100px;
}

这些属性可以组合使用，以实现更复杂的布局和响应式设计。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。