Ŀ¼
���º���һ�����������ӻ���ʽģ�����û�����ͼ��ý������δ����ĵ�����
���ӻ���ʽģ���У�ÿһ���ĵ����е�Ԫ�ظ���������ģ����������������ƿ���Щ��IJ������������ݿ��ƣ�
���º���һ���ж������������������ý����ҳ��ý���������߾������ĺ�����Ӧ�õ�ҳ��ý��ʱ����Щ��ͬ����ϸ������μ�ҳ��ģ������
���ӻ���ʽģ�Ͳ���ָ����ʽ�������з��棨���磬������ָ���ַ�����㷨������CSSһ�µ��û����ڴ������淶δ�����ĸ�ʽ������ʱ�����ֿ���������ͬ��
����ý�����û���ͨ���ṩ���û�һ���ӵ�����Ļ�ϵ�һ�����ڻ��������ͨ�����û�������ĵ������ӵ�ߴ�ı�ʱ���û��˿��ܸı��ĵ��IJ��֣��μ���ʼ��������������ӵ���ĵ��ij�ʼ������С���û��˿����ṩ�������ơ�����һ����Ⱦ�������ԣ����ֻ����һ���ӵ㣬�����û��˿��ԶԶ����Ⱦ���������Ⱦ������ͬһ�ĵ��ṩ��ͬ���ӵ㣩��
CSS2�У��ܶ���λ�úͳߴ�ļ��㶼����һ������Ϊ�������ij����κ��ӵ��ıߡ�ͨ���أ����ɵĿ����Ϊ��������İ����飻����˵һ��������������������İ����顣���һ����İ����顱��ζ�š��ÿ������ڵ��Ǹ������顱���������������ɵĿ顣
���ڿ�İ����飬ÿһ������һ����λ�����������������������ƣ������������
�ĵ����ĸ�����һ������Ϊ��̲��ֵ���ʼ��������
��ʼ������Ŀ��ȿ����ɸ�Ԫ�ص�'width'����ָ�������������ȡֵΪ'auto'���û����ṩ��ʼ���ȣ��磬�û���ʹ���ӵ��ĵ�ǰ���ȣ���
��ʼ������ĸ߶ȿ����ɸ�Ԫ�ص�'height'����ָ�������������ȡֵΪ'auto'��������ĸ߶Ƚ���������Ӧ�ĵ����ݡ�
��ʼ�����鲻���Ա���λ���������û���������Ԫ�ص�'position'��'float'���ԣ���
������ߴ���μ����ϸ������������һƪ��
����ļ���������CSS2�п������ɵİ���������͡�һ��������Ͳ��ֵ�Ӱ�����ڿ��ӻ���ʽģ���еı��֡��������۵�'display'���Ծ����˿�����͡�
����Ԫ����Դ�ĵ�����Щ���Ӿ��ϱ���ʽ��Ϊ�飨�磺���䣩����ЩԪ�ء�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"��Χ��
���仰˵�����һ������ƿ���������Ϊ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��
����Ԫ��Դ�ĵ�����Щ���γ��µ����ݿ��Ԫ�أ����������ڷֲ����磬���������ص��ı�������ͼ�εȵȣ���ijЩ'display'���Ե�ȡֵ�γ�������Ԫ�أ�'inline'��'inline-table'��'compact'��'run-in'��ijЩʱ�μ�ѹ���Ŀ��ƿ�������Ŀ��ƿ���������Ԫ���������ڿ��ƿ���
���ڿ��ƿ���Բ��뼸����ʽ�������ݣ�
�����µ��ĵ��У�
<P>Some <EM>emphasized</em> text</P>
PԪ������һ������ƿ����ڻ��м������ڿ�"emphasized"�Ŀ���һ������Ԫ�أ�EM�����������ڿ������Ŀ�"Some"��"text"���ǿ���Ԫ�أ�P�������ġ����߾ͳ�Ϊ�������ڿ��ƿ�����Ϊ����û����֮��ص�����Ԫ�ء�
���������ڿ���丸�������̳п��Լ̳е����ԡ��Ǽ̳�����ȡ���ǵij�ʼֵ�������У���ʼ���������ɫ�̳���P�������������ġ�
������������Ŀ���ȷ�����������������ͣ��������ڿ��ƿ����������ƿ��ڱ��淶�ж�����Ϊ�������ƿ�������
�ڸ�ʽ������ʱ��������ָ������͵�������
һ��ѹ���Ŀ��ƿ�������Ϊ���£�
ѹ�����ڱ߾��еĶ�λ�������£����ڿ�ĵ�һ���п�����ߣ�����ұߣ���������Ӱ���Ǹ��п�߶��ļ��㡣ѹ�����'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'�����ҡ���
��μ����ɵ�����һ�ڣ����˽�ѹ���Ŀ�����ɵ�����֮�以�����õ����ݡ�
һ������Ŀ��ƿ��������£�
һ��'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.
����Ԫ�ص����Լ̳���Դ�������ĸ�Ԫ�أ������������Ӿ�������Ϊ��һ���ֵ��Ǹ����
��μ����ɵ�����һ�ڣ����˽�������������ɵ����ݽ������õ���Ϣ��
ֵ�� | 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 |
ý�飺 | ���� |
������ȡֵ�ĺ������£�
��ע��'none'����ʾ���Բ�������һ�����ɼ��Ŀ������������ɿ�CSS�����˻���ʹһ��Ԫ���ܹ��ڸ�ʽ���ṹ�����ɿ��Ӱ���ʽ�������������ɼ�����μ�������һ���Ի����ϸ������
ע�⣬����'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'���ԡ�
CSS2�У�һ�����ƿ�IJ��ֿ��Ը���������λ������
'position'��'float'����ָ��ѡ���ĸ�CSS2��λ�����������Ķ�λ��
ֵ�� | static | relative | absolute | fixed | inherit |
��ʼֵ�� | static |
�����ڣ� | ����Ԫ�أ��������ɵ����� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
������ȡֵ�ĺ������£�
@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }
���һ��Ԫ�ص�'position'����ֵ��ȡֵ����'static'�Ļ�����Ԫ�ر���Ϊ��λ������λ��Ԫ�����ɶ�λ���䶨λ�����ĸ����ԣ�
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ��λ��Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����ĸ߶� |
ý�飺 | ͼ�� |
������ָ��һ��������ݵĶ�����Ըÿ���������Ķ�������ƫ�Ƶ�����
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ��λ������ |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
������ָ��һ��������ݵ��ұ���Ըÿ�����������ұ�����ƫ�Ƶ�����
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ��λ������ |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����ĸ߶� |
ý�飺 | ͼ�� |
������ָ��һ��������ݵĵױ���Ըÿ���������ĵױ�����ƫ�Ƶ�����
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ��λ������ |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
������ָ��һ��������ݵ������Ըÿ�����������������ƫ�Ƶ�����
���ĸ����Ե�ȡֵ�ĺ������£�
�������Զ�λ��ƫ���ǻ��ڿ����������������Զ�λ��ƫ���ǻ��ڸÿ�������߽磨�����ݳ�����������һ��λ�ã�ƫ���������Щ���Զ����㣩��
���������еĿ�����һ����ʽ�������������ǿ���������ڣ�������ͬʱ���ǡ�����������ʽ�����ݡ����ڿ��������ڸ�ʽ�����ݡ�
�ڿ��ʽ�������У���һ����һ���ش�ֱ���ã������һ��������Ķ���������ͬ����֮��Ĵ�ֱ����ȡ����'margin'���ԡ��ڿ��ʽ�����������ڵĿ�Ĵ�ֱ�߾���غ���
�ڿ��ʽ�������У�ÿһ����������������������Ӵ������ڴ��ҵ���ĸ�ʽ��������߽Ӵ��ұߣ�����ʹ���ڸ���Ҳ����ˣ�����һ�����������������ڸ�����ѹ������
�й���ҳ��ý���з�ҳ����Ϣ����μ������ķ�ҳһ�ڡ�
�����ڸ�ʽ�������У���һ����һ����ˮƽ���У�����ǰ�����Ķ�����ˮƽ�߾࣬�߿�ͱ߰��ڿ�֮��õ����������ڴ�ֱ����Ķ�������в�ͬ�ķ�ʽ�����ǵĶ�����ײ����룬����������е����ֵĻ��ߡ������γ�һ���ߵ���Щ��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�Ŀ��ȣ���Щ����ܷ������£�
һ��һ���������������õ���λ������������Ը�λ�ö�ƫ�ơ��������Զ�λ��������ƫ��һ����B1��������Ժ�̵Ŀ�B2�����κ�Ӱ�죺����B2��λ�þͺ���B1û��ƫ�ƣ�������B1ƫ�ƺ�B2Ҳ�������¶�λ������ζ����Զ�λ���ܲ�������غϡ�
��Զ�λ�Ŀ��ƿ�����ͨ���Ĵ�С�����������Լ�ԭ��Ϊ���DZ�����λ�á�һ����Զ�λ�Ŀ�һ���µ����������������������е���Ԫ�� �Ͷ�λ������Ԫ�ء�
Ҫ����һ����Զ�λ�Ŀ�������Ԫ�ص�'position'����Ϊ'relative'��ƫ������'top'��'bottom'��'left'��'right'����ָ����
��Զ�λ��Ķ�̬�ƶ��ڽű������п��Բ�������Ч����Ҳ�μ�'visibility'���ԣ�����Զ�λҲ����������Ϊ�ϱ���±��ͨ����ʽ��ֻ���и߲������Ƕ�λ���Զ��������������Ϣ�μ��иߵļ�����
��Զ�λ�����Ӳμ������������;��Զ�λ�ĶԱ���
���������һ�����ڵ�ǰ�����������ƫ�ơ�����������Ȥ�����������ݿ��������ıߵ���Χ���У�������'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Ԫ�����ɵİ�����Ŀ��ȣ������ĵ����ܱ���ʽ��Ϊ��
����ĵ������µ����ݣ���ʽ��Ч��һ����
<BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate floats"> that has no other... </BODY>
������Ϊ������ߵ����ݽ�������ռ�ݣ������¶�λ�������ұߡ�
������ı߾�Ӳ��������ڵĿ�ı߾��غ�����ˣ��������У�P�������IMG���Ĵ�ֱ�߾ಢ���غ���
һ���������Ը��dz��������������Ŀ����븡�����ڵij��������ı߾�Ϊ�����������һ�����ڿ�һ�����������ڿ�����ݡ������ͱ߿��ڸø���ǰ����Ⱦ�����һ�����һ���������ı����ͱ߿��ڸ���������Ⱦ����ֻ���ڸ���Ϊ��ʱ�ſɼ������������ڸ���ǰ����Ⱦ��
����������һ����ʾ��˵����һ�����������˳��������е�Ԫ�ر߿�ʱ�������
���������չʾ�����ʹ��'clear'��������ֹ������һ��������Χ���С�
������ָ��һ�����Ƿ�Ӧ���������Ҹ����������������ڲ������ƿ������Զ�λ������Ԫ�ء�������ȡֵ�ĺ������£�
������һЩ����ȷ�Ĺ��������Ƹ����ı��֣�
�����Ա���һ��Ԫ�صĿ����һ�������Ժ�һ����ǰ�ĸ��������ڡ����������������ĺ����'clear'������û��Ӱ�졣��
�����Խ�����������Ԫ�أ�����������������ѹ�����������������������ѹ������������ڵ����Ŀ��
��Ӧ���ڷǸ����Ŀ��ʱ��ȡֵ�ĺ������£�
������������ڸ���Ԫ���ϣ�����ǶԸ�����λ���������˸Ķ��������˶����Լ����#10����
�ھ��Զ�λģ���У�һ����������İ��������ʽ��ƫ�ơ�����ȫ�ӳ������������루�Ժ�̵�ͬ��û��Ӱ�죩��һ�����Զ�λ��Ϊ���ij���������Ԫ�غͶ�λ����Ԫ������һ���µİ����顣���������Զ�λԪ�ص����ݲ��������������Χ���С����ǿ��ܻ�Ҳ���ܲ��ᵲס����һ��������ݣ���ȡ���ڻ����غϵĿ���ѵ������
���淶��������õ�һ�����Զ�λԪ���������Ŀ������Ÿ�Ԫ�ص�'position'��������Ϊ'absolute'��'fixed'��
�̶���λ�Ǿ��Զ�λ��һ�����ࡣΨһ�������ǣ����ڹ̶���λ�����İ��������ӵ���������������ý�����̶��������ĵ��Ĺ������ƶ��������������˵�������������̶��ı���ͼ��������ҳ��ý�����̶���λ����ÿҳ���ظ�����Ҫ��ÿһҳ�ײ�����һ��ǩ��ʱ��������������á�
���߿���ʹ�ù̶���λ���������ƿ�ܵij��֡��������µĿ�ܲ��֣�
����ͨ�����µ�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>
Ӱ�������ɺͲ��ֵ��������ԡ���'display'��'position'��'float'����������ϵ���£�
ע�⡣ CSS2��û�й涨��Щ���Ե�ֵ���ű��ı�ֵı��֡����磬���һ��Ԫ��������'width: auto'�������¶�λ���ᷢ��ʲô���������������У����DZ���ԭ���ĸ�ʽ�����Ѿ������˱��淶�ķ�Χ�������ڳ��ڵ�CSS2ʵ���У����ֿ��ܻ�����ͬ��
Ϊ����ʾ����������Զ�λ�������;��Զ�λ������������ṩһϵ�е����ӣ����Ƕ��������µ�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�ͬ�ġ�
�������µ�outer��inner��CSS���������Dz����ı�����������
#outer { color: red } #inner { color: blue }
PԪ�ذ������е��������ݣ����������ı��Լ�����SPANԪ�ء�������е����ݽ���һ�����ڸ�ʽ�������еõ����У�������һ����PԪ�����ɵİ������У�����������ͼ��
Ҫ������Զ�λ��Ч�������ǹ涨��
#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��Զ�λ��Ӱ�졣
��Ҫע�⣬���outer��ƫ����'-24px'����ôouter���ı��������ı����غϡ�
���ڿ���������innerԪ�ص�Ч��������ͨ�����¹��������ı����Ҹ�����
#outer { color: red } #inner { float: right; width: 130px; color: blue }
�ı���������ֱ��inner���������������벢�������ұ߾ࣨ����'width'����ʽָ���ģ���������ߵ��߿����̣��ĵ��������ı���֮�����С�
Ҫ��ʾ
<!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�����ǰһ�����Ҹ��������ĵ��������ı������ڿհĵط���
���ǣ����ͬ��Ԫ�ص�'clear'��������Ϊ'right'���������ɵ�ͬ���������ұ��и��������ڵ�λ�ã�����ͬ���������ڸ���֮�¿�ʼ���У�
#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }
������ǿ������Զ�λ��Ч�����������µ�outer��inner��CSS������
#outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue }
���ʹouter��Ķ��Ķ�λ�������İ����顣��λ��İ�����������Ķ�λ��ǰ�����������ߣ����������������ǰ�����������ʼ���������ڱ����м�Ϊ��ˣ���outer��Ķ����ڰ����鶥�� '200px'֮�£�����ڰ��������'200px'��outer����ӿ�����������outer���������С�
���������չʾ��һ����Զ�λ���е�һ�����Զ�λ���ӿ���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; }
������ܿ������������ģ�
������Dz���λouter��
#outer { color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }
inner��İ������Ϊ��ʼ�������������ǵ������У������������չʾ����������£�inner�����յ�λ�á�
��Ժ;��Զ�λ��������ʵ�ָ���������������һʵ�ֵ���ʾ�����������ĵ���
<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>
���ܳ���Ϊ��
���ȣ��ö��䣨��������ͼ����Ҳ��ʾ�������������С�Ȼ�����Ӱ���������ƫ��'10px'���Ӷ�Ϊ��ƫ�Ʊ�����'10px'���ұ߾ࣩ��������Ϊ�����������ֺŴӳ������������룬����λ�����İ����飨������λ�õ�P�������ĵ�ǰ�У�����'top: auto'�����������ƶ�'-1em'������Ǹ���������ȥ���������ڵ�ǰ�е���ߡ�
����Ķ����У�����ǰ�桱��ָ���û������Ļʱ���������û���
CSS2�У�ÿһ������һ����ά�Ķ�λ���������ǵ�ˮƽ�ʹ�ֱ��λ����������һ����Z�ᡱ�ϣ���ʽ��ʱһ��������һ����Ķ��ϡ�Z�ᶨλ�ڿ����Ӿ��ϵ��غ�ʱ�ر���Ҫ���������ۿ������Z���϶�λ��
ÿ��������һ���ѵ�������ij�������Ķѵ������е�ÿ������һ���������ѵ���������涨�˸ÿ���ͬһ�ѵ��������������������Z���ϵ�λ�á��ѵ���δ�Ŀ������ڶѵ����С�Ŀ��ǰ���ʽ����������и��Ķѵ���Ρ�����ѵ������еĿ������ͬ�Ķѵ���Σ����Ǹ����ĵ����г��ֵĴ�����ɵ����ѵ���
��Ԫ�ش�����һ�����ѵ���������������Ԫ�ؿ��������ֲ��ѵ��������ѵ������ǿɼ̳еġ�һ���ֲ��ѵ�������ԭ�ӻ��ģ��������ѵ������еĿ��Գ������κ����Ŀ�֮�䡣
�����ֲ��ѵ����ݵ�һ��Ԫ������һ�����������ѵ���Σ������������Ķѵ����ݣ�����'0'������һ�����������Ķѵ����ݣ���'z-index'����ָ������
һ��Ԫ�صĿ�����ĸ��������ͬ�Ķѵ���Σ�����������'z-index'����ָ����һ����ͬ�Ķѵ���Ρ�
����һ����λ��'z-index'����ָ���ˣ�
ȡֵ�ĺ������£�
������������У������������ǵ�"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���ֳɵ���������������Խ��
��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�淶Ҳ�������й�˫����������ĸ������Ϣ��
ֵ�� | ltr | rtl | inherit |
��ʼֵ�� | ltr |
�����ڣ� | ����Ԫ�أ����μ����� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
������ָ���˿�Ļ�����д�����Լ�Unicode˫���㷨��Ƕ��ͳ�Խ�ķ��μ�'unicode-bidi'�������⣬�����涨�������в��ֵķ���ˮƽ����ķ����Լ���������'text-align: justify'ʱ�����һ������ȫ���е�λ�á�
������ȡֵ�ĺ������£�
Ҫʹ'direction'���Զ�����Ԫ����Ӱ�죬'unicode-bidi'���Ե�ֵ������'embed'��'override'��
ע�⡣'direction'����ָ����������Ԫ��ʱ�����������ڵĵ�Ԫ��̳У�������Ϊ�в��������ĵ����С���ˣ�����[HTML40]��11.3.2.1����������"dir"���Եļ̳й���CSS�����ܺ����ر��֡�
ֵ�� | normal | embed | bidi-override | inherit |
��ʼֵ�� | normal |
�����ڣ� | ����Ԫ�أ����μ����� |
�ɷ�̳У� | no |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
������ȡֵ�ĺ������£�
ÿһ������Ԫ�ص��ַ������յ�˳�����ͬ��˫����ƴ��������������룬��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�ĵ�һ�����ڿ��ܿ��Է�����һ���С����ǣ�Ϊ�˱�����һ�е��м����һ�����ַ������ҵ���������У����ҵ��ʵ�����ͨ������ֹ����֮��Ȼ��