Tìm hiểu cách thiết lập chiều rộng, chiều cao của box CSS

[PVS]

Tìm hiểu cách thiết lập chiều rộng, chiều cao của box CSS

Trong CSS có các thuộc tính như width, height cũng như min-width, min-height, những thuộc tính này sẽ giúp chúng ta thiết lập chiều rộng, chiều cao của box.

Để thiết lập chiều rộng và chiều cao phần nội dung phần tử dùng thuộc tính width và height chỉ ra giá trị rộng, cao theo đơn vị px, em ...

<style>
    div.exam1 {
        border: 5px solid green;
        width: 190px;
        height: 90px;
    }
</style>

<div class="exam1">
    Phần tử này có tổng chiều cao la
    100px và tổng chiều rộng là 200.
</div>

​

Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML.

Ở ví dụ trên, tổng chiều cao là 90px + 5px (viền) + 5px (viền) = 100px

Đơn vị phần trăm rộng, cao

Thuộc tính width và height có thể được thiết lập bằng đơn vị phần trăm. Ví dụ sau, chiều rộng theo phần trăm, chiều cao lại theo px

<style>
    div.measure {
        border: 5px solid green;
        width: 100%;
        height: 90px;
    }
</style>
<div class="measure">
    Tổng chiều rộng là <strong>100%</strong>
    và chiều cao là <strong>100px</strong> .
</div>

​

Khi thiết lập width là 100%, kích thước box sẽ tự thay đổi để vừa khít với phần tử chứa nó.

Chiều rộng, chiều cao lớn nhất nhỏ nhất

Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co giãn theo nội dung trong kích thước lớn nhất và nhỏ nhất).

• min-width - độ rộng nhỏ nhất
• min-height - chiều cao nhỏ
• max-width - độ rộng lớn nhất
• max-height - chiều cao lớn nhất

<style>
    p.first {
        border: 5px solid green;
        min-height: 100px;
    }
    p.second {
        border: 5px solid green;
        max-width: 100px;
    }
</style>

<p class="first">The <strong>minimum height </strong>
    of this paragraph is set to 100px.</p>
<p class="second">The<strong> maximum width </strong>
    of this paragraph is set to 100px.</p>

​

Chúc các bạn thành công.

Nguồn: Internet​