CSS 配置 float_html/css_WEB-ITnose

概要

CSS には、配置とフローティングのためのいくつかのプロパティが用意されており、これらのプロパティを使用してさまざまなレイアウトを作成し、HTML ページの表現力を大幅に向上させることができます。

配置の基本的な考え方はシンプルです。これにより、要素のボックスを通常の位置、親要素、別の要素、さらにはブラウザ ウィンドウ自体を基準にして表示する場所を定義できます。

CSS には 3 つの基本的な配置メカニズムがあります:

• デフォルトの配置 (静的) と相対配置 (相対) を含む通常のフロー。

• float.

• Absoluteとfixedを含む絶対配置

Everything is a box

CSSボックスモデルの記事で、要素ボックス（主にブロックボックス）の概念を簡単に理解しましたが、ここでもう一度Makeしますいくつかの追加。

div、h1、または p 要素は、

ブロックレベル要素と呼ばれることがよくあります。これは、これらの要素がコンテンツのブロック、つまり ブロック ボックス として表示されることを意味します。対照的に、span や Strong などの要素は、その内容が 1 行、つまり インライン ボックス 内に表示されるため、インライン要素 と呼ばれます。ただし、表示プロパティを使用して生成されるボックスのタイプを変更できます。

名前のないフレーム

と呼ばれる別のタイプのフレームもあります（名前のないフレームはラインフレームとも呼ばれます）。これは、ブロックレベルの要素 (div など) にテキストを追加すると発生します。 3 行のテキストを含む段落があり、各行が 名前のないボックス を形成しているとします。

<div>some text - 无名框<p>Some more text. - 无名框<br>Some more test. - 无名框<br>Some more test. - 无名框</p></div>

HTML のデフォルト レイアウトでは、ブロック ボックスが上から下に次々と配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます (マージン値のマージに注意してください)。

インラインボックスは横一列に配置されます。それらの間隔は、水平方向のパディング、境界線、およびマージンを使用して調整できます。ただし、垂直方向のパディング、境界線、およびマージンはインライン ボックスの高さには影響しません。行ボックスは常に、そこに含まれるテキストを含めるのに十分な高さですが、行の高さを設定するとボックスの高さが大きくなることがあります。

Position 位置

Position 属性は、要素の配置タイプを指定します。 5 つの値から選択できます。

Valueabsolute 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。 fixed ブラウザウィンドウを基準にして相対的に配置された絶対配置要素を生成します。 relative 通常の位置を基準にして相対的に配置された要素を生成します。 静的inherit

任何元素都可以定位，不过 absolute 或 fixed 会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

绝对定位 absolute

元素框从文档流完全删除，并相对于其包含块定位。元素定位后生成一个块级框，而不论原来它在正常流中是何种类型的框。

绝对定位的元素的位置相对于 最近的已定位祖先元素（这里的已定位元素指除 static默认定位的其余三种），如果元素没有已定位的祖先元素，那么它的位置相对于 最初的包含块。

#box2 {    position: absolute;    left: 30px;    top: 20px;}

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

固定定位 fixed

固定定位类似于将 position 设置为 absolute，不过其包含块是视窗本身。

fixed 是一种特殊的绝对定位，对其设置的偏移量永远是相对于视窗本身。我们常见到的导航条固定在页面顶部，回到页面顶部按钮基本都是采用此定位方式。

div#top {    position: fixed;    right: 5px;    bottom: 5px;}

同样可以通过设置 z-index 属性来控制这些框的堆放次序。

相对定位 relative

元素仍保持其未定位前的形状，它原本所占的空间仍保留。

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。同样可以通过设置 z-index 属性来控制这些框的堆放次序。

默认定位 static

元素框正常生成，按框类型正常定位。

浮动 float

浮动的框可以向左或向右移动，直到它的外边缘碰到 包含框或 另一个浮动框的边框为止。

浮动和绝对定位一样都是脱离文档流的，不占用页面的空间，并且可能会覆盖掉页面正常的框。

向右浮动，脱离文档流，原来的空间被其他框所占用。

向左浮动，脱离文档流，覆盖其他框。

三个框都浮动，后面的框碰着前一个框的边框顺序排列。

当一行无法容纳下完整的一个框时，自动从下一行依次排列。

如果一行中无法容纳所有浮动框，后面的框会从下一行依次排列，排列起始位置取决于第一行已经排好的框的高度，以已经排好的行的最后一个框的高度为基准，从后往前找比此基准高的框，如果找到则起始位置为找到的这个框的下一个框的下面，如果没有找到比此基准高的框则从第一个往后排，始终保证新一行所有框的顶部与基准框的底部处于同一水平线上。（语言描述太麻烦了，我自己看都快晕了，看图吧）

图中第一行为排好的，其中框一高度最大，框三次之，其余三个高度相同，以框五为基准，往前找比框五大的，找到了框三，第二行第一个位置即为框四的下面（框三的下一个），框六，框七的顶部与框五的底部保持同一水平线（即使框四的高度小于80px,也应该同框五底部保持一致），框八以框七为基准继续往前找。

我们上面也说了，浮动是脱离文档流的，会覆盖别的框，这里需要强调一下此处的框是指非行框的框。

