Вы находитесь на странице: 1из 2

box-sizing

��������� �� �������� ��������� ������� ������ � ������ ��������.


�������� ����������.
content-box - ����������� �� ���������� CSS, ��� ���� �������� width � height �����
������ � ������ �������� � �� ������ � ��� ������� ��������, ����� � ������.
border-box - �������� width � height ������ � ��� ������� ����� � ������, �� ��
�������� (margin). ��� ������ ����������� ��������� Internet Exporer � ������
���������������.
padding-box - �������� width � height ������ � ��� ������� �����, �� �� ��������
(margin) � ������ (border).
=========================================
padding
���������� ������ ��������
��� �������� ��� � ���������, �������� �������� �� ������ ������� ��������.
�������� �� ����������.

padding: ��_����_������;
padding: ������ ������ ����� �����;
padding: ������_����� ������_�����;
padding: ������ ������_����� �����;

������ ������ � ����� �� ��������� �� ������� ����


=========================================
margin
������� ������ ��������
��� �������� ��� � ���������, �������� �������� �� ������ ������� ��������.
�������� �� ����������.
�������� ����� ���� ��� �������������, ��� � ������������� ������.

margin: ��_����_������;
margin: ������ ������ ����� �����;
margin: ������_����� ������_�����;
margin: ������ ������_����� �����;

������ ������ � ����� �� ��������� �� ������� ����


=========================================
width
������������� ������ ������� ����� � ���������� �������� (�������� img)
�������� �� ����������.
width:100px;
width:10%;
=========================================
max-width
������������� ����������� ������ ������� ����� � ���������� �������� (�������� img)
=========================================
min-width
������������� ���������� ������ ������� ����� � ���������� �������� (�������� img)
=========================================
height:
������������� ������ ������� ����� � ���������� �������� (�������� img)
�������� �� ����������.
height:100px;
height:10%;
=========================================
min-height
�������� �� ����������.
=========================================
max-height
�������� �� ����������.
=========================================
overflow
�������� ������������ ��������� �������� ��������
visible - ����������� ��� ���������� ��������, ���� �� ��������� �������������
������ � ������.
hidden - ����������� ������ ������� ������ ��������, ��������� ����� ������.
scroll - ������ ��������� ������ ���������.
auto - ������ ��������� ��������� ������ ��� �������������.
=========================================
display:
������������ ��������, ������� ���������, ��� ������� ������ ���� ������� �
���������.
�������� �� ����������.

block - ������� ����������� ��� �������. ���������� ����� ������� �� ����������


���������, �������� ���� <span>, ��������� ��� ����� ������� ������ � ����������
������� ����� � ������ � � ����� �����������.

inline - ������� ����������� ��� ����������. ������������� ������� �����, ����� ���
<div> � <p>, ������������� ������� ������� � ���������� ���������� ���� ����� �
����� ������. �������� inline ������� ��� �����������, ������� ���������� �������
��������� ��������� � ���� �����, ��� �������� ���������� �������.

inline - block - ��� �������� ���������� ������� �������, ������� ��������� �������
���������� ���-�������� ������� ����������� ��������. ���������� ����� ������� ��
������ ������� ����� �� ������������ �������� (����� ���� <img>). ��� ���� ���
��������� ����� ������������ ��� ������� �������, � ��� ������� � ��� ����������.

none - �������� ������ ������� �� ���������. ���������� �� ����� �� ������������ �


���-�������� ���������� ���, ������ �������� � �� ����.
=========================================