HTML5-和-CSS3-设计模式高级教程-二-

 ****strong
display:inline-block  

 ****em display:block em

 **

 
<img src="star.gif" alt="star" /> display:none`

CSS

`p,ol,li,table { display:inline; } strong { display:inline-block; width:250px; } em { display:block; } dfn { display:list-item; list-style-type:square; } img { display:none; }

*.ul { padding-left:15px; }`

显示

箱子模型

HTML

` 

Box Model

 `

CSS

`*.box { display:static;   overflow:visible;   visibility:visible;   width:160px;   height:150px;   padding:30px;   border-top: 30px solid gray; border-bottom:30px solid black;   border-left:30px solid gray; border-right: 30px solid black;   margin-left:230px; margin-top:80px;   background-color:gold; }

/*  Nonessential rules are not shown. */`

箱子模型

内嵌框

HTML

` 

Inline Box

CSS

`*.box { display:inline; visibility:visible;    line-height:100px;    margin:0 100px;    padding:20px 120px;

   border-top:   5px solid gray;    border-bottom:5px solid black;    border-left:  5px solid gray;    border-right: 5px solid black;

   background-color:gold; }

/*  Nonessential rules are not shown. */`

内嵌框

内嵌块框

HTML

` 

Inline-block Box

   BEFORE        AFTER

   BEFORE    Inline element displayed as an inline block.    AFTER  

CSS

`*.replaced-box { display:inline-block;   overflow:visible; visibility:visible;   width:51px; height:52px;   margin:10px 100px; padding:10px 120px; }

*.inline-box { display:inline-block;   overflow:visible; visibility:visible;   width:275px; height:52px;   margin:10px 100px; padding:10px 10px; }

/* Nonessential rules are not shown.   See Inline Box for border and background properties. */`

内嵌块框

块框

HTML

` 

Block Box

CSS

`*.box { display:block;   overflow:auto; visibility:visible;   width:220px; height:100px;   margin:10px auto; padding:10px; }

/*  Nonessential rules are not shown.    See Inline Box for border and background properties. */`

块框

表格框

HTML

` 

Table Box Model

CSS

`*.table {   border-collapse:separate; table-layout:auto; visibility:visible;   width:auto; height:auto; margin:30px 50px; }

*.cell { width:auto; height:auto; padding:20px 50px; overflow:hidden; }

/*  Nonessential rules are not shown.   See Inline Box for border and background properties. */`

表格框

绝对框

HTML

` 

Absolute Box

CSS

`*.container { position:relative; }

*.box { position:absolute; overflow:auto; visibility:visible;   z-index:auto; left:0; right:auto; top:0; bottom:auto;   width:220px; height:100px;   margin:10px; padding:10px;}

*.before {width:100px; height:auto; left:400px; right:auto; top:100px; bottom:auto;} *.after {width:100px; height:auto; left:auto;  right:0px;  top:auto; bottom:0px; }

/*  Nonessential rules are not shown.   See Inline Box for border and background properties. */`

绝对框

浮动框

HTML

` 

Floated Box

CSS

`*.box { float:left;  overflow:auto; visibility:visible;   width:220px; height:100px;   margin:10px; padding:10px; }

*.small { width:75px; height:auto; }

/*  Nonessential rules are not shown.     See Inline Box for border and background properties. */`

浮动框

五、盒子模型的延申

这是关于盒子模型的三章中的第二章。它展示了如何调整盒子的大小、收缩和拉伸。前一章讨论了六种主要的盒子类型:内嵌、内嵌块、块、表、绝对和浮动。下一章讨论设置盒子样式的属性。

每种类型的盒子工作方式不同。本章中的设计模式展示了如何将宽度和高度应用于每种类型的盒子，以调整其大小、进行包膜或拉伸。水平和垂直尺寸是独立的。您可以自由组合不同的垂直和水平设计模式。例如，可以水平拉伸和垂直包膜。

章节大纲

• Width 对比 Width 如何调整大小、收缩或拉伸每种类型的盒子。
• Height 对比了高度如何调整、收缩或拉伸每种类型的盒子。
• 显示了如何设置一个元素的高度或宽度。当您手动为元素指定高度和/或宽度时，会调整元素的大小。例如，您可以使用height:50%将元素的高度调整为其容器高度的 50%。
• Shrinkwrapped 展示了如何将一个元素的宽度或高度缩小到其内容的大小。例如，height:auto使静态块元素的高度自动扩展以适应其行的总高度，而width:auto使绝对元素的宽度收缩以适应其最宽行的宽度。
• Stretched 展示了如何将一个元素的宽度或高度拉伸到其容器的两侧。例如，width:auto使静态块元素的宽度自动扩展以适合其容器的宽度。例如，top:0、bottom:0和height:auto会使一个绝对元素自动扩展以适应其容器的高度。拉伸元素的左侧与其容器的左侧对齐，其右侧与容器的右侧对齐。同样，它的顶部和底部与其容器的顶部和底部对齐。

宽度

CSS

`*.static-inline-shrinkwrapped { width:auto; } *.replaced-inline-shrinkwrapped { width:auto; } *.replaced-inline-sized { width:35px; } *.replaced-inline-stretched { width:100%; }

*.static-block-sized { width:300px; } *.static-block-stretched { width:auto; }

*.table-shrinkwrapped { width:auto; } *.table-sized { width:300px; } *.table-stretched { width:100%; }

*.float-shrinkwrapped { width:auto; float:left; } *.float-sized { width:300px; float:left; clear:both; } *.float-stretched { width:100%; float:left; clear:both; }

*.absolute-shrinkwrapped { width:auto; left:0; right:auto; position:absolute; } *.absolute-sized { width:300px; left:0; right:auto; position:absolute; } *.absolute-stretched { width:auto; left:0; right:0; position:absolute; }`

宽度

高度

CSS

`*.replaced-inline-shrinkwrapped { height:auto; } *.replaced-inline-sized { height:65px; } *.replaced-inline-stretched { height:100%; }

*.block-shrinkwrapped { height:auto; } *.block-sized { height:65px; } *.block-stretched { height:100%; }

*.table-shrinkwrapped { height:auto; } *.table-sized { height:65px; } *.table-stretched { height:100%; }

