Xếp hạng bài viết này
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
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: Khithiế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ớitrị 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.
Nguồn : https://thachpham.com
