Ŀ¼
һ��Ԫ�صĿ�ijߴ��λ�õļ�����ʱ�����ij���ض��ij����Σ���Ϊ��Ԫ�ص���������һ��Ԫ�صİ�����Ķ������£�
���������������ǰ������Ԫ�ؿ�����ݱߴ����ð����顣
�����Ƕ�λ�������ĵ��İ����飨C.B.����
<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>
�����������ģ�
�������Ԫ�� | ����C.B.��Ԫ�� |
---|---|
body | ��ʼC.B.�����û�����أ� |
div1 | body |
p1 | div1 |
p2 | div1 |
em1 | p2 |
strong1 | p2 |
������Ƕ�λ"div1"��
#div1 { position: absolute; left: 50px; top: 50px }
���İ����鲻����"body"�����dz�ʼ�����飨��Ϊû��������λ��ǰ����
��������ٶ�λ"em1"��
#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }
������ı����Ϊ��
�������Ԫ�� | ����C.B.��Ԫ�� |
---|---|
body | ��ʼC.B. |
div1 | ��ʼC.B. |
p1 | div1 |
p2 | div1 |
em1 | div1 |
strong1 | em1 |
"em1"��λ�����İ������Ϊ�����ǰ����λ������"div1"��������һ������
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ����Ԫ�أ��������ڷ��滻Ԫ�أ������к����顣 |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
������ָ���˿���Ԫ�غ��滻Ԫ�ز����Ŀ�����ݿ�����
��Ԫ�ز��������ڷ��滻������Ԫ�ء����滻����Ԫ�ؿ�Ŀ�����������������Ⱦ�����κ���Ԫ�����ƫ��֮ǰ���Ŀ��ȡ�����Ӧ�üǵ����ڿ��������߿��ڡ����߿�Ŀ��������ǵ����������������ǿ������ڳ��������������̡�
�滻Ԫ�صĿ����������ģ��������������ֵ����'auto'���û��˿��ܽ������¶��ȡ�
����ֵ�ĺ������£�
����'width'ֵ�ǷǷ��ġ�
���磬����Ĺ���������ݿ��ȹ̶�Ϊ100�㣺
P { width: 100px }
һ��Ԫ�ص�'width'��'margin-left'��'margin-right'��'left'��'right'���Եļ���ֵȡ���ڲ����Ŀ�����ͣ�������Ӱ�졣һ����ԣ�����ֵ��ָ��ֵ��ͬ��'auto'��ij�����ʵ�ֵȡ�����������������⡣������Щ�����Ҫ���Կ��ǣ�
1-6������Զ�λ��
'width'���Բ����á���'left'��'right'��'margin-left'��'margin-right'ָ��'auto'��Ч���Ǽ���ֵΪ'0'��
��'left'��'right'��'margin-left'��'margin-right'ָ��'auto'��Ч���Ǽ���ֵΪ'0'��ָ��'width'Ϊ'auto'��Ԫ�ص��������ȸ�������ֵ��
���'left'��'right'����Ϊ'auto'�����ǵļ���ֵΪ0�����������Լ���뱣�������Լ����
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = �������Ŀ���
������߿����ʽΪ'none'���߿������Ϊ��'0'��������������е�����ָ���˷�'auto'��ֵ����Щֵ����Ϊ�ǡ�����Լ����������֮һ�ļ���ֵ�����ò�������ָ��ֵ��ͬ�����'direction'����Ϊ'ltr'��'margin-right'��ָ��ֵ�����ԣ������¼�������������ĵ�ʽ�����'direction'Ϊ'rtl'����'margin-left'��ȡ�����ķ�����
���ֻ��һ��ֵָ��Ϊ'auto'�����ļ���ֵ�ӵ�ʽ�еó���
���'width'����Ϊ'auto'����������'auto'ֵ��Ϊ'0'��'width'�ӵ�ʽ��ʣ�ಿ�ֵõ���
���'margin-left'��'margin-right'Ϊ'auto'�����ǵļ���ֵ��ͬ��
���'left'��'right'Ϊ'auto'�����ǵļ���ֵΪ0�����'width'ָ��Ϊ'auto'������ֵ��Ԫ�ص��������ȡ����ijһ���߾�����Ϊ'auto'�����ļ���ֵ��������Լ������������һ������������߾������'auto'�����ǵļ���ֵ��ȡ�
���'left'��'right'��'width'��'margin-left'��'margin-right'ָ��Ϊ'auto'�����ǵļ���ֵΪ'0'��
���'left'��'right'��'margin-left'��'margin-right'ָ��Ϊ'auto'�����ǵļ���ֵΪ'0'�����'width'Ϊ 'auto'������ֵ��Ԫ�ص��������ȡ�
ȷ����ЩԪ�ؼ���ֵ��Լ��Ϊ��
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = �������Ŀ���
������߿���ʽΪ'none'���߿������Ϊ��'0'����һԼ����ʵ��ͨ������˳���һϵ���滻���ﵽ��
��һ�����ǰһ�������ƣ�����Ԫ����һ���������ȡ��滻��˳���ǣ�
ֵ�� | <length> | <percentage> | inherit |
��ʼֵ�� | ȡ�����û��� |
ʹ���ڣ� | ����Ԫ�أ����˷��滻����Ԫ�غͱ���Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
ֵ�� | <length> | <percentage> | none | inherit |
��ʼֵ�� | none |
�����ڣ� | ����Ԫ�أ����˷��滻����Ԫ�غͱ���Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
�����������������߽���Ŀ���������һ��ȷ���ķ�Χ�ڡ�ȡֵ�ĺ������£�
������㷨�������������������Ӱ��'width'���Ե�����ֵ��
�û��˿���ָ��һ���Ǹ���'min-width'���Ե���Сֵ����ֵ���ݲ�ͬ��Ԫ�أ����������������Զ���ͬ�����'min-width'С�ڸ����ޣ���������Ϊ����ʽ��ָ����������������Ϊ'auto'�����Ĺ���ʹ�����̫С���û��˿���ʹ����Сֵ��Ϊ����ֵ��
ֵ�� | <length> | <percentage> | auto | inherit |
��ʼֵ�� | auto |
�����ڣ� | ����Ԫ�أ����˷��滻����Ԫ�أ������к����� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ������ |
ý�飺 | ͼ�� |
������ָ���˿���Ԫ�غ��滻Ԫ�����ɵĿ�����ݸ߶���
�����Բ������ڷ��滻����Ԫ�ء����滻����Ԫ�ؿ�ĸ߶���Ԫ�ص�'line-height'ֵ����̳�ֵ��������
ȡֵ�ĺ������£�
����'height'ֵ�ǷǷ��ġ�
�ڼ���'top', 'margin-top'��'height'��'margin-bottom'��'bottom'��ֵʱ������Բ�ͬ����Ŀ��������
1-6������Զ�λ��
���'top'��'bottom'��'margin-top'��'margin-bottom'Ϊ'auto'�����ǵļ���ֵΪ0��'height'���Բ������ã����ǿ�ĸ߶���'line-height'���Ը�����
���'top'��'bottom'��'margin-top'��'margin-bottom'Ϊ'auto'�����ǵļ���ֵΪ0�����'height'Ϊ'auto'�������ֵΪ�����߶ȡ�
���'top'��'bottom'��'margin-top'��'margin-bottom'Ϊ'auto'�����ǵļ���ֵΪ0�����'height'Ϊ'auto'���߶�ȡ���ڸ�Ԫ���Ƿ����κο�����Ԫ�ء������ֻ����������Ԫ�أ��߶ȵ�����˵��߿�Ķ�����˵��߿�ĵ�֮��ľ��롣���������������Ԫ�أ��߶ȵ�����˵Ŀ����ӿ�Ķ��߽絽��˵Ŀ����ӿ�ĵױ߽硣ֻ���dz��������е���Ԫ�أ�����������;��Զ�λ���ԣ�ֻ������Զ�λ��δƫ�Ƶ��������ע�⣬�ӿ������һ����������
���ھ��Զ�λ��Ԫ�أ���ֱ����ijߴ������������Լ����
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = ������ĸ߶�
������߿���ʽΪ'none'����Ϊ������'0'������Լ����ʵ�ֻ�������˳���һϵ���滻��
��һ���κ�ǰ�����ƣ�ֻ��Ԫ����һ�������߶ȡ��滻��˳���Ϊ��
��ʱ��Ԫ�صĸ߶ȿ�����һ���ض��ķ�Χ�ں����á������������ṩ�������Ĺ��ܣ�
ֵ�� | <length> | <percentage> | inherit |
��ʼֵ�� | 0 |
�����ڣ� | ����Ԫ�أ����˷��滻����Ԫ�غͱ���Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���������ĸ߶� |
ý�飺 | ͼ�� |
ֵ�� | <length> | <percentage> | none | inherit |
��ʼֵ�� | none |
�����ڣ� | ����Ԫ�أ����˷��滻����Ԫ�غͱ���Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ���������ĸ߶� |
ý�飺 | ͼ�� |
�����������������߽���ĸ߶�������һ���ķ�Χ�ڡ�ȡֵ�������£�
������㷨�������������������Ӱ��'height'���Ե�����ֵ��
�����ڸ�ʽ�������������У��û��˽����ڿ�����Ϊ��ֱ������߿��Ķѵ����߿�߶������������ģ�
�յ�����Ԫ�ز����յ����ڿ�����Щ��Ҳ�����߾࣬�߰ף��߿���иߣ���˺���Щ�����ݵ�Ԫ��һ����Ӱ�������ļ��㡣
ע�⣬����߿������еĿ������ǵĵײ����߿�ĸ߶�ǡ�õ�����ߵĿ�ĸ߶ȡ����ǣ���������һ����ͬ�Ļ��߶��룬�߿�Ķ��͵��ܽӴ�������ߵĿ�Ķ��͵ס� box.
����һ�����ڿ�ĸ߶Ȼ�Ϳ������ֵĸ߶��в�����磬'line-height' > 1em��������Ⱦ�����η��ŵ��Ϸ����·������пհס�����ߴ��'line-height'����ֵ��IJ��ͳ�Ϊ�����������һ��ͳ�Ϊ�������
�û��˽����η�����һ�����ڿ�Ĵ�ֱ���룬�ڶ��͵������졣���磬���һ�����ָ߶�Ϊ'12pt'����'line-height'ֵΪ'14pt'�������2pt�Ķ���հף�1pt�ڶ�����1pt�ڵײ�������Ҳ�����ڿյĿͺ�����һ�յĿ�������ޱ����ĸ����
���'line-height'ֵС������ߴ磬�������ڿ�ĸ߶Ƚ�С������ߴ磬����Ⱦ�����ν���������������档���������һ����Ӵ���һ�����ڿ�ıߣ���Ⱦ������Ҳ�ᡰ���롱���ڵ��߿�
��Ȼ���滻Ԫ�صı߾ࡢ�߿�ͱ߰ײ����������ڿ�߶ȵļ��㣨Ҳ�Ͳ��μ��߿�߶ȵļ��㣩�����ǻ��������ڿ���Χ�õ���Ⱦ�������ζ�����һ���߿�ĸ߶�С�ڿ������������Լ��߰ͱ߿����ɫ���ܻᡰ���롱���ڵ��߿�������������£���Щ�û��˿���ʹ���߿������ü����߿�ͱ߰�����������Ⱦ���ǣ���
ֵ�� | normal | <number> | <length> | <percentage> | inherit |
��ʼֵ�� | normal |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����Ԫ������������ߴ� |
ý�飺 | ͼ�� |
���������������һ������Ԫ�أ������ߵ�����������Ԫ����ɣ���ָ����ÿһ�����ɵ����ڿ����С�߶ȡ�
���������������һ������Ԫ�أ���ָ���˸�Ԫ�����ɵ�ÿһ�����ȷ���߶ȡ������������滻Ԫ�أ����Ŀ�ĸ߶���'height'���Ը�������
������ȡֵ�ĺ������£�
����������������������ͬ���иߣ�
DIV { line-height: 1.2; font-size: 10pt } /* number */ DIV { line-height: 1.2em; font-size: 10pt } /* length */ DIV { line-height: 120%; font-size: 10pt } /* percentage */
���һ��Ԫ�ذ�����ֹһ��������Ⱦ���ı����û���Ӧ�ø�����������ߴ���ȷ��'line-height'��ֵ��
һ��أ��������һ�������е��������ڿ�ֻ��һ��'line-height'ֵ�������Ƕ������иߵ�ͼ�Σ�����������֤�����еĻ������þ���'line-height'����ֵ����һ�����Ҫ�������ڱ����У���ͬ������ı��б����������ʱ��
ע���滻Ԫ����һ��'font-size'�Լ�һ��'line-height'���ԣ���ʹ���Dz���ֱ������ȷ����ĸ߶ȡ�'font-size'��������'em'��'ex'��λ����'line-height'��'vertical-align'��������һ�������á�
ֵ�� | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
��ʼֵ�� | baseline |
�����ڣ� | ����Ԫ�غͱ���ԪԪ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����Ԫ��������'line-height' |
ý�飺 | ͼ�� |
�����Ծ���һ������Ԫ�ز����Ŀ���һ���߿��ڴ�ֱ�����λ�á��������Щֵ���ڲο�������Ԫ�ػ������Ԫ������һ���������ڿ���������Ԫ��ʱ�������壻��������û���κ����á�
ע�⡣��Щ���Ե�ֵ�ڱ��������к�����������ͬ�ݡ���μ�����߶��㷨���˽����ϸ�ڡ�
����ֵ���ڸ����ɵĿ����ڵ��߿