*.float-shrinkwrapped { height:auto; float:left; } *.float-sized { height:65px; float:left; } *.float-stretched { height:100%; float:left; }

*.absolute-shrinkwrapped { height:auto; top:0; bottom:auto; position:absolute; } *.absolute-sized { height:65px; top:0; bottom:auto; position:absolute; } *.absolute-stretched { height:auto; top:0; bottom:0; position:absolute; }`

高度

大小合适

HTML

 <h1>Sized</h1>  <div class="gp">Positioned Grandparent    <div class="parent">Non-positioned Parent      <div **id="float"** class="z">Sized Float</div>      <div **id="static"** class="z">Sized Static</div>      <table **id="table"** class="z"><tr><td>Sized Table</td></tr></table>      <span **id="abs"** class="z">Sized Absolute        <img **id="star"** src="star.gif" alt="star" /></span>    </div>  </div>

CSS

`*.z { padding:5px; border:5px solid black; }

#float { width:150px; height:50px; } #static { width:150px; height:50px; } #table { width:150px; height:50px; } #abs { width:150px; height:50px; } #star { width:26px; height:26px; }

/*  Nonessential rules are not shown. */`

大小合适

畏缩不前

HTML

` 

Shrinkwrapped

Positioned Grandparent   

Non-positioned Parent     Shrinkwrapped Float     Shrinkwrapped Static Inline
         

Vertically Shrinkwrapped Static Block

    

Shrinkwrapped Table

    Shrinkwrapped Absolute   

 

CSS

`#float   { width:auto;  height:auto; float:left; } #inline { width:auto;  height:auto; } #star    { width:auto;  height:auto; } #block { width:auto;  height:auto; } #table  { width:auto;  height:auto; } #abs    { width:auto;  height:auto; left:auto; bottom:auto; position:absolute; }

/*  Nonessential rules are not shown. */`

畏缩不前

拉伸

HTML

 <h1>Stretched</h1>   <div class="gp">Positioned Grandparent    <div class="parent">Non-positioned Parent      <span  **id="inline"** class="s">Cannot stretch a static inline</span>      <div   **id="sized"**><img id="star" src="star.gif" alt="star" /></div>      <div   **id="block"** class="s">Horizontally Stretched Static Block</div>      <table **id="table"** class="s"><tr><td>Horiz. Stretched Table</td></tr></table>      <div   **id="abs-v"** class="s">Vertically Stretched Absolute</div>      <span  **id="abs-h"** class="s">Horizontally Stretched Absolute</span>      <span  **id="float"** class="s">Almost Stretched Float</span>    </div>  </div>

CSS

`#star { width:100%; height:100%; } #block { width:auto; } #table { width:100%; } #abs-v { height:auto; top:0;  bottom:0; position:absolute; } #abs-h { width:auto;  left:0; right:0; position:absolute; } #float { width:100%; float:left; }

/*  Nonessential rules are not shown. */`

拉长

六、盒子模型属性

本章展示了盒子模型属性如何设计各种盒子的样式。这些是基本的设计模式。

边距、边框和填充设计模式包含了对比每种类型的框中每个属性如何工作的例子。他们的主要目的是在一个地方对比相同的属性在不同的上下文中意味着不同的东西。当使用这本书作为参考时，您可能还希望参考边距、边框和填充设计模式，以确定哪种类型的元素、框和属性将满足您的需要。

章节大纲

• 边距对比了不同类型的盒子边距的不同作用。它显示了边距如何改变元素相对于其容器和兄弟元素的位置。
• Border 对比不同类型盒子的边框效果。它显示了边框如何以类似于边距的方式改变元素的位置，以及在某些方面不同于边距。
• 填充对比不同类型盒子的填充方式。它展示了填充对于边框和边距的作用方式。
• 背景展示了如何给一个元素的背景分配颜色。它还展示了如何使用平铺图像作为背景。您可以上下平铺图像、仅横向平铺或仅向下平铺，或者仅显示图像一次。您可以将图像放置在背景中的特定位置。您还可以指示图像是与内容一起滚动，还是保持在固定位置。
• 溢出展示了如何隐藏溢出的内容，显示它，或者显示滚动条。
• Visibility 展示了如何隐藏一个元素，同时在流中为它留下一个占位符。
• 分页符展示了如何在一个元素之前或之后插入一个分页符。它还显示了如何打印空白页。

边距

CSS

`*.before { margin:0; }

*.after { margin-top:10px; margin-bottom:0;   margin-left:30px; margin-right:10px; }

/* Nonessential rules are not shown.    HTML code is omitted to allow the example to fit on one page. */`

边距

边框

CSS

`*.before { border:1px solid black; }

*.after { border-top:10px solid dimgray;  border-bottom:1px solid black;   border-left:30px solid black;   border-right:5px solid black; }

/* Nonessential rules are not shown.     HTML code is omitted to allow the example to fit on one page. */`

边框

填充

CSS

`*.before { padding:0; }

*.after { padding-top:10px;  padding-bottom:0;   padding-left:30px; padding-right:10px; }

/* Nonessential rules are not shown.    HTML code is omitted to allow the example to fit on one page. */`

填充

背景

HTML

 <h1>Background</h1>  <p>**<span class="no-bg">**&nbsp;</span>No background</p>  <p>**<span class="bg-color">**&nbsp;</span>Background color</p>  <p>**<span class="bg-image">**&nbsp;</span>Background image not tiled</p>  <p>**<span class="bg-repeat">**&nbsp;</span>Background image tiled</p>  <p>**<span class="bg-rx">**&nbsp;</span>Background image repeat-x</p>  <p>**<span class="bg-ry">**&nbsp;</span>Background image repeat-y &rarr;</p>  <p>**<span class="bg-pos-lt">**&nbsp;</span>Background image center bottom</p>  <p>**<span class="bg-pos-rb">**&nbsp;</span>Background image right bottom</p>

CSS

`p { margin-left:240px; margin-top:0px; margin-bottom:10px; } span { margin-left:-230px; margin-right:30px; padding-left:195px; font-size:19px;   background-position:left bottom; background-repeat:no-repeat;   background-color:black; background-image:url("star.gif"); }

*.no-bg { background-image:none;  background-color:transparent; } *.bg-color { background-image:none;  background-color:black; } *.bg-image { background-repeat:no-repeat; } *.bg-repeat { background-repeat:repeat; } *.bg-rx { background-repeat:repeat-x; } *.bg-pos-lt { background-position:center bottom; } *.bg-pos-rb { background-position:right bottom; } *.bg-ry { background-repeat:repeat-y; background-position:center top;   padding-left:22px; float:right; height:263px; margin:0px;   position:relative; top:-170px; }`

背景

溢出

HTML

 <div id="ex1">   <h1><code>overflow:visible</code></h1>   <p class="ex1" >     <span class="big">OVERFLOW</span> <br />     <span class="nowrap">The text in this span does not wrap!</span>     <select size="2">       <option>select me</option>       <option selected="selected">select me</option>     </select><br />     <span>Vertical Overflow.</span>   </p>  </div>

CSS

`*.ex1 { overflow:visible; } *.ex2 { overflow:hidden; } *.ex3 { overflow:scroll; } *.ex4 { overflow:auto; }

/*  Nonessential rules are not shown.  */`

溢出

能见度

HTML

`

Visibility

There is hidden content here: **CAN YOU SEE ME NOW?**   You can't see it, because it's styled with visibility:hidden,   but you can see where it would have been rendered.

There is visible content here: **CAN YOU SEE ME NOW?** You can see it, because it's styled with visibility:visible.

CSS

`span { padding:4px; background-color:white;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; } p  { background-color:gold; padding:10px; line-height:1.5em; }

*.hidden { visibility:hidden; } *.visible { visibility:visible; }

span:hover { visibility:hidden; }`

能见度

分页

HTML

 <div class="page-break-after">Page break after this element. </div>  **<div class="page-break-after">Page break after this element. </div>**  **<div class="page-break-before">Page break before this element.</div>**

CSS

*.page-break-before { page-break-before:always; } *.page-break-after { page-break-after:always; }

打印预览

分页

七、定位模型

这是关于定位的三章中的第一章。本章介绍 CSS 定位模型。第八章展示了如何缩进、偏移和对齐元素。第九章结合这些技术创建高级定位设计模式。

章节大纲

• 定位模型介绍并演示六种定位模型。
• 定位解释、演示和对比position属性的四个值:static、absolute、fixed和relative。
• 最近定位的祖先展示了如何相对于任何祖先元素定位绝对框，而不仅仅是元素的父元素。
• 堆叠环境展示了如何将定位好的盒子堆叠在静态元素的前面或后面以及彼此之间。
• Atomic 解释了如何在块中呈现内联内容*，而不是在块中呈现。*
• 静态解释正常流程的基础。
• Absolute 显示了如何从正常流中移除任何元素，并相对于其最近定位的祖先的边界内的对其进行绝对定位。
• 固定显示如何从正常流程中移除任何元素，并相对于视口绝对定位。
• Relative 展示了如何使用相对定位来控制堆叠顺序，或者偏移一个元素而不影响其形状或其他元素的位置。
• Float and Clear 展示了如何从正常流中移除一个元素，并将其浮动到其父元素的左侧或右侧。它还展示了如何清除元素，使它们位于浮动的左侧、右侧或两侧。
• 相对浮动展示了如何相对定位一个浮动。

定位车型

HTML

`

Positioning Models

CSS

*.centered { width:380px; margin-left:auto; margin-right:auto; } *.static { **position:static;** } *.absolute { **position:absolute;** top:20px; left:215px; } *.fixed { **position:fixed;** bottom:20px; right:5px; } *.relative { **position:relative;** top:20px; left:30px; } *.float { **float:right;** }

定位车型

摆好位置

HTML

` 

Positioned

CSS

`div,p,em { margin:10px; padding:10px; background-color:white;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; }

*.static { position:static; } *.relative { position:relative; left:auto; top:auto; bottom:auto; right:auto; } *.absolute { position:absolute; left:35%; top:-40px; } *.fixed1 { position:fixed; z-index:20; right:5px; bottom:35px; } *.fixed2 { position:fixed; z-index:10; right:0px; bottom:0;   width:100px; margin:0;}

*.offset  { bottom:-15px; left:-20px; }

#canvas { background-color:gold; }

/*  Nonessential rules are not shown. */`

摆好位置

定位最近的祖先

HTML

`

Closest Positioned Ancestor

CSS

`*.static { position:static; } *.relative { position:relative; } *.absolute { position:absolute; }

*.sized { width:230px; height:70px; } *.bottom-right { bottom:0; right:0; } *.offset { left:45px; top:30px; }

/*  Nonessential rules are not shown. */`

定位最近的祖先

堆叠上下文

HTML

`

Stacking Context

CSS

`*.stacking-context1 { z-index:2; position:absolute; left:10px;  top:70px;  } *.stacking-context2 { z-index:1; position:absolute; left:223px; top:120px; }

*.level2 { z-index:-999; position:absolute; } *.level3 { position:static; } *.level4 { float:left; } *.level5 { position:static; } *.level6 { z-index:0; position:relative; } *.level7 { z-index:999; position:absolute; }

/*  Nonessential rules are not shown. */`

堆叠上下文

原子

HTML

`

Atomic

CSS

`*.static { position:static; } *.overlap { margin-top:-22px; }

*.relative { position:relative; } *.fixed { position:fixed; margin-top:-16px; } *.absolute { position:absolute; top:65px; }

/*  Nonessential rules are not shown. */`

原子

静态

HTML

`

Static

CSS

`span { position:static; margin:40px; line-height:32px;   padding:3px; border:2px solid black; background-color:yellow; }

#zs { position:static;  width:120px; height:100px; margin:10px auto; }

#ss { position:static;  width:auto;  height:auto; margin:10px 50px; }`

静态

绝对

HTML

`

Absolute

CSS

`#in-place  { position:absolute; z-index:1; }

#shrinkwrapped { position:absolute; z-index:0;   width:auto; left:0; bottom:0; margin:0; }

#sized { position:absolute; z-index:auto;   width:170px; height:115px; bottom:0; left:270px; margin:0; }

#stretched { position:absolute; z-index:-1;   height:auto; right:0; top:0; bottom:0; margin:0; }

