CSS3 16 – Thuộc tính box sizing trong CSS3

0
190

Xin chào các bạn, hôm nay, chúng ta sẽ cùng tìm hiểu về thuộc tính box sizing trong CSS3, nó được sử dụng để thay đổi chiều cao và độ rộng của phần tử HTML.

Khi phát triển một ứng dụng HTML thông thường, một Frontend Developers hay gặp phải là việc điều chỉnh kích thước cho đối tượng. Khi ta đã có các thông số kích thước chính xác cho đối tượng, thì việc canh chỉnh những nội dụng thành phần trong nó ít nhiều sẽ ảnh hưởng theo vì các thuộc tính border & padding của các thành phần. Thuộc tính CSS3 box-sizing sẽ cho phép bạn khắc phục sự khó chịu này.

Trước đây, khi học CSS2, chúng ta đã học về 2 thuộc tính border và padding, và cách thức làm việc được tính theo công thức sau:

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

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

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

Thuộc tính sizing trong CSS2

Ví dụ minh họa cách sử dụng thuộc tính sizing trong CSS2.

Cho 2 khối div đặt id là div1 và div2, như sau:

CSS cho 2 khối:

Trong ví dụ trên, mình thiết lập chiều cao và chiều rộng cho hai hình ảnh là như nhau, tuy nhiên bạn có thể thấy rằng kết quả hiển thị là khác nhau, đó là do trong hình thứ hai mình thêm thuộc tính padding.

Kết quả như sau:

Thuộc tính box sizing trong CSS3

Cách viết

box-sizing là một thuộc tính trong CSS3 nên khi viết bạn phải viết thành 4 lần với các tiền tố khác nhau, ví dụ:

Trong đó, nếu viết không có tiền tố là dành cho trình duyệt IE8, Opera 7, Firefox và Google chrome bản mới. -webkit là dành cho Google Chrome bản cũ, -moz là dành cho Firefox bản cũ và -o- là dành cho Opera bản cũ.

Các giá trị của thuộc tính box-sizing

Hiện tại box-sizing có hỗ trợ một số giá trị như sau:

  • content-box: Giá trị mặc định, nghĩa là giá trị width và height chỉ áp dụng cho khu vực nội dung bên trong, không bao gồm padding, border và margin.
  • border-box: Khi thiết lập giá trị này, thì width và height sẽ bao gồm cho cả phần nội dung, padding và border nhưng không bao gồm margin.
  • padding-box: Với giá trị này thì width và height chỉ bao gồm cho phần nội dung và padding, không bao gồm border và margin.

Lưu ýpadding-box chỉ có tác dụng với trình duyệt Firefox.

Như vậy với ba giá trị này, mình khuyến khích các bạn chỉ nên sử dụng giá trị border-box vì nó rất đầy đủ, dễ tính toán cho website.

Nên sử dụng box-sizing cho toàn bộ phần tử

Theo kinh nghiệm của mình thì khi viết CSS cho website, bạn hãy sử dụng box-sizing với giá trị là border-box cho toàn bộ các phần tử trong website để các phần tử có kích thước chính xác khi bạn khai báo, tránh việc cộng thêm các phần border và padding sẽ gây ra rắc rối nếu bạn dùng hai cái này thường xuyên.

Để thiết lập box-sizing: border-box cho toàn bộ phần tử, chúng ta sẽ sử dụng vùng chọn là *, nghĩa là bao gồm mọi phần tử.

Ví dụ tổng quát

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính box-sizing trong CSS3.

Cho 2 khối div đặt id là div1 và div2 giống như trên, như sau:

CSS cho 2 khối:

Trong ví dụ trên, bạn để ý rằng cả hai hình ảnh đều có cùng chiều cao và chiều rộng và cùng thuộc tính box-sizing:border-box.

Kết quả như sau:

Mặc dù trong hình ảnh thứ hai, mình xác định thêm thuộc tính padding, tuy nhiên bằng việc sử dụng cùng thuộc tính box-sizing: border-box, thì chiều cao và chiều rộng của hai hình vẫn là như nhau.

Kết luận

Đây là một trong những thuộc tính CSS3 mà mình đánh giá là hiệu quả nhất. Hạn chế gần như tuyệt đối đến kích thước của đối tượng trong ứng dụng HTML, tránh tình trạng hiển thị không chính xác ở các trình duyệt (browsers) khác nhau. Hy vọng các bạn đã có những kiến thức bổ ích qua bài học này.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây