首页 > 代码库 > HTML排版

HTML排版

HTML排版总结

浏览器使用流在页面中放置元素。

 

块元素从上向下流 , 各元素之间有一 个换行。 默认的,每个块元素会占浏览器窗口的整个宽度。 内联元素在块元素内部从左上方流向右下方。 如果需要多行 , 浏览器会换行 , 在垂直方向上扩展外围块元素 , 来包含这些内联元素。

 

正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小,或者如果两个外边距的大小相同,则会折叠成一个外边距。

 

浮动元素会从正常流中取出 ,浮动到左边或右边。浮动元素放在块元素之上,不会影响正常的页面流。不过 , 内联内容会考虑浮动元素的边界 ,围绕着这个浮动元素。

 

clear属性用来指定 一 个块元素左边或右边 (或者左右两边)不能有浮动元素。设置了clear属性的块元素会下移 ,直到它旁边没有块元素。

 

浮动元素必须有特定的宽度,不能设置为auto。

 

流体布局是指,扩展浏览窗口时, 页面中的内容会扩展以适应页面.

 

冻结布局是指 , 其中内容的宽度是固定的, 不会随着浏览器窗口扩展或收缩.这有一 个好处 , 可以对设计提供更多控制 , 不过也要付出代价 , 这样就不能有效地使用浏览器宽度了。

 

凝胶布局是指 , 其中内容宽度是固定的, 但是外边距会随着浏览器窗口扩展或收缩. 凝胶布局通常’会把内容放在中央。这与冻结布局有同样的好处,不过通常更美观。

 

position属性可以设望为4个值:static(静态的,这是默认属性),absolute(绝对的),fixed(固定)和(relative)(相对的)

 

静态定位是默认方式 , 将元素放在页面的正常流中。

 

绝对定位允许将元素放在页面上的任何位置.默认地 绝对定位元素会相对于页面边界来放置.

 

如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素定位.

 

使用绝对、固定和相对定位时 , 属性top 、right,bottom和left。来指定元素的位置。

 .

绝对定位元素可以使用z-index属性分层放置 , 使一个元素在另一 个元素上面。z-index值越大 , 说明层层次越高(在屏幕上离你越近)。

 

固定定位元索总是相对于浏览器窗口定位 , 页面滚动时 , 固定定位的元素不会移动。页面中的其他内容会在这些固定定位元素下面正常滚动。

 

相对定位元素首先正常流入页面 , 然后按指定的位移量偏移 , 从而留出它们原先所在的空间。

 

使用相对定位,left 、right, top和bottom是指距正常流中该元素位置的偏移量。

 

css表格显示允许按一种表格布局来摆放元素. 

 

要创建css表格显示,需要使用对应表格的一个块元素,对应行的块元素,以及对应单元格的块元素。通常,这些块元素都是<div>元素。

 

如果需要建立多栏布局,而且内容栏是均匀的,表格显示就是一个很好的布局策略。

HTML排版