9 ���ӻ���ʽģ��

    Ŀ¼

9.1 ���ӻ���ʽģ�ͼ��

    ���º���һ�����������ӻ���ʽģ�����û�����ͼ��ý������δ����ĵ�����

    ���ӻ���ʽģ���У�ÿһ���ĵ����е�Ԫ�ظ���������ģ����������������ƿ���Щ��IJ������������ݿ��ƣ�

    ���º���һ���ж������������������ý����ҳ��ý���������߾������ĺ�����Ӧ�õ�ҳ��ý��ʱ����Щ��ͬ����ϸ������μ�ҳ��ģ������

    ���ӻ���ʽģ�Ͳ���ָ����ʽ�������з��棨���磬������ָ���ַ�����㷨������CSSһ�µ��û����ڴ������淶δ�����ĸ�ʽ������ʱ�����ֿ���������ͬ��

9.1.1 �ӵ�

    ����ý�����û���ͨ���ṩ���û�һ���ӵ�����Ļ�ϵ�һ�����ڻ�������򣩣�ͨ�����û�������ĵ������ӵ�ߴ�ı�ʱ���û��˿��ܸı��ĵ��IJ��֣��μ���ʼ��������������ӵ���ĵ��ij�ʼ������С���û��˿����ṩ�������ơ�����һ����Ⱦ�������ԣ����ֻ����һ���ӵ㣬�����û��˿��ԶԶ����Ⱦ���������Ⱦ������ͬһ�ĵ��ṩ��ͬ���ӵ㣩��

9.1.2 ������

    CSS2�У��ܶ���λ�úͳߴ�ļ��㶼����һ������Ϊ�������ij����κ��ӵ��ıߡ�ͨ���أ����ɵĿ����Ϊ��������İ����飻����˵һ���򡰽�����������������İ����顣���һ����İ����顱��ζ�š��ÿ������ڵ��Ǹ������顱���������������ɵĿ顣

    ���ڿ�İ����飬ÿһ������һ����λ�����������������������ƣ������������

    �ĵ����ĸ�����һ������Ϊ��̲��ֵ���ʼ��������

    ��ʼ������Ŀ��ȿ����ɸ�Ԫ�ص�'width'����ָ�������������ȡֵΪ'auto'���û����ṩ��ʼ���ȣ��磬�û���ʹ���ӵ��ĵ�ǰ���ȣ���

    ��ʼ������ĸ߶ȿ����ɸ�Ԫ�ص�'height'����ָ�������������ȡֵΪ'auto'��������ĸ߶Ƚ���������Ӧ�ĵ����ݡ�

    ��ʼ�����鲻���Ա���λ�򸡶��������û���������Ԫ�ص�'position'��'float'���ԣ���

    ������ߴ���μ����ϸ������������һƪ��

9.2 ���ư����������

    ����ļ���������CSS2�п������ɵİ���������͡�һ��������Ͳ��ֵ�Ӱ�����ڿ��ӻ���ʽģ���еı��֡��������۵�'display'���Ծ����˿�����͡�

9.2.1 ����Ԫ�غͿ���ƿ�

    ����Ԫ����Դ�ĵ�����Щ���Ӿ��ϱ���ʽ��Ϊ�飨�磺���䣩����ЩԪ�ء�ijЩ'display'���Ե�ȡֵ��������Ԫ�أ�'block'��'list-item'��'compact'��'run-in'��ijЩʱ�򣻲μ�ѹ���Ŀ��ƿ�������Ŀ��ƿ������Լ�'table'��

    ����Ԫ������һ��ԭʼ����ƿ�����ֻ��������ƿ���ԭʼ����ƿ�������������������ݵ������������������κζ�λ�����ж�Ҫǣ�浽�Ŀ�Ԫ�ؿ���ƿ�������ʽ����������

    ijЩ����Ԫ����ԭʼ��֮�����ɶ���Ŀ�'list-item'Ԫ�غ���Щ���������Ԫ�ء���Щ����Ŀ����ԭʼ������λ��

��������ƿ�

    ������һ���ĵ���

<DIV>
  Some text
  <P>More text
</DIV>
�����ٶ�DIV��P��������'display: block'����DIV�����������ںͿ����ݡ�Ϊ��ʹ��ʽ����һЩ�����Ǽٶ���һ����������ƿ�Χ����"Some text"��Χ��

    diagram showing the three
boxes for the example above   [D]

ͼ����ʾ�������������ƿ�����һ���������ġ�

    ���仰˵�����һ������ƿ���������ΪDIV���ɵĿ������а�������һ������������е�P��������ǿ����������ֻ������򣬶����κε����ڿ򶼰�����һ���������֮�ڡ�

���ӣ�

    ��һģ�Ͷ�������������á�������µĹ���

/* Note: HTML UAs may not respect these rules */
BODY { display: inline }
P    { display: block }

    Ӧ�������µ�HTML�ĵ��У�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
This is anonymous text before the P.
<P>This is the content of P.</>
This is anonymous text after the P.
</BODY>

    BODYԪ�ذ���һ�������ı��飨C1���������һ�������ı��飨C2�������Ŀ��ƿ���BODY��һ����������ƿ򣬰���C1��Χ��һ����������ƿ�P����ƿ��Լ�����һ��C2��Χ����������ƿ�

    ����������ԴӰ������ķ�����������̳ж����������У���DIV�Ŀ��ƿ򣩡����ܼ̳е�����ȡ���ǵij�ʼֵ�����磬������������DIV�̳У����DZ߾�Ϊ0��

9.2.2 ������Ԫ�غ����ڿ��ƿ�

    ����Ԫ��Դ�ĵ�����Щ���γ��µ����ݿ��Ԫ�أ����������ڷֲ����磬���������ص��ı�������ͼ�εȵȣ���ijЩ'display'���Ե�ȡֵ�γ�������Ԫ�أ�'inline'��'inline-table'��'compact'��'run-in'��ijЩʱ�򣻲μ�ѹ���Ŀ��ƿ�������Ŀ��ƿ���������Ԫ���������ڿ��ƿ���

    ���ڿ��ƿ���Բ��뼸����ʽ�������ݣ�

�������ڿ��ƿ�

    �����µ��ĵ��У�

