元素展示格式 - 图1

display

  • block：
    • 独占一行
    • width、height、margin(外边距)、padding(内边距)均可控制
    • width默认100%。
  • inline：
    • 可以共占一行
    • width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
    • width默认为本身内容宽度
  • inline-block
    • 可以共占一行
    • width、height、margin、padding均可控制
    • width默认为本身内容宽度
  • none什么都不显示 ```css / 块元素 / div { background-color: lightblue; width: 100px; height: 100px; margin: 10px; padding: 10px; }

/ inline元素 / span { background-color: aqua; margin-left: 10px; padding: 10px; }

/inline-block 元素/

img { width: 100px; height: 100px; }

  2. <a name="m10TC"></a>
  3. ## `white-space`
  4. white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。
  6. - `nowrap`不换行
  7. - `pre`包含空格和回车
  8. <a name="iOJNq"></a>
  9. ## `overflow`
  10. CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。
  12. - `auto`滚轮
  13. - `scroll`滚轮
  14. - `hidden`隐藏
  15. - `visible`展示(默认值)
  16. <a name="z0znK"></a>
  17. ## `text-overflow`
  18. text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。
  19. ```css
  20. div {
  21.     width: 100px;
  22.     height: 100px;
  23.     background-color: aqua;
  24.     white-space: nowrap;
  25.     overflow: hidden;
  26.     text-overflow: ellipsis;
  27. }

visibility

  • hidden：隐藏，显示空白
  • visible：显示元素
  • collapse：折叠元素