/*  Nonessential rules are not shown. */`

绝对

固定

HTML

`

Fixed

CSS

`*.gp { position:relative; z-index:1; }

#in-place { position:fixed; z-index:1; }

#shrinkwrapped { position:fixed; z-index:0;   width:auto; left:0; bottom:0; margin:0; }

#sized { position:fixed; z-index:auto;   width:170px; height:115px; bottom:0; left:270px; margin:0; }

#stretched { position:fixed; z-index:-1;   height:auto; right:0; top:0; bottom:0; margin:0; }

/*  Nonessential rules are not shown. */`

固定

相对

HTML

`

Relative

CSS

`*.ontop { z-index:1; } *.static { position:static; } *.relative { position:relative; } *.absolute { position:absolute; z-index:auto; } *.offset  { left:20px; top:auto; }

/*  Nonessential rules are not shown. */`

相对

漂浮而清晰

HTML

`

Float

  <p class="clear-right">This paragraph clears floats on its right side.     <span class="float left  clear-left">Float Left     <span class="float right clear-right">Float Right

  <p class="clear-both">This paragraph clears floats on both sides.

CSS

`*.float { margin:0px 10px;  width:120px; background-color:yellow; color:black; } *.left { float:left; } *.right { float:right; } *.clear-left { clear:left; } *.clear-right { clear:right; } *.clear-both { clear:both; } *.clear-none { clear:none;  }

/*  Nonessential rules are not shown. */`

漂浮而清晰

相对浮动

HTML

`

Relative Float

CSS

`*.parent { position:relative; padding:20px; }

*.relative1 { position:relative; z-index:3; top:10px; left:10px; } *.relative2 { position:relative; z-index:2; top:20px; left:-30px; }

*.float { float:left; width:100px; height:50px;   margin-right:25px; margin-bottom:40px; }

*.absolute { position:absolute; z-index:1; top:102px; left:215px; }

/*  Nonessential rules are not shown. */`

相对浮动

八、定位：缩进、偏移和对齐

本章展示了边距如何偏移和对齐元素。

当一个被拉伸的元素的一个或多个边被移入或移出其容器时，该元素会被缩进或突出，从而改变元素的宽度或高度。

当整个元素从其正常位置移动而不改变元素的高度或宽度时，调整大小或收缩的元素被偏移。

当调整大小或收缩的元素被重新定位到其容器的一侧而不改变其大小和可选地从该侧偏移时，该元素被对齐。

章节大纲

• 显示了如何从容器的两侧缩进一个元素。
• 偏移静态显示了如何从周围的元素偏移一个元素。
• 偏移或缩进静态表格展示了如何从容器中偏移一个表格。
• 偏移浮动展示了如何从周围的浮动和内容中偏移一个浮动。
• 绝对偏移和固定偏移显示了如何从正常流程中的位置偏移绝对元素。
• 相对偏移显示了如何偏移任何元素而不影响其他元素。
• 对齐静态内联展示了如何水平和垂直对齐内联元素。
• 对齐和偏移静态块显示了如何对齐和偏移静态块元素。
• 对齐和偏移静态表格显示如何对齐和偏移表格。
• 绝对对齐和偏移显示了如何对齐和偏移绝对元素。
• 绝对居中对齐显示了如何将绝对元素居中对齐。
• 外部对齐展示了如何将元素对齐到其容器的外部。

缩进

HTML

`

Indented

CSS

`.gp { position:relative; z-index:10; }

#hss { position:static;    width:auto; margin-left:30px; margin-right:30px;    height:auto; margin-top:auto; margin-bottom:20px; }

#vsa { position:absolute;    width:120px; left:auto; margin-left:auto; right:0; margin-right:70px;    height:auto; top:0; margin-top:-30px; bottom:0; margin-bottom:-30px; }

#hsa { position:absolute;    width:auto; left:0; margin-left:-30px; right:0; margin-right:-30px;    height:auto; top:auto; margin-top:30px; bottom:auto; margin-bottom:auto; }

/* Nonessential rules are not shown. */`

缩进

偏移静态

HTML

`

Offset Static

CSS

`.moved-left { margin-left:-26px; } .push-right { margin-right:50px; } .moved-right { margin-left:50px; } .pull-left { margin-right:-20px; } .moved-down { margin-top:20px; } .push-down { margin-bottom:20px; } .moved-up { margin-top:-13px; } .pull-up { margin-bottom:-16px; }

/* Nonessential rules are not shown. */`

偏移静态

偏移或缩进静态表格

HTML

`

Offset or Indented Static Table

CSS

`.l-wrap { width:auto; margin-left:60px; margin-right:auto; } .r-wrap { width:auto; margin-left:auto; margin-right:60px;}

.stretched { width:80%; margin-left:auto; margin-right:auto; }

.r-sized { width:300px; margin-left:auto; margin-right:60px; text-align:right; } .l-sized { width:300px; margin-left:60px; margin-right:auto; text-align:left; }

/* Nonessential rules are not shown. */`

偏移或缩进静态表格

偏移浮动

HTML

`

Offset Float

CSS

`.sized { width:70px; height:60px; margin:10px; } .widened { width:175px; } .shrunk { margin:3px; padding:1px; background-color:white; }

.right-extended { margin-right:120px; } .right-retracted { margin-right:-55px; } .left-retracted { margin-left:-185px; } .top-extended { margin-top:20px; }

.float-left { float:left; } .float-right { float:right; } .clear-left { clear:left; } .clear-right { clear:right; }

/* Nonessential rules are not shown. */`

偏移浮动

绝对偏移和固定偏移

HTML

`

Offset Absolute and Offset Fixed

CSS

`#absolute { position:absolute; width:140px; height:auto; }

#fixed { position:fixed;   height:50px; margin-top:10px;   width:auto; margin-left:10px; }

/* Nonessential rules are not shown. */`

绝对偏移和固定偏移

相对偏移

HTML

`

Offset Relative

CSS

`.float { float:left; width:90px; height:40px; } .sized { width:90px; height:40px; margin-left:auto; margin-right:0; } .indented { margin-left:60px; margin-right:60px; }

.relative { position:relative; }