当行框与浮动框相遇时，浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，这里的行框也仅限于普通文档流中的行框（绝对定位中的文本还是会被覆盖的）。

浮动框确实覆盖了p元素框，但是文本没有被覆盖，换句话说就是行框被缩短。

有时我们仅仅希望使用浮动来进行文档布局，浮动元素的尺寸仍然保留，这就需要用到浮动清除（clear）了。

浮动清除 clear

用下面这个实际场景来介绍浮动清除的使用吧。

假设希望让一个图片浮动在左边，文本块浮动在右边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

由于浮动脱离文档流不占据空间，容器将无法包围他们，当然无法达到我们想要的效果。

由于两个块都是脱离文档的，无法对他们进行清除浮动，所以只能借助第三方了。

我们使用一个空的div元素以实现下图的目标。

div.clear {    clear: both;}

相关属性

除了上面介绍的主要属性，与定位和框相关联的其他属性也顺道一起简要了解一下吧。

堆叠顺序 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，其值可正可负，默认为0。

img.x {    position:absolute;    left:0px;    top:0px;    z-index:-1;}

框类型 display

display 属性规定元素应该生成的框的类型。通过此属性你可以轻松的实现块级元素与行级元素的互转，甚至可以通过此属性是元素脱离文档流隐藏起来。

常用的也就：none, block, inline, inline-block。

Description
	要素の位置は、left、top、right、bottom 属性によって指定されます。
	要素の位置は、left、top、right、bottom 属性によって指定されます。
	要素の位置は、left、top、right、bottom 属性によって指定されます。
デフォルト値。配置を行わない場合、要素は通常のフローで表示されます (左、上、右、下、および z-index 宣言は無視されます)。
親要素から継承します。IE8 より前ではサポートされていません。

）。 ）。 ）。 ）。 ）。）

）

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素。
inline	此元素会被显示为内联元素。
inline-block	行内块元素。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
table	此元素会作为块级表格来显示。
inline-table	此元素会作为内联表格来显示。
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

a#top {    display: none;}

记住常用的即可，其余的仅供查阅。

可见性 visibility

visibility 属性规定元素是否可见。

值	描述
visible	默认值。元素可见。
hidden	元素不可见。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 hidden。
inherit	从父元素继承。

h2 {    visibility:hidden;}

注意：使用此属性，即使不可见的元素也会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。

绝对定位剪裁 clip

clip 属性用来剪裁绝对定位元素。这个属性可以定义一个剪裁矩形。对于一个绝对定位元素，在这个矩形内的内容才可见。剪裁区域可能比元素大，也可能比元素小。

该属性的默认值为 auto , 不应用任何剪裁。

position: absolute;clip: rect (top, right, bottom, left);

top, bottom 都是相对于包围此元素的祖先元素上框的距离。right, left 都是相对于包围此元素的祖先元素左框的距离。

四个尺寸围成一个矩形，元素在此矩形内的部分被显现出来。

img {    position:absolute;    clip:rect(0px 50px 200px 0px)}

光标定位 cursor

光标定位应该叫光标样式，此属性用来设置当鼠标移动到元素上鼠标应该呈现的样式。这个内容很简单，直接贴出示例。

请将代码自行添加到HTML文件中检验效果。

<span style="cursor:auto;">auto</span><br /><span style="cursor:crosshair;">crosshair</span><br /><span style="cursor:default;">default</span><br /><span style="cursor:pointer;">pointer</span><br /><span style="cursor:move;">move</span><br /><span style="cursor:e-resize;">e-resize</span><br /><span style="cursor:ne-resize;">ne-resize</span><br /><span style="cursor:nw-resize;">nw-resize</span><br /><span style="cursor:n-resize;">n-resize</span><br /><span style="cursor:se-resize;">se-resize</span><br /><span style="cursor:sw-resize;">sw-resize</span><br /><span style="cursor:s-resize;">s-resize</span><br /><span style="cursor:w-resize;">w-resize</span><br /><span style="cursor:text;">text</span><br /><span style="cursor:wait;">wait</span><br /><span style="cursor:help;">help</span>

框溢出 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	从父元素继承。

div {    background-color:#00FFFF;    width:150px;    height:150px;    overflow: scroll}

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

垂直对齐 vertical-align

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与字体的顶端对齐
middle	把此元素放置在中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	从父元素继承。

具体样式请将代码自行添加到HTML文档中验证。

<p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> baseline 对齐的图像。</p> <p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> sub 对齐的图像。</p> <p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> super 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> top 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> text-top 对齐的图像。</p> <p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> middle对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> bottom 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> text-bottom 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> 24px 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> 0px 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> -50px 对齐的图像。</p><p>这是一幅H<SUB>2</SUB>O<img  src="/static/imghwm/default1.png"  data-src="http://i11.tietuku.com/b8eaac4d3b209c7c.gif"  class="lazy"    style="max-width:90%" / alt="CSS 配置 float_html/css_WEB-ITnose" >X<SUP>2</SUP> 20% 对齐的图像。</p>

小结

CSS 定位和浮动是HTML布局中的重要部分，需要认真参透。注意掌握定位的几种类型及区别，理解浮动的排列及清除，掌握与定位相关的一些属性。

篇幅还是稍长，估计大伙都没时间看完了。