box-sizing là gì là một trong những từ khóa được search nhiều nhất về chủ đề box-sizing là gì . Trong bài viết này, lamweb.vn sẽ viết bài viết Tìm hiểu về box-sizing là gì ? Tác dụng của box-sizing trong CSS3
Mục lục
Tìm hiểu về box-sizing là gì ? Tác dụng của box-sizing trong CSS3
Khi các bạn học qua Box Model trong CSS thì sẽ thấy có một đặc điểm khi sử dụng Padding và Border thì cái khung phần tử của bạn sẽ bị chuyển đổi kích thước nếu bạn có đặt thêm thuộc tính width và height để xây dựng kích thước cho nó. ví dụ cái box của bạn có width là 500px và height là 500px (500×500 px)nhưng nếu bạn đặt thêm padding là 15px nữa thì cái khung của bạn sẽ có kích thước là 530×530 px. Bởi vì nếu cộng thêm pading là 15px nữa thì cái khung của bạn sẽ auto cộng thêm 30px (15px cho top và và 15px cho bottom, tương tự với left và right), tương tự vớiborder.
Vậy thì nếu hiện nay bạn muốn làm cho phần tử của mình phải giữ nguyên kích thước mặc dù có cộng thêm padding và border thì sẽ cần phải dùng đến tính chất box-sizing. Box-sizing là một tính chất sẽ giúp bạn đủ sức tính toán và kiểm soát được click thước của một phần tử dựa vào tính chất width và height đang được thiết lập bên trong. Hay nói hướng dẫn không giống, là bạn sẽ mong muốn tính chấtwidth và height là kích thước vừa mới gồm có border và padding.
note về mẹo vạch
box-sizing là một thuộc tính trong CSS3 nên khi vạch bạn phải viết thành 3 lần với các tiền tố không giống nhau, ví dụ:
01 02 03 | box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; |
Trong đó, nếu vạch k 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ũ và -moz là dành cho Firefox bản cũ.
Các trị giá của box-sizing
hiện nay box-sizing có support một số giá trị giống như sau:
content-box: trị giá mặc định, nghĩa là giá trị width và height chỉ ứng dụng cho khu vực nội dung bên trong, k gồm có padding, border và margin.border-box: Khi thiết lập trị giá này, thì width và heigh sẽ bao gồm cho cả phần content, padding và border nhưng không bao gồm margin.padding-box: Với trị giá này thì width và height chỉ gồm có cho phần content và padding, k 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 trị giá này, mình khuyên rằng các bạn chỉ nên dùng giá trị border-box vì nó rất đa số, dễ tính toán cho web.
Nên dùng box-sizing cho toàn bộ phần tử
Theo trải nghiệm của mình thì khi viết CSS cho web, bạn hãy sử dụng box-sizing với trị giá là border-box cho all các phần tử trong web để 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 liên tục.
Để xây dựng box-sizing: content-box cho toàn bộ phần tử, chúng ta sẽ sử dụng vùng lựa chọn là *, nghĩa là gồm có mọi phần tử.
01 02 03 04 05 | * box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; |
Lời kết
Mặc dù box-sizing đủ nội lực là không cần thiết đến mức bắt buộc dùng nhưng có thể nó sẽ khiến bạn giải đáp về thắc mắc là tại sao xây dựng kích thước cho phần tử là giống như thế mà thêm padding, border vào nó lại hiển thị theo với kích thước khác. Và trên một số trường hợp, nó sẽ giúp bạn đơn giản quản lý kích thước các phần tử nhờ vào việc tùy chỉnh lại giá trị box-sizing giống như mình đang đề cập ở trên.