.offset1 { left:0px; top:-12px; } .offset2 { left:-50px; top:10px; } .offset3 { left:50px; top:10px; } .offset4 { left:0px; top:-32px; }

/* Nonessential rules are not shown. */`

相对偏移

对齐静态内嵌

HTML

`

Aligned Static Inline

CSS

`.baseline { vertical-align:baseline; } .raised { vertical-align:10px; } .lowered { vertical-align:-10px; }

#l { position:static; text-align:left; } #c { position:static; text-align:center; line-height:48px; } #r { position:static; text-align:right; } #j { position:static; text-align:justify; }

/* Nonessential rules are not shown. */`

对齐静态内嵌

对齐和偏移静态块

HTML

`

Aligned and Offset Static Block

CSS

`#left { position:static; width:120px; margin-left:0; margin-right:auto; } #left-off { position:static; width:200px; margin-left:50px; margin-right:auto; } #center { position:static; width:120px; margin-left:auto; margin-right:auto; } #right { position:static; width:120px; margin-left:auto; margin-right:0; } #right-off { position:static; width:200px; margin-left:auto; margin-right:50px; }

/* Nonessential rules are not shown. */`

对齐和偏移静态块

对齐和偏移静态表

HTML

`

Aligned Static Table

CSS

`.l-wrap { width:auto; margin-left:0; margin-right:auto; } .c-wrap { width:auto; margin-left:auto; margin-right:auto;} .r-wrap { width:auto; margin-left:auto; margin-right:20px; }

.stretched { width:100%; margin-left:0; margin-right:0; }

.r-sized { width:350px; margin-left:auto; margin-right:0; text-align:right; } .c-sized { width:350px; margin-left:auto; margin-right:auto; text-align:center; } .l-sized { width:350px; margin-left:20px; margin-right:auto; text-align:left; }

/* Nonessential rules are not shown. */`

对齐和偏移静态表

对齐和绝对偏移

HTML

`

Aligned and Offset Absolute

CSS

`div { position:relative; }

#lt { position:absolute;   width:auto; left:0; margin-left:8px; right:auto; margin-right:auto;   height:auto; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; } #lb { position:absolute;   width:240px; left:0; margin-left:8px; right:auto; margin-right:auto;   height:18px; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; } #cm { position:absolute;   width:200px; left:0; margin-left:auto; right:0; margin-right:auto;   height:18px; top:0; margin-top:auto; bottom:0; margin-bottom:auto; } #rt { position:absolute;   width:220px; left:auto; margin-left:auto; right:0; margin-right:8px;   height:18px; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; } #rb { position:absolute;   width:auto; left:auto; margin-left:auto; right:0; margin-right:8px;   height:auto; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; }

/* Nonessential rules are not shown. */`

对齐和绝对偏移

绝对居中对齐

HTML

`

Aligned-center Absolute

CSS

`div { position:relative; } #cm { position:absolute; }

.hc { width:200px; left:0; margin-left:auto; right:0; margin-right:auto; } .vc { height:40px; top:0; margin-top:auto; bottom:0; margin-bottom:auto; }

/* Nonessential rules are not shown. */`

绝对居中对齐

外对齐

HTML

`

Aligned Outside

CSS

`.parent { position:relative; height:140px; width:200px; }

.sized-block-outside-left { width:220px; margin-left:-234px; } .sized-block-outside-right { width:220px; margin-left:100%; } .sized-float-outside-left { width:220px; margin-left:-234px; float:left; } .sized-float-outside-right { width:220px; margin-left:100%; float:left; }

.left { position:absolute; right:100%; margin-right:5px; } .right { position:absolute; left:100%; margin-left:5px; } .top { position:absolute; bottom:100%; margin-bottom:5px; } .bottom { position:absolute; top:100%; margin-top:5px; }

/* Nonessential rules are not shown. */`

外对齐

九、定位：高级

这是关于定位的三章中的第三章。它将前两章的定位技术结合到 12 个设计模式中，在拉伸、调整或收缩静态和定位元素时，将它们对齐和偏移到容器的左侧、中间、右侧、顶部、中间或底部。本章主要关注静态和绝对定位的元素。

本章结合了第八章中的设计模式来对齐和偏移容器中的元素。它还引入了新的模式来从容器的顶部、中部和底部对齐和偏移元素。如果你还不熟悉第五章—第八章中的设计模式，你可能想回顾一下。因为从左侧和右侧对齐和偏移是相似的，所以您可能想跳过右对齐和右偏移。

章节大纲

• 左对齐展示了如何将一个元素与其容器的左侧对齐。
• 左偏移显示了如何偏移一个左对齐的元素。
• 右对齐展示了如何将一个元素与其容器的右侧对齐。
• 右偏移显示了如何偏移一个右对齐的元素。
• 居中对齐展示了如何将一个元素与其容器的中心对齐。
• 中心偏移显示如何偏移一个中心对齐的元素。
• 顶部对齐展示了如何将一个元素对齐到其容器的顶部。
• 顶部偏移显示了如何偏移顶部对齐的元素。
• 底部对齐展示了如何将一个元素对齐到其容器的底部。
• 底部偏移显示了如何偏移一个底部对齐的元素。
• 居中对齐展示了如何将一个元素对齐到其容器的中间。
• 中间偏移显示如何偏移中间对齐的元素。

左对齐

HTML

<h1>Left Aligned</h1>  <div **class="gp"**>Positioned Grandparent     <div **class="parent"**>Non-positioned Parent     <div **id="zs"** class="example">Sized Static Block </div>     <div **id="ss"** class="example">Stretched Static Block</div>     <span **id="za"** class="example">Sized Absolute</span>     <span **id="wa"** class="example">Shrinkwrapped Absolute</span>     <span **id="sa"** class="example">Stretched Absolute</span></div></div>

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black; } .parent <{ margin:10px; padding:10px; padding-top:0; border:1px solid black; } .example { padding:5px; <border:5px solid black; <background-color:gold;   <<}

#zs { position:static;          text-align:left;                      margin-top:5px; width:400px;                    margin-left:0;              margin-right:auto; } #ss { position:static;          text-align:left;                      margin-top:5px; width:auto;                     margin-left:0;              margin-right:0;    } #za { position:absolute;        text-align:left;                   top:0; margin-top:155px; width:400px;  left:0;           margin-left:0;  right:auto; margin-right:auto; } #wa { position:absolute;        text-align:left;             top:0; margin-top:200px; width:auto;   left:0;           margin-left:0;  right:auto; margin-right:auto; } #sa { position:absolute;        text-align:left;              top:0; margin-top:245px; width:auto;left:0;              margin-left:0;  right:0;    margin-right:0;    }`