<P>Some <EM>emphasized</em> text</P>

    PԪ������һ������ƿ����ڻ��м������ڿ�"emphasized"�Ŀ���һ������Ԫ�أ�EM�����������ڿ򣬶������Ŀ�"Some"��"text"���ǿ���Ԫ�أ�P�������ġ����߾ͳ�Ϊ�������ڿ��ƿ�����Ϊ����û����֮��ص�����Ԫ�ء�

    ���������ڿ���丸�������̳п��Լ̳е����ԡ��Ǽ̳�����ȡ���ǵij�ʼֵ�������У���ʼ���������ɫ�̳���P����������͸���ġ�

    ������������Ŀ���ȷ�����������������ͣ��������ڿ��ƿ����������ƿ��ڱ��淶�ж�����Ϊ�������ƿ������򣩡�

    �ڸ�ʽ������ʱ��������ָ������͵�������

9.2.3 ѹ���Ŀ��ƿ�

    һ��ѹ���Ŀ��ƿ�������Ϊ���£�

    ѹ�����ڱ߾��еĶ�λ�������£����ڿ�ĵ�һ���п�����ߣ���߻��ұߣ���������Ӱ���Ǹ��п�߶��ļ��㡣ѹ�����'vertical-align'����ȷ��ѹ��������ڸ��п�Ĵ�ֱλ�á�ѹ�����ˮƽλ�������ڿ��ı߾��ڡ�

    ���һ��Ԫ�ز����Ա���ʽ����һ���ڣ����Ͳ��ܷ�������һ����ı߾��С����磬һ��HTML�е�'compact'Ԫ�ذ���һ��BRԪ�����DZ���ʽ��Ϊһ���������BRԪ�ص�ȱʡ��ʽ��������һ�����У���Ҫ�ڱ߾��з��ö����ı���ʹ��'float'���Կ��ܸ��Ӻ��ʡ�

    ������ʾ��һ��ѹ���Ŀ��ƿ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A compact box example</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Short
        <DD><P>Description goes here.
      <DT>too long for the margin
        <DD><P>Description goes here.
    </DL>
  </BODY>
</HTML>

    �������ܸ�ʽ��Ϊ��

short    Description goes here

too long for the margin
         Description goes here

    'text-align'���Կ��������ڱ߾��ڶ���ѹ����Ԫ�أ�����߾����ߣ�'left'���������ұߣ�'right'������У�'center'����ֵ'justify'�����ã���������Ϊ������'left'��������'right'��ȡ����ѹ��Ԫ�������и�ʽ���Ŀ���Ԫ�ص�'direction'�������������'ltr'���������������'right'�����ҡ���

    ��μ����ɵ�����һ�ڣ����˽�ѹ���Ŀ�����ɵ�����֮�以�����õ����ݡ�

9.2.4 ����Ŀ��ƿ�

    һ������Ŀ��ƿ��������£�

    һ��'run-in'���ڲ������ʱ�����ã���������

    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A run-in box example</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>A run-in heading.</H3>
    <P>And a paragraph of text that
       follows it.
  </BODY>
</HTML>

    �������ܱ���ʽ��Ϊ��

  A run-in heading. And a
  paragraph of text that 
  follows it.

    ����Ԫ�ص����Լ̳���Դ�������ĸ�Ԫ�أ������������Ӿ�������Ϊ��һ���ֵ��Ǹ����

    ��μ����ɵ�����һ�ڣ����˽�������������ɵ����ݽ������õ���Ϣ��

9.2.5 'display'����

'display'
ֵ��  inline | block | list-item | run-in | compact | marker |table | inline-table | table-row-group | table-header-group |table-footer-group | table-row | table-column-group | table-column |table-cell | table-caption | none | inherit
��ʼֵ��  inline
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ����

    ������ȡֵ�ĺ������£�

block
��ֵʹһ��Ԫ������һ��ԭʼ���
inline
��ֵʹһ��Ԫ������һ���������ڿ�
list-item
��ֵʹһ��Ԫ�أ���HTML�е�LI������һ��ԭʼ����һ���б������ڿ�Ҫ�˽��б����б���ʽ������Ϣ����μ��б�һ�ڡ�
marker
��ֵ��������һ����֮ǰ��֮������ɵ�����Ϊһ����ǡ���ֵֻ�ܺ������Ԫ��������:before��:afterαԪ�����ʹ�á�����������£���ֵ������Ϊ'inline'���������Ϣ��μ����һ�ڡ�
none
��ֵʹһ��Ԫ������ʽ���ṹ���������򣨼�����Ԫ�ضԲ���û��Ӱ�죩��������Ԫ��Ҳ�������κο򣻸���Ϊ��������������Ԫ�ص�'display'���Զ�����Խ��

��ע��'none'����ʾ���Բ�������һ�����ɼ��Ŀ������������ɿ�CSS�����˻���ʹһ��Ԫ���ܹ��ڸ�ʽ���ṹ�����ɿ��Ӱ���ʽ�������������ɼ�����μ�������һ���Ի����ϸ������

������ѹ��
���������ģ���ЩֵҪô���ɿ��Ҫô�������ڿ򡣶��ڲ����ѹ�������õ����Ի����������յ�״̬�����ڻ���ࣩ�����磬'white-space'���Խ��ڿ��Ϊ���ʱ�����á�
table��inline-table��table-row-group��table-column��table-column-group��table-header-group��table-footer-group��table-row��table-cell��table-caption
��Щֵʹһ��Ԫ�ر���Ϊ����һ������Ԫ�أ���Ҫ����������һ�������۵������ƣ���

    ע�⣬����'display'����ʼֵ��'inline'���û��˵�ȱʡ��ʽ��������Խ�����μ���¼�е�HTML 4.0ʾ����ʽ����

���ӣ�

    

    ������һЩ'display'���Ե����ӣ�

P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Don't display images */

    һ�µ�HTML�û��˿���������'display'���ԡ�

9.3 �����

    CSS2�У�һ�����ƿ�IJ��ֿ��Ը���������λ������

  1. ����������CSS2�У��������������������ʽ��������������ڸ�ʽ�����������ڿ����Զ�λ���Լ�ѹ����������Ķ�λ��
  2. �������ڸ���ģ���У�һ�������ȸ��ݳ������򲼾֣��ٽ���������ȡ���������ܵ����������ƫ�ơ����ݿ���������һ�������ı��ϡ�
  3. ���Զ�λ���ھ��Զ�λģ���У�һ���������شӳ������������루���Ժ�����ͬ��û��Ӱ�죩��������һ���������������䶨λ��
ע�⡣CSS2�Ķ�λ������������ʹ���ǵ��ĵ��������Ķ���������Ҫʹ�ö�λ���ɣ��粻�ɼ���ͼ�Σ����ﵽ����Ч����

