8 ������ģ��

    Ŀ¼

    CSS������ģ���������ĵ�����Ԫ�ز����ij����ΰ��������Ǹ������ӻ���ʽģ�������֡�ҳ�����һ������Ŀ�����������ҳ�����һ�¡�

8.1 ��ijߴ�

    ÿһ������һ�������������ı���ͼ�εȵȣ��Լ���ѡ�Ļ�������Χ���߰����߿��Լ��߾�����ÿ������ijߴ����������۵����Թ涨����������ͼչʾ����Щ��������໥�������Լ��������ñ߾࣬�߿�ͱ߰׵Ȳ��ֵ����

    Image illustrating the relationship between content, padding, borders, and margins.   [D]

    �߾࣬�߿�ͱ߰׿���ϸ��Ϊ���Ҷ����IJ��֣����磬��ͼ���У�"LM"������߾࣬"RP"�����ұ߰ף�"TB"�������߿򣬵ȵȣ���

    �ĸ��������ݣ��߰ף��߿�ͱ߾ࣩ��ÿһ���߽��Ϊһ�����ߡ�����ˣ�ÿһ�����������ߣ�

���ݱ����ڱ�
���ݱ߰�ΧԪ�ص�����Ⱦ��������
�߰ױ�
�߰ױ�Χ�ƿ�ı߰ס�����߰׿���Ϊ0����߰ױߺ����ݱ��غϡ���ı߰ױ߶������п����ɵ��������ıߡ�
�߿��
�߿��Χ�ƿ�ı߿�����߿����Ϊ0���߿�ߺͱ߰ױ��غϡ�
�߾�������
�߾��Χ�ƿ�ı߾ࡣ����߾����Ϊ0���߾�ߺͱ߿���غϡ�

    ÿһ���߿���ϸ��Ϊ���Ҷ������ࡣ

    ����������ߴ硪�����ݿ��������ݸ߶�����ȡ�������ɸ����أ��������Ԫ���Ƿ�������'width'��'height'���ԣ����Ƿ�����ı��������򣬿��Ƿ���һ������ȵȡ���Ŀ��Ⱥ͸߶����ۣ��μ����ӻ���ʽģ�͵�ϸ��һ�¡�

    ��Ŀ��������ұ߾ࡢ���ұ߿����ұ߰׺����ݵĿ�����ӵõ����߶��ɶ��ױ߾ࡢ���ױ߿򡢶��ױ߰׺����ݵĸ߶���ӵõ���

    ��IJ�ͬ����ı�����ʽ�����������ģ�

8.2 �߾࣬�߰׺ͱ߿��ʾ��

�������չʾ�˱߾࣬�߰׺ͱ߿�������໥���õġ�����HTML�ĵ����£�
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is longer
           to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

    �����һ���ĵ��������У���������ϵ�У�һ��ULԪ�أ���������LI��Ԫ�ء�

    ����ĵ�һ��ͼ��ʾ�˱����ij��ֽ�����ڶ���ͼ��ʾ��ULԪ�ؼ�����Ԫ��LIԪ�صı߾ࡢ�߰׺ͱ߿�֮��Ĺ�ϵ��

    Image illustrating how parent and child margins, borders,
and padding relate.   [D]

    ע�⣺

8.3 �߾�������'margin-top'��'margin-right'��'margin-bottom'��'margin-left'�Լ�'margin'

    �߾�����������һ������߾����Ŀ��ȡ�'margin'��д�������������ıߵı߾࣬�������ı߾�����ֻ�������Ǵ�������һ�ߵı߾ࡣ

    ���ڶ������������<margin-width>ֵ�����ͣ�����������ֵ֮һ��

<length>
ָ��һ���̶��Ŀ��ȡ�
<percentage>
�ٷֱȵļ���������ɵĿ��������������������'margin-top'��'margin-bottom'����ˣ���������ҳ���������У�������ٷֱ������ҳ���ĸ߶ȣ���
auto
�����ϸ����μ����Ⱥͱ߾�ļ���һ�¡�

    �߾����������и�ֵ��������������ʵ����ص����ơ�

'margin-top'��'margin-right'��'margin-bottom'��'margin-left'
ֵ��  <margin-width> | inherit
��ʼֵ��  0
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ����ڰ�����Ŀ���
ý�飺  ͼ��

    ��Щ�������ÿ�Ķ����ң��ף���߾ࡣ

���ӣ�

    

H1 { margin-top: 2em }
'margin'
ֵ��  <margin-width>{1,4} | inherit
��ʼֵ��  ������д����δ����
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ����ڰ�����Ŀ���
ý�飺  ͼ��

     'margin'������ʽ����ͬһ������'margin-top'��'margin-right'��'margin-bottom'�Լ�'margin-left'����д���ԡ�

    �������һ��ֵ������Ӧ���������ıߡ����������ֵ�����ױ߾�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ�����������ֵ�����߾�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ���ױ߾�����Ϊ������ֵ��������ĸ�ֵ�����Ƿֱ����ö����ң��ף���߾ࡣ

���ӣ�

    

BODY { margin: 2em }         /* ���еı߾඼����Ϊ2em */
BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

     ���������һ�������ͬ�����µ����ӣ�

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* ����Աߣ��ұߣ��������� */
}

8.3.1 �߾��غ�

    �ڱ��淶�У������߾��غ���ζ�����������򣨿�������Ҳ����Ƕ�ף������ڵı߾ࣨ���û�б߰׻�߿������غ���һ����γ�һ����һ�ı߾ࡣ

    CSS2�У�ˮƽ�߾���Զ�����غϡ�

    ��ֱ�߾��������ض��Ŀ�֮���غϣ�

    ��μ��߾࣬�߰׺ͱ߿��ʾ��һ�£����˽�߾��غϵ����ӡ�

8.4 �߰������� 'padding-top'��'padding-right'��'padding-bottom'��'padding-left'��'padding'

    �߰����Թ涨��һ������߰����Ŀ��ȡ�'padding'��д�������������ıߵı߰ף��������ı߰�����ֻ�������Ǵ�������һ�ߵı߰ס�

    �������������������<padding-width>ֵ���ͣ�����ȡ����ֵ��

<length>
ָ��һ��ȷ�����ȡ�
<percentage>
�ٷֱȵļ���������ɵĿ�İ�����Ŀ��ȣ���ʹ�Ƕ���'padding-top'��'padding-bottom'Ҳ����ˡ�

    �ͱ߾����Բ�ͬ���߰�ֵ�������Ǹ������ͱ߾��������ƣ��߰׵İٷֱ�ֵҲ�������ɵĿ�İ�����Ŀ��ȡ�

'padding-top'��'padding-right'��'padding-bottom'��'padding-left'
ֵ��  <padding-width> | inherit
��ʼֵ��  0
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ����ڰ�����Ŀ���
ý�飺  ͼ��

    ��Щ��������һ����Ķ����ң��ף���ı߰ס�

���ӣ�

    

BLOCKQUOTE { padding-top: 0.3em }
'padding'
ֵ��  <padding-width>{1,4} | inherit
��ʼֵ��  ������д����δ����
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ����ڰ�����Ŀ���
ý�飺  ͼ��

     'padding'����������ʽ���е�ͬһ������'padding-top'��'padding-right'��'padding-bottom'��'padding-left'����д���ԡ�

    ���ֻ��һ��ֵ���������������ıߡ����������ֵ�����ױ߰�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ�����������ֵ�����߰�����Ϊ��һ��ֵ�����ұ߰�����Ϊ�ڶ���ֵ���ױ߰�����Ϊ������ֵ��������ĸ�ֵ�����Ƿֱ����ö����ң��ף���߰ס�

    �߰�����ı�����ɫ��ͼ����'background'����ȷ����

���ӣ�

    

H1 { 
  background: white; 
  padding: 1em 2em;
} 

    ������ָ����ֱ�߰ף�'padding-top'��'padding-bottom'��Ϊ'1em'��ˮƽ�߰ף�'padding-right'��'padding-left'��Ϊ'2em'��'em'��λ�������Ԫ�ص�����ߴ�ĵ�λ��'1em'����ʹ�õ�����ijߴ硣

8.5 �߿�����

    �߿��������ÿ���߿����Ŀ��ȣ���ɫ����ʽ����Щ����ʹ�������е�Ԫ�ء�

     ע�⡣����HTML���ԣ��û��˶���ijЩԪ�أ��簴ť���˵��ȣ��߿����Ⱦ��������һ�㡱Ԫ�ؿ���������ͬ��

8.5.1 �߿������'border-top-width'��'border-right-width'��'border-bottom-width'��'border-left-width'��'border-width'

    �߿���������߿����Ŀ��ȡ������ж������������<border-width>ֵ���ͣ�����ȡ����ֵ��

thin
һ��խ�ı߿�
medium
һ���еȵı߿�
thick
һ����߿�
<length>
�߿�ĺ������ʽֵ����ʽ�ı߿���Ȳ���Ϊ������

    ǰ����ֵ�Ľ���ȡ�����û��ˡ�����������ѭ���¹�ϵ��

    'thin' <='medium' <= 'thick'.

    ���⣬��һ���ĵ��У���Щ���ȱ��뱣��һ�¡�

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
ֵ��  <border-width> | inherit
��ʼֵ��  medium
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ��Щ�������ÿ�Ķ������ұ߿�Ŀ��ȡ�

'border-width'
ֵ��  <border-width>{1,4} | inherit
��ʼֵ��  ����������
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������������ʽ����ͬһ������'border-top-width'��'border-right-width'��'border-bottom-width'��'border-left-width'����д���ԡ�

    ���ֻ��һ��ֵ���������������ıߡ����������ֵ�����ױ߿���õ�һ��ֵ�����ұ߿���õڶ���ֵ�����������ֵ�����߿���õ�һ��ֵ�����ұ߿���õڶ���ֵ�����ױ߿���õ�����ֵ��������ĸ�ֵ�����Ƿֱ������ڶ����ң��ף����ıߡ�

���ӣ�

    �����У�ע���б���˽���Ķ����ң��ף���߿�Ŀ��ȣ�

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 �߿���ɫ�� 'border-top-color'��'border-right-color'��'border-bottom-color'��'border-left-color'��'border-color'

    �߿���ɫ����ָ���˿�ı߿����ɫ��

'border-top-color'��'border-right-color'��'border-bottom-color'��'border-left-color'
ֵ��  <color> | inherit
��ʼֵ��  'color'���Ե�ֵ
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��
'border-color'
ֵ��  <color>{1,4} | transparent | inherit
��ʼֵ��  ����������
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    'border-color'���������ĸ��߿����ɫ������ֵ�ĺ������£�

<color>
ָ��һ����ɫֵ��
transparent
�߿���͸���ģ����������п��ȣ���

    'border-color'���Կ�����һ�����ĸ�ֵ����Щֵ���ò�ͬ�ıߣ�������'border-width'��ͬ��

    ���û���ñ߿�����ָ��һ��Ԫ�صı߿���ɫ���û��˱����ø�Ԫ�ص�'color'��������Ϊ�߿���ɫ������ֵ��

���ӣ�

    �����У��߿��Ǻ�ɫʵ�ߡ�

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 �߿���ʽ��'border-top-style'��'border-right-style'��'border-bottom-style'��'border-left-style'��'border-style'

    �߿���ʽָ����ı߿�����ͣ�ʵ�ߣ�˫�ߣ����ߵȣ��������ж������������<border-style>ֵ���ͣ�ȡֵΪ��

none
û�б߿򡣸�ֵ��ʹ'border-width'�ļ���ֵΪ0�� to be '0'.
hidden
��'none'���ƣ�����������Ԫ��������߿��ͻʱ��
dotted
�߿���һϵ�еĵ㡣
dashed
�߿���һϵ�еĶ������ĶΡ�
solid
�߿���һ����һ���ߡ�
double
�߿�������ʵ�ߡ������߿������еĿհ׵Ŀ���֮�͵���'border-width'��ֵ��
groove
�߿���ȥ�����ǵ���ڻ���֮�ڡ�
ridge
��'grove'�෴���߿���ȥ�����Ǵӻ�����͹������
inset
�ñ߿�ʹ��������ȥ������Ƕ�ڻ����С�
outset
��'inset'�෴���ñ߿�ʹ��������ȥ�����Ǵӻ�����͹������

    ���еı߿��ڿ�ı���֮�ϡ�'groove'��'ridge'��'inset'��'outset'���͵ı߿����ɫȡ����Ԫ�ص�'color'���ԡ�

    ��CSSһ�µ��û������ܽ�'dotted'��'dashed'��'double'��'groove'��'ridge'��'inset'��'outset'Ϊ'solid'��

'border-top-style'��'border-right-style'��'border-bottom-style'��'border-left-style'
ֵ��  <border-style> | inherit
��ʼֵ��  none
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��
'border-style'
ֵ��  <border-style>{1,4} | inherit
��ʼֵ��  �μ�����������
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    'border-style'���������ıߵ���ʽ����������һ�����ĸ�ֵ���ֱ����ò�ͬ�ıߣ�����ͬ'border-width'��

���ӣ�

    

#xy34 { border-style: solid dotted }

    �����У�ˮƽ�߿���'solid'����ֱ�߿���'dotted'��

    ���ڱ߿���ʽ�ij�ʼֵ��'none'����ˣ����������˱߿���ʽ��û���κα߿�ɼ���

8.5.4 �߿���д������'border-top'��'border-bottom'��'border-right'��'border-left'��'border'

'border-top'��'border-right'��'border-bottom'��'border-left'
ֵ��  [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
��ʼֵ��  ������������
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ����һ�����ÿ�Ķ������ұ߿�Ŀ��ȣ���ʽ����ɫ����д���ԡ�

���ӣ�

    

H1 { border-bottom: thick solid red }

    ������һ��������H1Ԫ�����߿�Ŀ��ȣ���ʽ����ɫ��ʡ�Ե���ֵ������Ϊ���Ǹ��Ե���ʼֵ������������һ����û��ָ���߿���ɫ���߿����ɫ����'color'����ָ����

H1 { border-bottom: thick solid }
'border'
ֵ��  [ <'border-width'> || <'border-style'> || <color> ] | inherit
��ʼֵ��  ������������
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    'border'���������ÿ���ĸ��߿�Ϊ��ͬ�Ŀ��ȣ���ɫ����ʽ����д���ԡ�����д����'margin'��'padding'��ͬ��'border'���Բ����Զ��ı����ò�ͬ��ֵ��Ҫ�ﵽ��һĿ�ģ�����ʹ������һ�������߿����ԡ�

���ӣ�

    ���磬����ĵ�һ�������ͬ�ڸ��������ĸ�����

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

    ������ij�̶ֳ��ϣ����Ծ��и��ǵ����ԣ����ָ�������˳�����Ҫ��

���ӣ�

    ��������һ�����ӣ�

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

    �������У���߿����ɫ�Ǻ�ɫ���������߿����ɫ�Ǻ�ɫ��������Ϊ'border-left'�����˿��ȣ���ʽ����ɫ������'border-left'���Բ�û�и�����ɫֵ��������'color'�����л��ֵ������'color'����������'border-left'֮����һ��ʵ�޹ء