左对齐

向左偏移

HTML

`

Left Offset

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;     } div.ex  span { margin-left:-60px; border:1px dotted black; } span.ex span { margin-left:30px;  border:none;             }

#zs { position:static;          text-align:left;                   margin-top:5px;         width:400px;            margin-left:50px;                margin-right:auto; } #ss { position:static;          text-align:left;                   margin-top:5px;         width:auto;             margin-left:50px;                margin-right:0;    } #za { position:absolute;        text-align:left;          top:0; margin-top:155px;         width:400px;  left:0;   margin-left:-50px;   right:auto;  margin-right:auto;} #wa { position:absolute;        text-align:left;          top:0; margin-top:200px;         width:auto;   left:0;   margin-left:-50px;   right:auto; margin-right:auto;} #sa { position:absolute;        text-align:left;          top:0; margin-top:245px;                     width:auto;   left:0;   margin-left:-50px;   right:0;    margin-right:0;   }`

向左偏移

右对齐

HTML

 <h1>Right Aligned</h1>  <div class="gp">Positioned Grandparent    <div class="parent">Non-positioned Parent      <div  **id="zs"** class="example">Sized Static Block </div>      <div  **id="ss"** class="example">Stretched Static Block</div>      <span **id="za"** class="example">Sized Absolute</span>      <span **id="wa"** class="example">Shrinkwrapped Absolute</span>      <span **id="sa"** class="example">Stretched Absolute</span></div></div>

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .example { padding:5px;  border:5px solid black;  background-color:gold;     }

#zs { position:static;          text-align:right;                    margin-top:5px;         width:400px;            margin-left:auto;           margin-right:0;       } #ss { position:static;          text-align:right;                    margin-top:5px;         width:auto;             margin-left:0;              margin-right:0;       } #za { position:absolute;        text-align:right;           top:0; margin-top:155px;        width:400px;   left:auto; margin-left:auto; right:0; margin-right:0;       } #wa { position:absolute;        text-align:right;           top:0; margin-top:200px;         width:auto;   left:auto; margin-left:auto; right:0; margin-right:0;       } #sa { position:absolute;        text-align:right;                  top:0; margin-top:245px;         width:auto;   left:0;   margin-left:0;     right:0; margin-right:0;       }`

右对齐

向右偏移

HTML

`

Right Offset

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;     } div.ex  span { margin-right:-60px; border:1px dotted black; } span.ex span { margin-right:30px;  border:none;             }

#zs { position:static;        text-align:right;                 margin-top:5px;         width:400px;          margin-left:auto;          margin-right:50px;    } #ss { position:static;        text-align:right;                 margin-top:5px;          width:auto;           margin-left:0;             margin-right:50px;    } #za { position:absolute;      text-align:right;         top:0; margin-top:155px;         width:400px; left:auto; margin-left:auto; right:0;  margin-right:-50px;  } #wa { position:absolute;      text-align:right;         top:0; margin-top:200px;         width:auto;  left:auto; margin-left:auto; right:0;      margin-right:-50px;  } #sa { position:absolute;      text-align:right;         top:0; margin-top:245px;         width:auto;  left:0; margin-left:0;    right:0;         margin-right:-50px;  }`

向右偏移

居中对齐

HTML

 <h1>Center Aligned</h1>  <div class="gp">Positioned Grandparent    <div class="parent">Non-positioned Parent      <div  **id="zs"** class="example">Sized Static Block </div>      <div  **id="ss"** class="example">Stretched Static Block</div>      <span **id="za"** class="example">Sized Absolute</span>      <span **id="wa"**>An element can't be shrinkwrapped if it is centered.</span>      <span **id="sa"** class="example">Stretched Absolute</span></div></div>

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .example { padding:5px;  border:5px solid black;  background-color:gold;     }

#zs { position:static;         text-align:center;                    margin-top:5px;       width:400px;             margin-left:auto;                margin-right:auto;  } #ss { position:static;         text-align:center;                    margin-top:5px;       width:auto;              margin-left:70px;                margin-right:70px;     } #za { position:absolute;       text-align:center;           top:0; margin-top:155px;                width:67%;  left:0;            margin-left:auto; right:0;     margin-right:auto;  } #wa { position:absolute;       text-align:center;             top:0; margin-top:200px;       width:auto;   left:0;    margin-left:0;    right:0;       margin-right:0;     } #sa { position:absolute;       text-align:center;             top:0; margin-top:245px;       width:auto;   left:0;    margin-left:15%;  right:0;       margin-right:15%;     }`

居中对齐

中心偏移

HTML

`

Center Offset

CSS

`.gp { position:relative; height:295px; width:600px; border:2px solid black;      } .parent { margin:10px; padding:10px; padding-top:0; border:1px solid black;      } .ex     { padding:5px;  border:5px solid black;  background-color:gold;          } .ex span { margin-left:-40px; }

#zs { position:static;          text-align:center;                  margin-top:5px;       width:auto;               margin-left:90px;            margin-right:10px;    } #ss { position:static;          text-align:center;                  margin-top:5px;       width:auto;               margin-left:90px;          margin-right:10px;    } #za { position:absolute;        text-align:center;         top:0; margin-top:155px;       width:440px; left:80px;   margin-left:auto; right:0; margin-right:auto;    } #wa { position:absolute;        text-align:center;         top:0; margin-top:200px;       width:auto;  left:0;      margin-left:110px; right:0;  margin-right:30px;    } #sa { position:absolute;        text-align:center;         top:0; margin-top:245px;       width:auto;  left:0;      margin-left:110px; right:0;  margin-right:30px;    }`

中心偏移

顶端对齐

HTML

