max-width、margin:auto、display
max-width
使用 max-width
替代 width
可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要, 所有的主流浏览器包括IE7+在内都支持 max-width
,所以放心大胆的用吧。
margin:auto
设置块级元素的 width
可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto
来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。
display属性
display
是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block
或 inline
。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
div
是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p
、 form
和HTML5中的新元素: header
、 footer
、 section
等等
span
是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a
元素是最常用的行内元素,它可以被用作链接
另一个常用的display值是 none
。一些特殊元素的默认 display 值是它,例如 script
。display:none
通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility
属性不一样。把 display
设置成 none
不会保留元素本该显示的空间,但是 visibility: hidden;
还会保留。