Rozmiar pudełka

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 39 z 76.

W CSS właściwość box-sizing określa sposób obliczania całkowitej szerokości i wysokości elementu. Domyślnie właściwości width i height uwzględniają tylko rozmiar zawartości, a nie padding, obramowania ani marginesy. Możesz jednak zmienić to zachowanie za pomocą właściwości box-sizing, tak aby właściwości width i height uwzględniały również rozmiary paddingu i obramowania.

Może to uprościć obliczenia układu i zapobiec nieoczekiwanym problemom z rozmiarem.

Oto podstawowa składnia użycia właściwości box-sizing:

selector {
    box-sizing: value;
}

value: Oczekiwane zachowanie właściwości box-sizing, które może być jednym z poniższych:

content-box: To wartość domyślna. Właściwości width i height obejmują wyłącznie rozmiar treści. Do określonej szerokości i wysokości dodawane są na zewnątrz dopełnienie, obramowanie i marginesy.

border-box: Właściwości width i height obejmują rozmiary zawartości, wypełnienia i obramowania. Marginesy są nadal dodawane na zewnątrz elementu.

Na przykład:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Domyślne zachowanie */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

W tym przykładzie element <div> ma wartość box-sizing równą content-box. Oznacza to, że rzeczywista renderowana szerokość elementu <div> wyniesie 300px (zawartość) + 40px (lewy i prawy padding) + 10px (lewa i prawa krawędź) = 350px. Wysokość zostanie obliczona podobnie.

Z kolei element z klasą container ma wartość box-sizing równą border-box. W tym przypadku określona width wynosząca 400px będzie obejmować zawartość, dopełnienie i obramowanie. Rzeczywisty obszar zawartości zmniejszy się, aby uwzględnić dopełnienie i obramowanie, co da szerokość zawartości równą 400px - 60px (dopełnienie z lewej i prawej strony) - 20px (obramowanie z lewej i prawej strony) = 320px. Wysokość zostanie obliczona podobnie.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma elementami (<div>), z których każdy ma inną klasę. Twoim zadaniem jest użyć właściwości box-sizing, aby kontrolować sposób obliczania szerokości i wysokości tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą <strong>content-box-div</strong>. Ustaw width na 300px, height na 200px, padding na 20px, border na 5px solid blue, a box-sizing na content-box.
Napisz regułę CSS, która wybiera element <div> z klasą <strong>border-box-div</strong>. Ustaw width na 300px, height na 200px, padding na 20px, border na 5px solid red, a box-sizing na border-box.

Spróbuj swoich sił

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>