`

Top Aligned

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;            width:120px; text-align:center; position:relative;      } .ex span { left:0; width:130px; height:auto; }

#zs { height:100px;             margin-top:0;                margin-bottom:auto;       position:static;                                                          } #ws { height:auto;              margin-top:0;                margin-bottom:auto;       position:static;                                                          } #za { height:100px;      top:0; margin-top:0;  bottom:auto;  margin-bottom:auto;       position:absolute;                                     margin-left:200px; } #wa { height:auto;       top:0; margin-top:0;  bottom:auto;  margin-bottom:auto;       position:absolute;                                     margin-left:355px; } #sa { height:auto;       top:0; margin-top:0;  bottom:0;     margin-bottom:0;       position:absolute;                                     margin-left:510px; }`

顶端对齐

顶部偏移

HTML

`

Top Offset

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;            width:120px; text-align:center; position:relative;      } .ex span { left:0; width:130px; height:auto; }

#zs { height:100px;             margin-top:25px;                      margin-bottom:0; position:static;                                                                   } #ws { height:auto;              margin-top:-70px;                     margin-bottom:0; position:static;                                                background-color:yellow; } #za { height:100px;   top:0;    margin-top:70px;  bottom:auto;        margin-bottom:auto; position:absolute;                                                    margin-left:200px; } #wa { height:auto;    top:0;    margin-top:70px;  bottom:auto;        margin-bottom:0; position:absolute;                                                    margin-left:355px; } #sa { height:auto;    top:0;    margin-top:70px;  bottom:0;           margin-bottom:0; position:absolute;                                                    margin-left:510px; }`

顶部偏移

底端对齐

HTML

`

Bottom Aligned

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;            width:120px; text-align:center; position:relative;  } .ex span { height:auto; left:0; width:130px; }

span.ex span {position:absolute;top:auto;margin-top:auto;bottom:0;margin-bottom:0; } #zs { height:100px;           margin-top:auto;           margin-bottom:0;       position:static;                                          margin-left:0px;   } #ws { height:auto;            margin-top:auto;           margin-bottom:0; position:static;                                                                   } #za { height:100px; top:auto; margin-top:auto; bottom:0; margin-bottom:0; position:absolute;                                              margin-left:200px; } #wa { height:auto;  top:auto; margin-top:auto; bottom:0; margin-bottom:0;       position:absolute;                                              margin-left:355px; } #sa { height:auto;  top:0;    margin-top:0;    bottom:0; margin-bottom:0;       position:absolute;                                              margin-left:510px; }`

底端对齐

底部偏移

HTML

`

Bottom Offset

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;  } .parent  { margin:10px; padding:10px; padding-top:0; border:1px solid black; } .ex      { padding:5px;  border:5px solid black;  background-color:gold;            width:120px; text-align:center; position:relative;  } .ex span { height:auto; left:0; width:130px; } span.ex span{position:absolute;top:auto;margin-top:auto;bottom:5px;margin-bottom:0;}

#zs { height:100px;           margin-top:auto;          margin-bottom:-70px;       position:static;                                                             } #ws { height:auto;            margin-top:auto;          margin-bottom:120px;       position:static;                                  background-color:yellow;   } #za { height:100px; top:auto; margin-top:auto; bottom:0; margin-bottom:50px;       position:absolute;                                        margin-left:200px; } #wa { height:auto;  top:auto; margin-top:auto; bottom:0; margin-bottom:50px;       position:absolute;                                        margin-left:355px; } #sa { height:auto;  top:0;    margin-top:auto; bottom:0; margin-bottom:50px;       position:absolute;                                        margin-left:510px; }`

底部偏移

居中对齐

HTML

`

Middle Aligned

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;       } .ex1 { width:120px; padding:5px; text-align:center; border:1px dotted black;      } .ex2 { position:relative; border:5px solid black;  background-color:gold; left:0; } .ex1 span  { height:36px; left:0; width:130px;        position:absolute; top:0; margin-top:auto; bottom:0; margin-bottom:auto;   }

#ia   { height:100px;  top:0; margin-top:auto; bottom:0; margin-bottom:auto;         position:absolute;    line-height:100px;                margin-left:40px; } #za   { height:100px;  top:0; margin-top:auto; bottom:0; margin-bottom:auto;         position:absolute;                                      margin-left:200px; } #wa   { height:auto;   top:0; margin-top:90px; bottom:0; margin-bottom:90px;         position:absolute;                                      margin-left:355px; } #sa   { height:auto;   top:0; margin-top:90px; bottom:0; margin-bottom:90px;         position:absolute;                                      margin-left:510px; }`

居中对齐

中间偏移

HTML

` 

Middle Offset

CSS

`.gp { position:relative; height:300px; width:700px; border:2px solid black;               } .ex1 { width:120px; padding:5px; text-align:center; border:1px dotted black;      } .ex2 { position:relative; border:5px solid black;  background-color:gold; left:0; } .ex1 span { height:36px; left:0; width:130px;         position:absolute; top:0; margin-top:auto; bottom:0; margin-bottom:auto;   }

#ia   { height:100px; top:60px; margin-top:auto;  bottom:-60px; margin-bottom:auto;         position:absolute;      line-height:100px;             margin-left:40px; } #za   { height:100px; top:60px; margin-top:auto;  bottom:-60px; margin-bottom:auto;         position:absolute;                        margin-left:200px; } #wa   { height:auto;  top:0;    margin-top:150px; bottom:0;     margin-bottom:30px;         position:absolute;                                      margin-left:355px; } #sa   { height:auto;  top:0;    margin-top:150px; bottom:0;     margin-bottom:30px;         position:absolute;                                      margin-left:510px; }`

中间偏移

十、样式文本

这是包含设计文本样式的设计模式的三章中的第一章。下一章讨论如何在文本周围放置空间。第十二章讨论如何对齐文本。严格地说，这是唯一一章真正为正文设计了样式。接下来的两章使用了风格的内联元素，它们可以包含文本或者被图片、对象、控件、电影等等所替代。

章节大纲

