Up5me
Trang chủ > Câu hỏi lẻ > Z1WM9zfscJai

Đề bài

Một phần tử có khai báo thuộc tính box-sizing: content-box;, phương án nào dưới đây nêu đúng giá trị width và height của phần tử?

Đã bao gồm border và padding.
Chưa bao gồm border và padding.
Chỉ bao gồm border và padding khi phần tử có khai báo thuộc tính position: absolute;.
Chỉ bao gồm border và padding khi phần tử có khai báo thuộc tính position: relative;.
Đáp án đúng: B

Xem lời giải

Phương pháp giải

Lời giải chi tiết

Trong CSS, thuộc tính box-sizing quyết định cách tính toán kích thước của một phần tử. Khi sử dụng giá trị content-box, chỉ phần nội dung (content) của phần tử được tính vào widthheight. Điều này có nghĩa là kích thước của phần tử chưa bao gồm phần borderpadding.
Vì vậy, phương án đúng là:

B. Chưa bao gồm border và padding.

Hình minh họa cho box-sizing: content-box

Chú ý khi giải

  • Khi sử dụng box-sizing: content-box;, phần borderpadding không được tính vào kích thước widthheight của phần tử.
  • Box-sizing: border-box; sẽ tính cả borderpadding vào kích thước phần tử.
  • Đảm bảo hiểu rõ sự khác nhau giữa các giá trị của thuộc tính box-sizing để áp dụng vào thiết kế một cách chính xác.
  • Trong trường hợp cần bao gồm borderpadding cho widthheight, sử dụng box-sizing: border-box;.