本节内容:
没有布局
display属性
margin:auto;
max-width
盒模型
没有布局
如果想把所有内容都塞进一栏里,那么不用设置任何布局也是可以的。然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常不适:读完每一行之后,你的视觉焦点要从右向左一大段距离。
display属性
dispaly属性是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display值,这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个block元素通常被叫做块级元素。一个inline元素通常被叫做行内元素。
block:
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p、form以及html5中的新元素:header、footer、section等等。
inline:
span是一个标准的行内元素。一个行内元素可以在段落中,包裹一些文字而不会打乱段落的布局。a元素(链接)是最常用的行内元素。
none:
另一个常用的display值是none。一些特殊元素的默认display值是它,例如script。display:none通常被JavaScript用来在不删除元素的情况下隐藏或显示元素。
它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间,但是visibility:hidden;还会保留。
每个元素都有一个默认的display类型。不过可以随时随地的重写它。可以把有特定予以的元素改成行内元素。常见的例子是:把li元素修改成inline,制作成水平菜单。
margin:auto;
<div id="main" style="width:600px;margin: 0 auto;border:1px solid black"> </div>
设置块级元素的width可以阻止它从左到右撑满容器。然后就可以设置左右外边距为auto来使其居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。以上的div会居中显示在浏览器中间。
问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚懂条来容纳页面。接下来改进这个方案......
max-width
<div id="main" style="max-width:600px;margin: 0 auto;border:1px solid black"> </div>
在这种情况下使用max-width代替width可以是浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整以下浏览器即可见到效果。(所有的浏览器包括IE7+在内都支持max-width)
盒模型
当设置了元素的宽度,实际展现的元素却能够超出设置:因为元素的边框和内边距会撑开元素。情况如下(两个div设置了一样的width值,大小却不一样):
simple类的div元素的盒模型(Chrome上显示,可见元素没有内边距padding值,border实际值时0.667,实际设置是1像素;上下外边距是20像素,左右外边距是361.333两边自动平分,实际div大小是蓝色的块状)。
fancy类的div元素的盒模型。内边距padding值是50像素,border值是0.667,实际设置是1像素;margin设置和simple一样。而实际div的大小和simple一样。