• 字体展示了如何使用字体来设计文本样式。
• 高亮显示展示了如何使用彩色和平铺背景图像来高亮显示文本。
• 显示了如何为下划线、上划线和线条创建自定义样式。
• 文本阴影展示了如何在 Internet Explorer 6 和 Safari 中自动生成文本背后的阴影。
• 用图像替换文本展示了如何用图像替换文本。屏幕阅读器可以阅读文本，当图像不可用时，文本质量会下降。这是一个使网站美观和易访问的重要工具。
• 用画布和 VML 替换文本(矢量标记语言)由两个独立的部分组成:一个字体生成器，它使用 VML 将字体转换为专有格式，以及一个渲染引擎。这种技术的一个优点是用户可以选择和复制文本，而这在图像替换方法中是不可能的。
• 字体嵌入是 CSS3 对文本替换技术的替代，它使用@font-face属性直接从服务器下载字体文件，然后将其应用于元素。
• 不可见文本展示了如何在不添加标记的情况下隐藏文本。它不如文本替换有用，但不需要额外的标记。
• Screenreader-only 展示了如何使文本对屏幕阅读器可读，同时对视力正常的用户完全隐藏。这是一个重要的工具，可以让非视力用户访问网站，同时让视力正常的用户保持网站整洁。

字体

HTML

`

Font

**font-family**:sans serif  serif monospace

**font-size**:small  mediumlarge

**color**:black  gold

**font-style**:normal  italic

**font-weight**:normal  bold

**font-variant**:normal  smallcaps

**text-transform**:none  lowercaseuppercase  capitalize

CSS

.family1 { **font-family**:sans-serif; }      .family2 { font-family:serif; } .family3 { font-family:monospace; } .size1 { **font-size**:small; }               .size2 { font-size:medium; } .size3 { font-size:large; } .style1 { **font-style**:normal; }            .style2 { font-style:italic; } .weight1 { **font-weight**:normal; }          .weight2 { font-weight:bold; } .variant1 { **font-variant**:normal; }        .variant2 { font-variant:small-caps; } .color1 { **color**:black; }                  .color2 { **color**:gold; } .trans1 { **text-transform**:none; }          .trans2 { text-transform:lowercase; } .trans3 { text-transform:uppercase; }     .trans4 { text-transform:capitalize; }

字体

高亮显示

HTML

`

You can insert a **  highlight**   in any inline context. **  Highlights can span multiple**   lines. A highlight is a **  foreground color and a** **  background color**   applied to an inline element. **  Padding**   around a highlight can improve its visual appeal. You can increase the **  line height**   to make room for extra padding.

CSS

`p { margin-top:20px; letter-spacing:0.5px; line-height:1.9em; }

.highlight { color:white; background-color:black; **  padding-left:0.25em; padding-right:0.25em;** **  padding-top:0.05em;  padding-bottom:0.13em;** **  background-image:none; }**

.black-on-gold { color:black; background-color:gold; } .white-on-firebrick { color:white; background-color:firebrick; } .cyan-on-royalblue { color:lightcyan; background-color:royalblue; } .palegreen-on-darkgreen { color:palegreen; background-color:darkgreen; } .textured { color:black; background-color:white;   background-image:url("paper.jpg"); }`

高亮显示

文字装饰

HTML

`

Text Decoration

**  text-decoration:** **  underline  overline  ** **  line-through**

**  

border:** **  Under 4   Under 5  ** **  Under 6   Over 7  ** **  Over 8   Over 9  **

**  

background:** **  Under 10   Under 11  ** **  Under 12   Over 13  ** **  Over 14   Thru 15  **

CSS

`**.t1 { text-decoration:underline; }       .t2 { text-decoration:overline; }* .t3 { text-decoration:line-through; }

*.t4 { border-bottom:1px solid black; }   .t5 { border-bottom:1px dotted black; } *.t6 { border-bottom:2px dashed gray; }   .t7 { border-top:3px double red; } *.t8 { border-top:4px groove blue; }      .t9 { border-top:6px ridge green; }

.t10 { background:repeat-x left bottom url("tight-dot.gif"); padding-bottom:0px; } .t11 { background:repeat-x left bottom url("dotted.gif"); padding-bottom:0px; } .t12 { background:repeat-x left bottom url("wavy-green.gif"); padding-bottom:2px; } .t13 { background:repeat-x left top url("diamond-blue.gif"); padding-top:3px; } .t14 { background:repeat-x left top url("gradient3.gif"); padding-top:2px; } .t15 { background:repeat-x left center url("wavy-red3.gif"); padding:5px; }`

文字装饰

文字阴影

HTML

`

Text Shadow

Text Shadow applies to all text in a block.   This design pattern does not apply to inline elements in Internet Explorer 6.   This design pattern does not work in Opera 9, Firefox 2,   and other Mozilla Browsers

CSS 所有浏览器

.shadow { text-shadow:#999999 5px 5px 5px; }

CSS Internet Explorer 6

.shadow { filter:shadow(color=#999999, direction=135, strength=4); zoom:1; }

文字阴影

用图像替换文字

用图像替换文本的示例

浏览器无法显示图像时显示的示例

HTML

`

Text Replacement with Image

Heading 2

CSS

`#h2 { position:relative; width:250px; height:76px; padding:0; overflow:hidden; }

#h2 span { position:absolute; width:250px; height:76px; left:0; top:0; margin:0;   background-image:url("heading2.jpg"); background-repeat:no-repeat; }`

用图像替换文字

用画布和 Vml 替换文本

显示替换了文本的示例

HTML

`

Test Replacement with VML and canvas

Heading 2

用画布和 VML 替换文本

字体嵌入

字体渲染示例

HTML

`

Embedding Font

Heading 2

CSS

`@font-face { font-family: Chunkfive; src: url('chunkfive.otf') format ("opentype"); }

#h2 {         font-family: Chunkfive, Arial, sans-serif; }`

字体嵌入

不可见文字

HTML

`

Invisible Text

Invisible Text

CSS

.invisible-text {   text-indent:-9999px;   text-align:left;   width:75px;   height:35px;   background-image:url("go.jpg");   background-repeat:no-repeat;   background-position:center center; }

不可见文字

屏幕阅读器专用

HTML

`

Screenreader-only

Text before screenreader-only text.

**  This text is hidden to sighted users, but is read by screen readers.

**  You can make any type of element a screenreader-only element.**

Text after screenreader-only text.

CSS

.screenreader-only {   position:absolute;   left:-9999px;   top:-9999px;   width:1px;   height:1px;   overflow:hidden; }

屏幕阅读器专用