9.3.1 ѡ��λ������'position'����

    'position'��'float'����ָ��ѡ���ĸ�CSS2��λ�����������Ķ�λ��

'position'
ֵ��  static | relative | absolute | fixed | inherit
��ʼֵ��  static
�����ڣ�  ����Ԫ�أ��������ɵ�����
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ȡֵ�ĺ������£�

static
�ÿ���һ������Ŀ��ƿ򣬲��ָ�������������'left'��'top'���Բ����á�
relative
���λ�ø��������������㣨����Ϊ���������е�λ�ã���Ȼ�����������ij���λ�ö�ƫ�ơ����B������Զ�λ�ģ�����ȥ�Ŀ�Ķ�λ���㲢������B��ƫ�ơ�
absolute
���λ�ã����ܻ������ijߴ磩����'left'��'right'��'top'��'bottom'���Ծ�������Щ����ָ���˻��ڿ����������ƫ�ơ����Զ�λ�Ŀ�ӳ������������롣����ζ�����Ƕ�����ͬ���Ķ�λû��Ӱ�졣ͬ���ģ��������Զ�λ���б߾࣬���Dz���������߾෢���غ�����������
fixed
��Ķ�λ�ļ������'absolute'ģ�ͣ�������Ҫ����ظ���һЩ�ο����õ��̶���������ý��������£����λ�û����ӵ��̶���ý�����ʱ�����ƶ�������ҳ��ý��������£����λ�û���ҳ����̶�����ʹ��ҳ��ͨ��һ���ӵ������֣������ڴ�ӡԤ��������£������߿���ϣ����ý����صķ�ʽ��ָ��'fixed'�����磬һ�����߿���ϣ��һ����������һ����Ļ�ӵ��Ķ��ˣ�����������ÿһ����ӡҳ�Ķ��ˡ��������������ʹ��@media�������Էָ�磺

���ӣ�

    

   
@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

9.3.2 ���ƿ�ƫ����'top'��'right'��'bottom'��'left'

    ���һ��Ԫ�ص�'position'����ֵ��ȡֵ����'static'�Ļ�����Ԫ�ر���Ϊ��λ������λ��Ԫ�����ɶ�λ���䶨λ�����ĸ����ԣ�

'top'
ֵ��  <length> | <percentage> | auto | inherit
��ʼֵ��  auto
�����ڣ�  ��λ��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ���ڰ�����ĸ߶�
ý�飺  ͼ��

    ������ָ��һ��������ݵĶ�����Ըÿ���������Ķ�������ƫ�Ƶ�����

'right'
ֵ��  <length> | <percentage> | auto | inherit
��ʼֵ��  auto
�����ڣ�  ��λ������
�ɷ�̳У�  ��
�ٷֱȣ�  ���ڰ�����Ŀ���
ý�飺  ͼ��

    ������ָ��һ��������ݵ��ұ���Ըÿ�����������ұ�����ƫ�Ƶ�����

'bottom'
ֵ��  <length> | <percentage> | auto | inherit
��ʼֵ��  auto
�����ڣ�  ��λ������
�ɷ�̳У�  ��
�ٷֱȣ�  ���ڰ�����ĸ߶�
ý�飺  ͼ��

    ������ָ��һ��������ݵĵױ���Ըÿ���������ĵױ�����ƫ�Ƶ�����

'left'
ֵ��  <length> | <percentage> | auto | inherit
��ʼֵ��  auto
�����ڣ�  ��λ������
�ɷ�̳У�  ��
�ٷֱȣ�  ���ڰ�����Ŀ���
ý�飺  ͼ��

    ������ָ��һ��������ݵ������Ըÿ�����������������ƫ�Ƶ�����

    ���ĸ����Ե�ȡֵ�ĺ������£�

<length>
ƫ���Ǿ�����ձߵĹ̶�ֵ��
<percentage>
ƫ���ǰ�������ȣ�����'left'��'right'����߶ȣ�����'top' ��'bottom'���İٷֱȡ�����'top'��'bottom'�����������ĸ߶�û����ʽָ��������ȡ�������ݵĸ߶ȣ����ٷֱ�ֵ������Ϊ'auto'��
auto
��ֵ��Ч��ȡ������֮��ص������е���һ��Ҳ������'auto'����ϸ��������μ����Զ�λ�����滻Ԫ�ص��������߶�һ�ڡ�

    �������Զ�λ��ƫ���ǻ��ڿ����������������Զ�λ��ƫ���ǻ��ڸÿ�������߽磨�����ݳ�����������һ��λ�ã�ƫ���������Щ���Զ����㣩��

9.4 ��������

    ���������еĿ�����һ����ʽ�������������ǿ���������ڣ�������ͬʱ���ǡ�����������ʽ�����ݡ����ڿ��������ڸ�ʽ�����ݡ�

9.4.1 ���ʽ��������

    �ڿ��ʽ�������У���һ����һ���ش�ֱ���ã������һ��������Ķ���������ͬ����֮��Ĵ�ֱ����ȡ����'margin'���ԡ��ڿ��ʽ�����������ڵĿ�Ĵ�ֱ�߾���غ���

    �ڿ��ʽ�������У�ÿһ����������������������Ӵ������ڴ��ҵ���ĸ�ʽ��������߽Ӵ��ұߣ�����ʹ���ڸ���Ҳ����ˣ�����һ�����������������ڸ�����ѹ������

    �й���ҳ��ý���з�ҳ����Ϣ����μ������ķ�ҳһ�ڡ�

