? ??? ??? ?? ????? ???? ??? ????: ??? ?? ?? CSS? ?? ?? ??? ?? ???? ??? ???? ??? ???? ????. ?? ??? ?? ???? ?? ???? ??? ?????? ? ????? ?? ??? ?? ?? ??, ???? ??? ??, ?? ????? ??? ???? ???? ?? ??? ?? ???? ?? ???? ??? ????? ??? ??? ???? ? ??? CSS ?? ??? ?????.

?? ??: ?? ????? ????? ?? ??

? ????? ?? ???? ?? ????? ???? ?? ??? ???, ?? ?? ??? ???????? "?? ??"? ?? UI ?? ??? ??? ? ?? ???? ?? ???? ???? ??? ????. ???? ?? ??? ?? ??? ?? ????? ?? ???? ?? ?? ? ??? ???? border-radius ? Overflow: hided? ?? ????? ???? ????.

??? ?? ???? ???? ????? ??? ??? ? ????. ?? ????? Overflow: Hidden? ?????? ?? ??(?? ?? ?? ?? ??)? ?? ????? ???? ???? "?? ???"? ??? ??? ?????. ?? ????? ?? ??? ????? ?? ??? ?? ????? ????? ??? ?? ?? ??? ?? ??? ?????.

? ??? ?? ??? ?? ?? ??? ?? ????? ?? ??? , ?? ?? ??? ????. ?? ?? h1~h6 ?? ??? p ?? ???? ????? ?? ? ??? ??(margin-top ? margin-bottom)? ????. ?? ??? ?? ??? ?? ??? ?? ????? ???? ??? ?? ?? ?? ??? ?? ????? ?? ?????? ?????. ??, ?? ????? ???? ???? ?? ??? ? ??? ??? ??? ??? ??, ? ??? ?? ?? ????? ???? ?????. ??? ?? ? ????: ?? ????? ??? ??? ??? ??? ???? ?? ??? ???? ?? ???? "?? ???"? ?????.

?? ??: CSS ?? ?? ??

?? ??? ????? CSS ??? ???? ???? ???. ?? ??? ?? ???? ???? ???? ?? ????? ???? ???? ??? ?? ??? ?? ??? ???? ???? ?? ??? ???? ??? ???? ????.

1. ?? ????? ?? ???? ???? ?? ??

?? border-radius ?overflow:hidden? ?? ??? ?? ?????? ????? ?????. overflow:hidden? ?????. ?? ?? ????? ??? ???? ?? ???(?? ???? ?? ?? ?? ??)? ????? ?????.

 .?? {
    ????: ??; /* ???? ?? ????? ???? ?????*/
    ??? ??: 10px; /* ?? ????? ?? ???? ?????*/
    /* ??? ?? ??? ?? ?? ????? ???? ????? ?????*/
    /* ???: ??; */
}

2. ?? ??? ?? ?? ??

?? '?? ??' ??? ???? ? ??? ?????. ?? ????? ?? ????? ? ??? ?? ??? ?? ? ?? ?? ?? ??? ?? ?? ??? ????? 0?? ???? ???.

 .info .description-?? {
    ??: #f1ecff;
    ???: #333;
    ?? ??: 15px;
    ??: 12px;
    ??? ??: ??;
    ??: 0; /* ?: h3? ?? ?? ??*/
}

.info .description-text {
    ?? ??: 100px;
    ????-y: ??; /* ?? ??, ??? ?? ??? ?? ?? ??*/
    ??? ??: ?? ??;
    ?? ??: 14px;
    ??: 8px 12px; /* ??? ???? ??? ??? ??????*/
    ??: 0; /* ?: p? ?? ?? ??*/
}

??: Overflow-y: ???? ?? ??? ?? ?? ?? ??? ???? ???. ???? ??? ??? ? ??? auto? ??? ??? ?????. ???? ???? ??? ?????. ? ???? ??? ??? ?? ??? ? ?? ??? ???? ??? ?? Overflow-y:hidden? ? UI ???? ? ??? ? ????.

