Hướng dẫn và ví dụ CSS box-sizing

Xem thêm các chuyên mục:

Các hướng dẫn CSS

CSS box-sizing:content-box
CSS box-sizing:border-box
CSS box-sizing:padding-box (!)

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- CSS box-sizing:content-box

CSS Box Modal là một bộ chứa (container) được tạo ra từ nhiều thành phần, bao gồm content (nội dung), paddings, margins, borders. Dưới đây là hình ảnh minh họa một Box Model:

CSS {box-sizing:content-box}

CSS box-sizing có giá trị mặc định là content-box, điều này có nghĩa là phần tử mặc định là một "Context-Box".

Trong trường hợp phần tử là một "Content-Box" thì CSS width/height sẽ là chiều rộng và chiều cao của hình chữ nhật chứa nội dung của phần tử, điều đó có nghĩa là khi một phần tử được thiết lập padding hoặc border (hoặc cả hai) nó sẽ làm phần tử to hơn.

box-model-example.html


<div style="border: 1px solid gray;width:200px;height:100px;">
     border: 1px solid gray; <br/>
     width:200px; <br/>
     height:100px;
</div>
<div style="margin: 20px;padding:30px; border: 10px solid gray;width:200px;height:100px;">
    margin: 20px; <br />
    padding:30px;   <br/>
    border: 10px solid gray;  <br/>
    width:200px;  <br/>
    height:100px;
</div>

Kích thước thực tế của một phần tử loại "Content-Box" được tính theo công thức:


realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight

realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom

Trong đó:


// box-sizing:content-box (Default):
// We have:
contentWidth = cssWidth
contentHeight = cssHeight

2- CSS box-sizing:border-box

Đôi khi bạn muốn thiết lập border, padding cho phần tử và không muốn làm phần tử tăng kích thước, điều này hoàn toàn khả thi nếu bạn sử dụng CSS box-sizing:border-box. Khi đó phần tử này sẽ được coi là một "Border-Box".

Nếu một phần tử là một "Border-Box" thì CSS width/height sẽ là "chiều rộng/chiều cao" của hình chữ nhật bao gồm cả padding và borders.

box-sizing-border-box.html


<!DOCTYPE html>
<html>

<head>
    <title>CSS box-sizing</title>
    <meta charset="UTF-8"/>
    <style>
         .my-box  {
            box-sizing:border-box;
            width:250px;
            height:120px;
            margin: 20px;
            padding:30px;
            border: 10px solid gray;
         }
    </style>
</head>
<body>
    <h3>CSS {box-sizing:border-box;}</h3>
    <div class = "my-box">
        box-sizing:border-box; <br/>
        width:250px;  <br/>
        height:120px;  <br/>
        margin: 20px; <br/>
        padding:30px;   <br/>
        border: 10px solid gray;
    </div>
</body>
</html>

3- CSS box-sizing:padding-box (!)

Chú ý: Hầu hết các trình duyệt không hỗ trợ CSS box-sizing:padding-box (Hoặc không còn hỗ trợ nữa).

Một phần tử được thiết lập CSS box-sizing:padding-box nó sẽ được coi là một "Padding-Box". Khi đó CSS width/height chính là chiều rộng và chiều cao của hình chữ nhật chứa padding, nhưng không bao gồm borders.

Xem thêm các chuyên mục:

Các hướng dẫn CSS