9.4.2 ���ڸ�ʽ��������

    �����ڸ�ʽ�������У���һ����һ����ˮƽ���У�����ǰ�����Ķ�����ˮƽ�߾࣬�߿�ͱ߰��ڿ�֮��õ����������ڴ�ֱ����Ķ�������в�ͬ�ķ�ʽ�����ǵĶ�����ײ����룬����������е����ֵĻ��ߡ������γ�һ���ߵ���Щ��ij����������Ϊһ���߿���

    �߿�Ŀ���ȡ����һ�������������ĸ߶�ȡ�����иߵļ���һ���и����Ĺ��򡣶����߿�����Ŀ���˵�����ĸ߶������㹻�ġ������������ܱ�����������ߵĿ�Ҫ�ߣ����磬������������߶��룩�����B��ĸ߶�С�ڰ��������߿�ĸ߶ȣ�B�Ĵ�ֱ������'vertical-align'���Ծ�����

    ����������ڿ���ˮƽ�����޷�����һ���߿��ڣ����ǿ��Է���������������ֱ������߿��С���ˣ�һ����������߿�Ĵ�ֱ�����ϵĶѵ����߿�ѵ�ʱû�д�ֱ����ķָ�������غϡ�

    һ����ԣ��߿����߽Ӵ�������������ߣ��ұ߽Ӵ�����������ұߡ���������������ܳ����ڰ�����ıߺ��߿�ı�֮�䡣��ˣ�����ͬһ�����ڸ�ʽ�������е��߿�ͨ��������ͬ�����ڰ�����Ŀ��ȣ������ǿ������������������˿��õ�ˮƽ�ռ���ı���ȡ�ͬһ���ڸ�ʽ�����ݵ��߿�ͨ���߶Ȳ�һ�����磬һ�а�����һ���ߵ�ͼ�Σ���������ֻ�����ı�����

    ���һ�����߿����֮��С�ڰ������ǵ��߿�Ŀ��ȣ��������߿��ڵ�ˮƽ�ֲ�ȡ����'text-align'���ԡ��������ȡֵΪ'justify'���û���Ҳ�����������ڿ�

    ����һ�����ڿ���ܲ��ᳬ��һ���߿�Ŀ��ȣ��������ڿ򽫷ֳɼ����򣬶���Щ��ֲ��ڼ����߿��ڡ����һ�����ڿ����ָ�߾ࡢ�߿�ͱ߰��ڷָ���ĵط�û���Ӿ��ϵ�Ч���������˫��Ƕ���ڷ����ָ�߾ࡢ�߿�ͱ߰׵ĸ�ʽ������û�б���ȫ���塣

    ���ڿ򻹿�������˫���ı���������ͬһ���߿������ָ�Ϊ�ü�����

    ������һ�����ڿ�������ӡ���������һ�Σ�HTML����Ԫ��P������������Ԫ��EM��STRONG����������ı���

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

    PԪ�ز���һ����򣬰�����������ڿ����е������������ģ�

    Ϊ�˸�ʽ����һ�Σ��û��˽�������������߿򡣱����У�ΪPԪ�����ɵĿ����������ڿ�İ����顣����������㹻�������е����ڿ򽫷���һ���߿��ڣ�

 Several emphasized words appear in this sentence, dear.

    ������ǣ����ڿ򽫱��ָ�ֲ��ڼ����߿�֮�ڡ�ǰ����һ�ο��ܱ��ָ����£�

Several emphasized words appear
in this sentence, dear.
����������
Several emphasized  
words appear in this 
sentence, dear.

    �����У�EM�򱻷ָ�Ϊ����EM�򣨳�Ϊ"split1"��"split2"�����߾ࡢ�߿򡢱߰׻��ı�������split1֮���split2֮ǰû���Ӿ��ϵ�Ч����

    ��������������ӣ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

    ����P�Ŀ��ȣ���Щ����ܷ������£�

    Image illustrating the effect of line breaking on the display of margins, borders, and padding.   [D]

9.4.3 ��Զ�λ

    һ��һ���������������õ���λ������������Ը�λ�ö�ƫ�ơ��������Զ�λ��������ƫ��һ����B1��������Ժ�̵Ŀ�B2�����κ�Ӱ�죺����B2��λ�þͺ���B1û��ƫ�ƣ�������B1ƫ�ƺ�B2Ҳ�������¶�λ������ζ����Զ�λ���ܲ�������غϡ�

    ��Զ�λ�Ŀ��ƿ򱣳�����ͨ���Ĵ�С�����������Լ�ԭ��Ϊ���DZ�����λ�á�һ����Զ�λ�Ŀ򴴽�һ���µ����������������������е���Ԫ�� �Ͷ�λ������Ԫ�ء�

    Ҫ����һ����Զ�λ�Ŀ򣬿�������Ԫ�ص�'position'����Ϊ'relative'��ƫ������'top'��'bottom'��'left'��'right'����ָ����

    ��Զ�λ��Ķ�̬�ƶ��ڽű������п��Բ�������Ч����Ҳ�μ�'visibility'���ԣ�����Զ�λҲ����������Ϊ�ϱ���±��ͨ����ʽ��ֻ���и߲������Ƕ�λ���Զ��������������Ϣ�μ��иߵļ�����

    ��Զ�λ�����Ӳμ��������򣬸����;��Զ�λ�ĶԱ���

9.5 ����

    ���������һ�����ڵ�ǰ�����������ƫ�ơ�����������Ȥ�����������ݿ��������ıߵ���Χ���У�������'clear'���Զ�����ֹ���������������󸡶�����ұߣ����������Ҹ��������ߡ������ǹ��ڸ�����λ���������еļ�飻����������Ϊ��ȷ�е�������'float'���Ե������и�����

    һ�������������һ����ʽ�Ŀ��ȣ�ͨ��'width'����ָ����������滻Ԫ���������������ȣ����κθ����򶼳�Ϊһ����������������������ƫ��ֱ��������߽Ӵ���������ı߻�����һ����������ߡ�������Ķ����͵�ǰ�߿�Ķ������루���û���߿������ǰ��һ�����ĵײ����������ǰ��û���㹻��ˮƽ�ռ��������ø������������������ƶ�ֱ��ijһ�����㹻�Ŀռ���������

    ����һ�������򲢲��������У��ڸø�����֮ǰ��֮�󴴽��ķǶ�λ��ֱ���У��ͺ���ø����򲢲�����һ�������������Ÿø����������߿����̶����������Կռ䡣�ڸ�����֮ǰ��ǰ�е��κ����ݽ����������ڸ�������һ�ߵ�һ�����õ����ϡ�

    ���������������ڣ���ģ��Ҳ������һ���е����ڸ�����

���ӣ�

    ����Ĺ�������class="icon"��IMG�򸡶�����ߣ�������߾�����Ϊ����

IMG.icon { 
  float: left;
  margin-left: 0;
}

    ��������HTMLԴ�ļ�����ʽ����

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Float example</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="This image will illustrate floats">
       Some sample text that has no other...
  </BODY>
</HTML>

    IMG�򸡶�����ߡ�����������ڸ������ұ߽��и�ʽ������ʼ�ڸ�����ͬһ�С����ڸ����ij��֣������ұߵ��߿������ˣ������ڸ���֮��ָ����ǡ��������Ŀ��ȣ���PԪ�����ɵİ�����Ŀ��ȣ������ĵ����ܱ���ʽ��Ϊ��

    Image illustrating how floating boxes interact with
margins.   [D]

    ����ĵ������µ����ݣ���ʽ��Ч��һ����

