css 复习 - 文档流

来源:互联网 发布:淘宝评价禁用词有哪些 编辑:程序博客网 时间:2024/05/18 02:55

定义

将网页窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

文档流与元素

  • 每个非浮动块级元素(即float:none的元素)都独占一行
  • 浮动元素(即float:left/right的元素)则按规定浮在行的一端,若当前行容不下,则另起新行再浮动。
  • 内联元素也不会独占一行
  • 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

脱离文档流的情况

  • 浮动(float:left/right)元素(在IE中 ,浮动元素也存在于文档流),经常 与clear:both;结合使用,保证
  • 绝对定位 (position:absolute)
  • 固定定位 (position:fixed)
    对浮动元素:
    不占任何正常文档流空间,但是定位还是基于正常的文档 流,然后从文档 流中抽出并移动 至相应 的侧
    文字内容会围绕在浮动元素周围。
    当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

基于文档流理解 的定位模式

  • 相对定位, 即相对于元素在文档流中位置进行偏移。 但保留原占位。
  • 绝对定位, 即完全脱离文档流, 相对于position属性为非static值的最近父级元素进行偏移。
  • 固定定位, 即完全脱离文档流, 相对于浏览器窗口进行偏移。

块元素

段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素

内联元素

表单元素<input>、超级链接<a>、图像<img><span>
0 0
原创粉丝点击