004_CSS中的常用属性-优快云博客

本文介绍了CSS中常用的盒模型属性，包括尺寸、布局和外观设置，如width、height、margin、padding、float、position、overflow以及背景和文字样式。示例代码展示了如何应用这些属性来控制元素的显示效果，包括滚动条的使用和文字样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

001_XXXX(h3)

常用属性

盒⼦子的位置和⼤小

尺⼨

布局
宽度 width: ⻓长度 | 百分⽐比 | auto
高度 height
边界 margin padding 上右下左 || 上下 左右

布局

浮动 float
定位 position
盒⼦内容超出部分： overflow： hidden || scroll || auto

外观，风格

background: 背景颜⾊色 || 背景图像 || 背景重复 || 背景要
不不要固定 || 背景位置
background-color

文字属性

字体⼤小 font-size
是否加粗 font-weight
是不不是斜体 font-style
字体是什什么 font-family
合并成一个属性 font

源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css常用属性</title>
    <style>
      p {
        /* 百分比属性是根据父元素计算而来的 */
        width: 50%;
        height: 30px;
        /* overflow: hidden; */
        overflow: scroll;
        /* 自动根据元素内容，判断是否要有滚动条 */
        overflow: auto;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>css常用属性</h1>
    <p>
      Lorem
    </p>
    <p>
      Harum, nesciunt totam? Dolorum ipsam perspiciatis illum adipisci
      consequuntur quisquam exercitationem tempore, blanditiis vero earum est
      odit quae accusantium, voluptatem quis rem culpa facilis soluta excepturi
      unde repellat eveniet ex?
    </p>
    <p>
      Similique rerum itaque, aliquam veritatis sequi omnis maiores nam vel id
      laudantium nihil harum dolorum exercitationem eaque labore, ea quis
      laboriosam eligendi iste perferendis officia. Nobis libero maxime vel
      natus.
    </p>
  </body>
</html>