<BODY>
  <P>Some sample text 
  <IMG src=img.gif alt="This image will illustrate floats">
           that has no other...
</BODY>

    ������Ϊ������ߵ����ݽ�������ռ�ݣ������¶�λ�������ұߡ�

    ������ı߾�Ӳ��������ڵĿ�ı߾��غ�����ˣ��������У�P��͸�����IMG���Ĵ�ֱ�߾ಢ���غ���

    һ���������Ը��dz��������������Ŀ����븡�����ڵij��������ı߾�Ϊ�����������һ�����ڿ򸲸�һ�������򣬸����ڿ�����ݡ������ͱ߿��ڸø���ǰ����Ⱦ�����һ����򸲸�һ�������򣬿��ı����ͱ߿��ڸ���������Ⱦ����ֻ���ڸ���Ϊ͸��ʱ�ſɼ������������ڸ���ǰ����Ⱦ��

���ӣ�

    ����������һ����ʾ��˵����һ�����������˳��������е�Ԫ�ر߿�ʱ�������

    Image showing a floating image
that overlaps the borders of two paragraphs: the borders are
interrupted by the image.   [D]

һ��������ͼ��ʹ�������ǵĿ��ı߿򲻿ɼ���

    ���������չʾ�����ʹ��'clear'��������ֹ������һ��������Χ���С�

���ӣ�

    �ٶ�������һ������

P { clear: left }

    ���ʽ�����ܿ���ȥ�������ģ�

    Image showing a floating
image and the effect of 'clear: left' on the two paragraphs.   [D]

�������䶼������'clear: left'����ʹ�õڶ��α��������ơ�������֮�µ�λ�á������Ķ��߾�Ҳ��Ӧ��������֮��ϣ��μ�'clear'���ԣ���

9.5.1 �����Ķ�λ��'float'����

'float'
ֵ��  left | right | none | inherit
��ʼֵ��  none
�����ڣ�  ���˶�λ��Ԫ�غ����ɵ�����֮�������Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ��һ�����Ƿ�Ӧ���������Ҹ����򲻸������������ڲ������ƿ򵫲������Զ�λ������Ԫ�ء�������ȡֵ�ĺ������£�

left
��Ԫ�ز���һ�����򣬲����󸡶��������ڸÿ���ұ����У�����ǿ�Ķ��������ǻ�������'clear'���ԣ��� 'display'�����ԣ���������ֵ��'none'��
right
��'left'��ͬ���������������ڿ����ߣ�����ǿ�Ķ�����
none
�ÿ򲻸�����

    ������һЩ����ȷ�Ĺ��������Ƹ����ı��֣�

  1. ���󸡶��Ŀ������������Գ�����������������߽�֮�󡣶������Ҹ�����Ԫ��Ҳ�����ƵĹ���
  2. �����ǰ�Ŀ����󸡶���������Դ�ĵ�����ǰ��Ԫ�ز������κ����󸡶��Ŀ���ô����ÿһ����������ǰ�Ŀ�Ҫô��ǰ��������������ǰ��������֮�ң�Ҫô���Ķ�����������ǰ�Ŀ�ĵײ�֮�¡��������Ҹ����Ŀ�Ҳ�����ƵĹ���
  3. ���󸡶��Ŀ������������Գ��������ұߵ��κ����Ҹ����Ŀ�������֮�ҡ��������Ҹ�����Ԫ��Ҳ�����ƵĹ���
  4. һ������������������Ը��������������Ķ���
  5. ����������������Ը���Դ�ĵ�����ǰ��Ԫ�ز���������������Ķ���
  6. һ��Ԫ�ص����������Ը���Դ�ĵ�����ǰ��Ԫ�ز����İ���һ������κ��߿��Ķ���
  7. ���󸡶��Ŀ�����������������һ�����󸡶��Ŀ���������߲����Գ��������İ�������ұ�֮�ҡ������߱ȽϿ��ɵ�Ҫ���ǣ�һ���󸡶������Գ����ұߣ��������Ѿ������ܵؿ������С����������Ҹ�����Ԫ��Ҳ�����ƵĹ���
  8. һ��������Ҫ���õþ����ܵĸߡ�
  9. һ���󸡶�����뾡��������ã�һ���Ҹ�������뾡�����ҷ��á��ڸ��ߵ�λ�ú͸�������ҵ�λ�ü䣬ѡ��ǰ�ߡ�

9.5.2 ���ƽ��Ӹ��������У�'clear'����

'clear'
ֵ��  none | left | right | both | inherit
��ʼֵ��  none
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    �����Ա���һ��Ԫ�صĿ����һ�������Ժ�һ����ǰ�ĸ��������ڡ��������԰��������ĺ����'clear'������û��Ӱ�졣��

    �����Խ�����������Ԫ�أ�����������������ѹ�����������������������ѹ������������ڵ����Ŀ��

    ��Ӧ���ڷǸ����Ŀ��ʱ��ȡֵ�ĺ������£�

left
���ɵĿ�Ķ��߾ཫ���ӣ�ֱ�����Ķ��߳�����Դ�ĵ�����ǰ��Ԫ�ز������κ����󸡶��Ŀ�ĵ����֮�¡�
right
���ɵĿ�Ķ��߾ཫ���ӣ�ֱ�����Ķ��߳�����Դ�ĵ�����ǰ��Ԫ�ز������κ����Ҹ����Ŀ�ĵ����֮�¡�
both
���ɵĿ��Ƶ�Դ�ĵ�����ǰ��Ԫ�ز����ĸ�����֮�¡�
none
�Կ��ǵ�������Ŀ��λ��û��Լ����

    ������������ڸ���Ԫ���ϣ�����ǶԸ�����λ���������˸Ķ��������˶����Լ����#10����

9.6 ���Զ�λ

    �ھ��Զ�λģ���У�һ����������İ��������ʽ��ƫ�ơ�����ȫ�ӳ������������루�Ժ�̵�ͬ��û��Ӱ�죩��һ�����Զ�λ��Ϊ���ij���������Ԫ�غͶ�λ����Ԫ������һ���µİ����顣���������Զ�λԪ�ص����ݲ��������������Χ���С����ǿ��ܻ�Ҳ���ܲ��ᵲס����һ��������ݣ���ȡ���ڻ����غϵĿ���ѵ������

    ���淶��������õ�һ�����Զ�λԪ���������Ŀ������Ÿ�Ԫ�ص�'position'��������Ϊ'absolute'��'fixed'��

9.6.1 �̶���λ

    �̶���λ�Ǿ��Զ�λ��һ�����ࡣΨһ�������ǣ����ڹ̶���λ�����İ��������ӵ���������������ý�����̶��򲢲������ĵ��Ĺ������ƶ��������������˵�������������̶��ı���ͼ��������ҳ��ý�����̶���λ����ÿҳ���ظ�����Ҫ��ÿһҳ�ײ�����һ��ǩ��ʱ��������������á�

    ���߿���ʹ�ù̶���λ���������ƿ�ܵij��֡��������µĿ�ܲ��֣�

    Image illustrating a frame-like layout with position='fixed'.   [D]

    ����ͨ�����µ�HTML�ĵ�����ʽ�����ﵽ��һЧ����

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ...  </DIV>
    <DIV id="sidebar"> ...  </DIV>
    <DIV id="main"> ...  </DIV>
    <DIV id="footer"> ...  </DIV>
  </BODY>
</HTML>

9.7 'display'��'position'��'float'����໥��ϵ

    Ӱ�������ɺͲ��ֵ��������ԡ���'display'��'position'��'float'��������໥��ϵ���£�

  1. ���'display'����Ϊ'none'���û��˱���������'position'��'float'������������£�Ԫ�ز�������
  2. ����'position'����Ϊ'absolute'��'fixed'��'display'����Ϊ'block'��'float'����Ϊ'none'�����λ�ý���'top'��'right'��'bottom'��'left'���Ժ͸ÿ�İ�����ȷ����
  3. �������'float'��ֵ����'none'��'display'����Ϊ'block'���Ҹÿ򸡶���
  4. ����Ӧ��ָ��������'display'���ԡ�

     ע�⡣ CSS2��û�й涨��Щ���Ե�ֵ���ű��ı�󲼾ֵı��֡����磬���һ��Ԫ��������'width: auto'�������¶�λ���ᷢ��ʲô���������������У����DZ���ԭ���ĸ�ʽ�����Ѿ������˱��淶�ķ�Χ�������ڳ��ڵ�CSS2ʵ���У����ֿ��ܻ�����ͬ��

9.8 �������򣬸����;��Զ�λ�ĶԱ�

    Ϊ����ʾ����������Զ�λ�������;��Զ�λ������������ṩһϵ�е����ӣ����Ƕ��������µ�HTMLƬ�Σ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

    ���ĵ��У����Ǽٶ������¹���

BODY { display: block; line-height: 200%; 
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

    ���������У���outer��innerԪ�ز����Ŀ�����յ�λ�ö���ͬ��ÿһ����ʾ�У�ͼ����ߵ����ֱ���˫�ؿհ׼���У�Ϊ�˿�����������������������е�λ�á���ע�⣺ͼ�ε�ˮƽ�ʹ�ֱ�����Dz�ͬ�ġ�

9.8.1 ��������

    �������µ�outer��inner��CSS���������Dz����ı�����������

#outer { color: red }
#inner { color: blue }

    PԪ�ذ������е��������ݣ����������ı��Լ�����SPANԪ�ء�������е����ݽ���һ�����ڸ�ʽ�������еõ����У�������һ����PԪ�����ɵİ������У�����������ͼ��

    Image illustrating the normal flow of text between parent and sibling boxes.   [D]

9.8.2 ��Զ�λ

    Ҫ������Զ�λ��Ч�������ǹ涨��

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

    �ı���������ֱ��outerԪ�ء�outer���ı��ڵ�һ�н�β���е��������������λ�úͳߴ硣Ȼ������������ڿ򣨷��������У��ƶ���'-12px'��λ�����ϣ���

    inner�����ݣ���Ϊouter����Ԫ�أ�������Ӧ�ý���"of outer contents"���У��ڵ�1.5�У���������inner�������������outer����ƫ��'12px'�����£������ص���ԭ����λ�õڶ��С�

    ע�������outer֮������ݲ�����outer��Զ�λ��Ӱ�졣

    Image illustrating the effects of relative positioning on a
box's content.   [D]

    ��Ҫע�⣬���outer��ƫ����'-24px'����ôouter���ı��������ı����غϡ�

9.8.3 ���ƿ�ĸ���

    ���ڿ���������innerԪ�ص�Ч��������ͨ�����¹��������ı����Ҹ�����

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

    �ı���������ֱ��inner���������������벢�������ұ߾ࣨ����'width'����ʽָ���ģ���������ߵ��߿����̣��ĵ��������ı���֮�����С�

    Image illustrating the effects of floating a box.   [D]

    Ҫ��ʾ'clear'���Ե�Ч���������������м���һ��ͬ��Ԫ�أ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes II</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id=outer> Start of outer contents.
      <SPAN id=inner> Inner contents.</SPAN>
      <SPAN id=sibling> Sibling contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

    �����¹���

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

    ���ʹinner�����ǰһ�����Ҹ��������ĵ��������ı������ڿհ׵ĵط���

    Image illustrating the effects of floating a box without
setting the clear property to control the flow of text around the
box.   [D]

    ���ǣ����ͬ��Ԫ�ص�'clear'��������Ϊ'right'���������ɵ�ͬ���򲻽������ұ��и��������ڵ�λ�ã�����ͬ���������ڸ���֮�¿�ʼ���У�

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

    Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.   [D]

9.8.4 ���Զ�λ

    ������ǿ������Զ�λ��Ч�����������µ�outer��inner��CSS������

#outer { 
    position: absolute; 
    top: 200px; left: 200px; 
    width: 200px; 
    color: red;
}
#inner { color: blue }

    ���ʹouter��Ķ��Ķ�λ�������İ����顣��λ��İ�����������Ķ�λ��ǰ�����������ߣ����������������ǰ�����������ʼ���������ڱ����м�Ϊ��ˣ���outer��Ķ����ڰ����鶥�� '200px'֮�£�����ڰ��������'200px'��outer����ӿ�����������outer���������С�

    Image illustrating the effects of absolutely positioning a box.   [D]

    ���������չʾ��һ����Զ�λ���е�һ�����Զ�λ���ӿ򡣾���outer����û��ʵ��ƫ�ƣ���������'position'����Ϊ'relative'��ζ������������Ϊ��λ�������ݵİ����顣����outer����һ�����ڿ򲢿�Խ���зֲ�����һ�����ڿ�Ķ�����ߣ���ͼ�����ôֵ��߱������Ϊ'top'��'left'ƫ�ƵIJο���

#outer { 
  position: relative; 
  color: red 
}
#inner { 
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

    ������ܿ������������ģ�

    Image illustrating the effects of absolutely positioning a