3. ???? ?? ??? ?? ? ?? ??

?? ?? ??? ???? ??? ??? ??? ??? ??? ????? ? ?? ??? ??? ???? ???? ???. ??? ?? ??? ???? ???? ????? ????? ?? ???? ?? ??? ???? ??????.

 .info .description-?? {
    ???: #333; /* ?? ??? ???*/
    /* ...?? ???*/
}

.info .description-text {
    ???: #ddd; /* ??? ???? ???? ??? ??? ???*/
    ??: 20px 12px; /* ?? ??? ????? ?? ??? ?????*/
    /* ...?? ???*/
}

.description-text? ?? ???? ?????? ?? ??? ??? ?? ??? ??? ??? ?? ??? ??? ??? ???? ?? ??? ????? ????? ??? ? ????.

??? ?? ??

??? ?? ???? ???? ?? ??? ?? ????? ???? ??? ???? ???? HTML ? CSS ?????.

HTML ??:

 <div>
    <h3 class="description-title">??</h3>
    <p class="description-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. minimaearum facilis recusandae voluptatum voluptatibus optio similique dolore nobis, ab Excepturi aliquam quasi animi quisquam porro velit quam veritatis? Natus modi aperiam adipisci maxime.</p>
</div>

???? CSS:

 .?? {
    ????: ??; /* ???? ?? ????? ???? ?????*/
    ??? ??: 10px; /* ?? ????? ?? ???? ?????*/
    /* ?? ????? ???? ??? ? ??? ?? ??? ???? ?? ? ???? */
}

.info .description-?? {
    ??: #f1ecff;
    ???: #333; /* ?? ?? ???*/
    ?? ??: 15px;
    ??: 12px;
    ??? ??: ??;
    ??: 0; /* h3? ?? ?? ??*/
}

.info .description-text {
    ?? ??: 100px;
    ????-y: ??; /* ??? ??? ??? ?? ?? ??? ????*/
    ??? ??: ?? ??;
    ?? ??: 14px;
    ??: 20px 12px; /* ?? ?? */
    ??: 0; /* p? ?? ?? ??*/
    ???: #ddd; /* ??? ?? ???*/
}

?? ?? ? ?? ??

1. ???? ?? ???: HTML ??? ???? ?? ???? ?? ???? ?????. ?????? ?? ??? ???? ?? ?? ???? ???? ?? ????? ?????. CSS Reset ?? Normalize.css? ???? ?? ??????.
2. ?? ?? ??: ??? ??? ??? ????? CSS ?? ??(??, ??, ???, ??)? ?? ?? ??? ?????. ??? ?? ??? ????, ??? ?? ???? ?? ??? ??? ?????.
3. ????: ?? ? ??? ??? ??: ? ? ??? ?? ???? ??? ?? ?? ????? ?? ???? ???? ?? ?????. overflow:hidden? ???? ??? ?? ?? ??? ??? ??? ?? ???? ??? ??? ? ?? ??? ?? ?? ????(BFC)? ?????.
4. ???? HTML: ???? HTML ??(?: h3, p)? ????? ????? ??? ?? ??? ??? ? ?? ?? ???? ???? ?? ???? ??? ?? ???.
5. ??? ??: ???? ??? ??? ???? ??? ??? ???? ?? ??? ?????. ??? ???? ??? ??, ?? ? ???? ???? ??? ??? ?? ? ????.

??

? ????? ?? ??? CSS? ?? ???? ??? ??? ???? ??? ? ??? ? ?? "?? ???" ??? ?? ???? ? ?? ??? ??????. ???? ??? ??? ?? ? ????: ??? ?? ????? ???? ??? ?? ??? ?? ??? ???? ???? ???? ???? ??? ???? ??? ???? ????. ??? ??? ??? ???? ???? ???? ?? ??? UI ?? ??? ????? ?? ? ????.

? ??? CSS ?? ????? ????? ?? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!