【CSS】CSS中的display属性

display 是 CSS 中最重要的用于控制布局的属性，每个元素都有默认的 display 值，它们的默认值通常为 blcok 或者 incline。

block-块级元素

一个块级元素会开始新的一行并且尽可能撑满容器。

• 常见块级元素： div, p, form 等
• HTML5中的新块级元素： header, footer, section 等

常见问题

1、如何调整块级元素，使其不从左到右撑满整个容器？

div {
    width: 600px;
    margin: 0 auto; /*水平居中，元素会占据制定的宽度，剩余宽度一分为二为左右边距*/
}

上面方法的问题是当浏览器的窗口比元素的宽度窄时，浏览器会显示一个水平滚动条以容纳页面，因此可以使用 max-width 来代替 width 使浏览器更好地处理小窗口的情况，这点在移动设备上显得尤为重要。

div {
    max-width: 600px;
    margin: 0 auto;
}

incline-行级元素

一个行级元素可以在段落中包裹一些文字而不会打乱段落的布局。

• 常见行级元素： span, a 等

none

• 还有一些元素的默认值为none，比如script
• display:none 通常被JavaScript用来在不删除元素的情况下隐藏或显示元素
• 把 display 属性设置为 none 则元素不会占据它本来应该显示的空间；但是设置成 visibility:hidden 则还是会占据空间

其它display值

display详细列表

• 其它常用display： list-item, table, incline-block, flex 等

重写display

虽然每个元素都有默认 display 类型，但是可以随时随地重写它。常见的例子是：将 li 元素修改成 incline 以做成水平菜单。