box with respect to a containing block.   [D]

    ������Dz���λouter��

#outer { color: red }
#inner {
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

    inner��İ������Ϊ��ʼ�������������ǵ������У������������չʾ����������£�inner�����յ�λ�á�

    Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.   [D]

    ��Ժ;��Զ�λ��������ʵ�ָ���������������һʵ�ֵ���ʾ�����������ĵ���

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

    ���ܳ���Ϊ��

    Image illustrating the use of floats to create a changebar effect.   [D]

    ���ȣ��ö��䣨��������ͼ����Ҳ��ʾ�������������С�Ȼ�����Ӱ���������ƫ��'10px'���Ӷ�Ϊ��ƫ�Ʊ�����'10px'���ұ߾ࣩ��������Ϊ�����������ֺŴӳ������������룬����λ�����İ����飨������λ�õ�P�������ĵ�ǰ�У�����'top: auto'�����������ƶ�'-1em'������Ǹ���������ȥ���������ڵ�ǰ�е���ߡ�

9.9 �ֲ�ij���

    ����Ķ����У�����ǰ�桱��ָ���û������Ļʱ���������û���

    CSS2�У�ÿһ������һ����ά�Ķ�λ���������ǵ�ˮƽ�ʹ�ֱ��λ����������һ����Z�ᡱ�ϣ���ʽ��ʱһ��������һ����Ķ��ϡ�Z�ᶨλ�ڿ����Ӿ��ϵ��غ�ʱ�ر���Ҫ���������ۿ������Z���϶�λ��

    ÿ��������һ���ѵ�������ij�������Ķѵ������е�ÿ������һ���������ѵ���������涨�˸ÿ���ͬһ�ѵ��������������������Z���ϵ�λ�á��ѵ���δ�Ŀ������ڶѵ����С�Ŀ��ǰ���ʽ����������и��Ķѵ���Ρ�����ѵ������еĿ������ͬ�Ķѵ���Σ����Ǹ����ĵ����г��ֵĴ�����ɵ׵����ѵ���

    ��Ԫ�ش�����һ�����ѵ���������������Ԫ�ؿ��������ֲ��ѵ��������ѵ������ǿɼ̳еġ�һ���ֲ��ѵ�������ԭ�ӻ��ģ��������ѵ������еĿ򲻿��Գ������κ����Ŀ�֮�䡣

    �����ֲ��ѵ����ݵ�һ��Ԫ������һ���򣬰��������ѵ���Σ������������Ķѵ����ݣ�����'0'������һ�����������Ķѵ����ݣ���'z-index'����ָ������

    һ��Ԫ�صĿ�����ĸ��������ͬ�Ķѵ���Σ�����������'z-index'����ָ����һ����ͬ�Ķѵ���Ρ�

9.9.1 ָ���ѵ������'z-index'����

'z-index'
ֵ��  auto | <integer> | inherit
��ʼֵ��  auto
�����ڣ�  ��λԪ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ����һ����λ��'z-index'����ָ���ˣ�

  1. ��ǰ�ѵ������п�Ķѵ���Ρ�
  2. �ÿ��Ƿ����ɾֲ��ѵ����ݡ�

    ȡֵ�ĺ������£�

<integer>
�����������ɵĿ��ڵ�ǰ�ѵ������еĶѵ���Ρ��ÿ�Ҳ������һ���ֲ��ѵ����ݣ����������Ķѵ������'0'��
auto
���ɵĿ��ڵ�ǰ�ѵ������еĶѵ���κ����ĸ�����ͬ���ÿ������µľֲ��ѵ����ݡ�

    

    ������������У������������ǵ�"id"�����������Ķѵ�����ǣ�"text2"=0��"image"=1��"text3"=2��"text1"=3��"text2"�Ķѵ���δ����ĸ���̳ж�������������'z-index'����ָ����

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order positioning</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile" 
           src="butterfly.gif" alt="A butterfly image"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="z-index: 3">
      This text will overlay the butterfly image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>

    ������ʾ��͸���ĸ��һ�����ȱʡ��Ϊ��������������Ŀ�͸����������͸����������ɼ��������У�ÿ����͸���ظ���������Ŀ���һ��Ϊ����ͨ��ʹ��ij���ֳɵ���������������Խ��

9.10 �ı�����'direction'��'unicode-bidi'����

    ��ijЩ�ű��У������Ǵ��ҵ�����д�ġ�ijЩ�ĵ��У��ر����԰�������ϣ������д�ɵ��ĵ��У��Լ�һЩ������Ե������У���һ���Ӿ�����ʾ�ģ��������ֵ�����Ҳ�в�ͬ�ķ�����һ�����Ϊ˫����������Ϊ��˫�򡱡�

    Unicode��׼��[UNICODE]��3.11�ڣ�������һ�����ӵ��㷨��ȷ��������ȷ�ķ��򡣸��㷨�����˻����ַ����Ե���ʽ���֣��Լ�����Ƕ��ͳ�Խ����ʽ���ơ�CSS2������һ�㷨�������ȷ��˫����Ⱦ��'direction'��'unicode-bidi'�����������߹涨�ĵ����Ե�Ԫ�غ������������㷨��ƥ�䡣

    ���һ���ĵ��а����ҵ�����ַ��������û�����ʾ��Щ�ַ�������ȷ���ַ�ͼ����ʾ����������������ʺš�ʮ�����Ʒ��Ż�һ���ڿ�������棩�����û��˱������˫�������㷨����һ����ȥ�ǵ����Ҫ��ӳ������һ����ʵ�������ܲ�����ÿһ��ϣ�����Ļ������ĵ��ĵ�������Ϸ�����ı����������ĵ�����Щ�Դ���������д�ɵ��ĵ������ܰ����ҵ�������֣������ܰ������ҵ��ı����磬���֣��������Ե����֣���

    �������ֵķ�����ȡ�����ĵ����ԵĽṹ�����⣬�ڴ��������£���Щ����Ӧ��ֻ���ĵ�����������DTD��������߻������ĵ�������ʹ�á����һ��ȱʡ��ʽ��ָ������Щ���ԣ����ߺ��û���Ӧ��ָ����Խ���ǵĹ���һ����������������ǣ����һ���û������û���Ҫ���½���̫�ͨ����ϣ������ĸд�ɣ�����Ϊ������ĸʱ���û��˳�Խ��˫����֡�

    HTML 4.0�淶��[HTML40]��8.2�ڣ�������HTMLԪ�ص�˫��������Ϊ��һ�µ�HTML�û��˿��������ߺ��û�����ʽ�������'direction'��'unicode-bidi'���ԡ���[HTML40]��ָ������Щ���ܲ���˫����Ϊ�Ĺ��������ʾ����ʽ���С�HTML 4.0�淶Ҳ�������й�˫����������ĸ������Ϣ��

'direction'
ֵ��  ltr | rtl | inherit
��ʼֵ��  ltr
�����ڣ�  ����Ԫ�أ����μ�����
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ���˿�Ļ�����д�����Լ�Unicode˫���㷨��Ƕ��ͳ�Խ�ķ��򣨲μ�'unicode-bidi'�������⣬�����涨�������в��ֵķ���ˮƽ����ķ����Լ���������'text-align: justify'ʱ�����һ������ȫ���е�λ�á�

    ������ȡֵ�ĺ������£�

ltr
���ҵķ���
rtl
�ҵ���ķ���

    Ҫʹ'direction'���Զ�����Ԫ����Ӱ�죬'unicode-bidi'���Ե�ֵ������'embed'��'override'��

    ע�⡣'direction'����ָ����������Ԫ��ʱ�����������ڵĵ�Ԫ��̳У�������Ϊ�в��������ĵ����С���ˣ�����[HTML40]��11.3.2.1����������"dir"���Եļ̳й���CSS�����ܺ����׵ر��֡�

'unicode-bidi'
ֵ��  normal | embed | bidi-override | inherit
��ʼֵ��  normal
�����ڣ�  ����Ԫ�أ����μ�����
�ɷ�̳У�  no
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ȡֵ�ĺ������£�

normal
����˫���㷨��Ԫ�ز���һ�������Ƕ���Ρ���������Ԫ�أ���Ԫ�صı߽��������������еĹ�����
embed
���Ԫ�������ڵģ�����˫���㷨����ֵ��һ�������Ƕ���Ρ���Ƕ���εķ�����'direction'���Ը�������Ԫ���ڣ���������ʽ����ɡ����൱����Ԫ�صĿ�ͷ����һ��LRE��U+202A������'direction: ltr'����RLE��U+202B������'direction: rtl'������Ԫ�صĽ�β����һ��PDF��U+202C����
bidi-override
���Ԫ�������ڵģ�������ֻ��������Ԫ�صĿ���Ԫ�أ���ֵ����һ����Խ������ζ����Ԫ���ڣ��������ϸ���'direction'���Ե�˳��˫���㷨����ʽ���ֱ����ԡ����൱����Ԫ�صĿ�ͷ����һ��LRO��U+202D������'direction: ltr'����RLO��U+202E������'direction: rtl'������Ԫ�صĽ�β����һ��PDF��U+202C����

    ÿһ������Ԫ�ص��ַ������յ�˳�����ͬ��˫����ƴ��������������룬��DZ����룬������ַ�˳�򴫵ݸ�������ͨ���ֵ�Unicode˫���㷨ʵ�֣���ʵ�ֲ�������ʽ�ı�һ���ķ��С�����һ�����У�������ʵ����ͼ�α���Ϊ�������ַ����������ǵ�'unicode-bidi'���Բ�������Ϊ'normal'������һ����£����DZ���Ϊ��Ϊ��Ԫ��ָ����'direction'�е���Ҫ�ַ���

    ��ע�⣬Ϊ���ܹ���һ����һ����Ҫôȫ�����ң�Ҫôȫ���ҵ������������ڿ򣬱��봴����������ڿ򣨰����������ڿ򣩣�����ijЩ���ڿ�������֮ǰ�����ܱ���ָ�����š�

    ����Unicode�㷨����Ƕ��IJ��Ϊ15�㣬��'unicode-bidi'����Ϊ��'normal'��ʹ�ã�����С�ģ�����ȷ���Ǻ��ʵġ��ر�أ�ʹ��'inherit'ֵʱҪ�ر�С�ġ�������������Щһ����˵��ʾΪ���Ԫ�أ���Ӧ������'unicode-bidi: embed'����������ʾ�ı䵽����ʱ�����Խ�Ԫ�ر�����һ�𣨼���������

    �����������ʾ�˰���˫�����ֵ�һ��XML�ĵ�������ʾ��һ����Ҫ�����ԭ��DTD�����Ӧ�����������ԣ�Ԫ�غ����ԣ����κ����������ʽ���п���˫�����ء���ʽ�������Ӧ����˫������������ʽ��������롣˫�����Ӧ�ñ�������ʽ������Խ���Ӷ��ĵ����Ի�DTD��˫����Ϊ���Ա�����

���ӣ�

     �����У�Сд��ĸ��ʾ���ҵ��ַ�����д��ĸ��ʾ�ҵ�����ַ���

<HEBREW>
  <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
  <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
  <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
  <PAR>english14 english15 english16</PAR>
  <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>

    ��������һ��XML����ʽ������������д������ʽ�����£�

/* Rules for bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ENGLISH         {direction: ltr; unicode-bidi: embed} 

/* Rules for presentation */
HEBREW, ENGLISH, PAR  {display: block}
EMPH                  {font-weight: bold}

    HEBREWԪ����һ���飬�����������ҵ���ENGLISHԪ����һ���飬�������������ҡ�PARԪ���ǿ飬��������Ӹ�Ԫ�ؼ̳С���ˣ�ǰ����PAR���Ҷ�����ʼ�Ķ��������������󶥲���ʼ�Ķ�����ע��Ԫ����ѡ��HEBREW��ENGLISHֻ��Ϊ�����Ա�ʾ���ѣ�һ������£�Ԫ����Ӧ�÷�ӳ�ṹ������ӳ���ԡ�

    EMPHԪ��������Ԫ�أ���������'unicode-bidi'����Ϊ'normal'����ʼֵ�����������ֵ�����û��Ӱ�졣��һ���棬HE-QUOԪ�ش���һ��Ƕ�롣

    ����п��㹻�ij�����Щ���ֵĸ�ʽ��Ч�������ǣ�

               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

    ע�⣬HE-QUOǶ��ʹHEBREW18������english19֮�ҡ�

    �����Ҫ���У�����Ч���ǣ�

       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH 7WERBEH 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

    ����HEBREW18������english19ǰ�Ķ�������english19�����е����档��������ǰһ��ʽ�������зָ�в������á���Ҫע��english19�ĵ�һ�����ڿ��ܿ��Է�����һ���С����ǣ�Ϊ�˱�����һ�е��м����һ�����ַ������ҵ���������У����ҵ��ʵ�����ͨ������ֹ����֮��Ȼ��