box sizing là gì

box sizing là gì

Ở trong HTML với mọi element chúng ta có thể gọi nó là một cái “hộp”. Và trong CSS thì thuật ngữ Box Model dùng để nói về design và layout. Chúng ta có thể coi CSS Box Model giống như là một cái hộp bao quanh element của chúng ta và trong đó có rất nhiều lớp dày mỏng khác nhau, các lớp dày mỏng đó bao gồm: margins, border, padding và cuối cùng là phần nội dung của chúng ta (text và ảnh).

 

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử.

Bắt đầu từ CSS2, thuộc tính box làm việc như sau:

 

width + padding + border = chiều rộng thực sự của một phần tử box

height + padding + border = chiều cao thực sự của một phần tử box

Nghĩa là, khi bạn đã xác định chiều cao và chiều rộng, thì kích cỡ của box sẽ lớn hơn một chút do phải cộng thêm padding và border vào chiều cao và độ rộng bạn đã thiết lập.

 

Để box không bị thay đổi kích cỡ thì ta sẽ sử dụng Box sizing, thế thôi. Khuyến khích áp dụng cho mọi phần tử trên website nhé (*) .

 


* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

 

Xin cám ơn các bạn đã theo dõi bài chia sẽ của mình.

 

 

Share this post

Post Comment