Nhìn vào kích thước hộp CSS3
Cách đây không lâu, khi chúng ta tạo ra một cái hộp trong một trang web, hãy nói với div, chúng tôi chỉ định 100px cho cả chiều rộng và chiều cao, tiếp theo là đệm cho 10px và biên giới của khoảng 10px cũng.
div chiều rộng: 100px; chiều cao: 100px; phần đệm: 10px; viền: 10px solid #eaeaea;
Các trình duyệt sẽ mở rộng kích thước của hộp thành 140px, trong đó số tiền 140px này của tổng chiều rộng / chiều cao được tạo thành từ việc bổ sung đệm và biên giới như sau; 100px [chiều rộng / chiều cao] + (2 x 10px [đệm]) + (2 x 10px [viền]).
Tuy nhiên, đôi khi kết quả này không như chúng ta mong đợi. Đôi khi, chúng ta cần cái hộp luôn 100px bất kể phần đệm hay phần viền được thêm vào.
Để khắc phục sự cố thường xuyên như vậy khi tạo bố cục trang web, chúng tôi có thể sử dụng CSS3 kích thước hộp tài sản để kiểm soát như thế nào Mô hình hộp CSS nên làm việc trong trình duyệt.
Sử dụng kích thước hộp
Các kích thước hộp tài sản có hai tùy chọn giá trị, đầu tiên là hộp nội dung; là giá trị mặc định, khi sử dụng giá trị này, mô hình hộp sẽ hoạt động như chúng tôi đã mô tả ở trên.
Và cái thứ hai là hộp viền, kích thước của hộp sẽ được tính ở đâu bằng cách trừ kích thước của nội dung được chỉ định với phần đệm và đường viền được thêm vào.
div chiều rộng: 100px; chiều cao: 100px; phần đệm: 10px; viền: 10px solid #eaeaea; kích thước hộp: hộp viền; -moz-box-sizing: hộp viền; / * Firefox 1-3 * / -webkit-box-sizing: Border-box; / * Safari * /
Chẳng hạn, khi chúng ta có một hộp giống như những gì chúng ta đã mô tả ở trên (hình vuông 100px với 10 pixel cho phần đệm và viền), kích thước của nội dung sẽ giảm xuống 60px, và tổng kích thước của hộp vẫn còn 100px, trong đó phương trình của phép trừ có thể được mô tả như sau; 100px [chiều rộng / chiều cao] - ((2 x 10px [đệm]) + (2 x 10px [viền])).
- Bản giới thiệu
- Tải xuống nguồn
Hỗ trợ trình duyệt
Các kích thước hộp tài sản là được hỗ trợ trong tất cả các trình duyệt; Firefox 3.6+, Safari 3, Opera 8.5+ và Internet Explorer 8 trở lên.
Vì vậy, nếu bạn biết rằng hầu hết khách truy cập của bạn sẽ không sử dụng các phiên bản Internet Explorer dưới 8, bạn có thể sử dụng đề xuất hữu ích này (cảm ơn Paul Irish).
* box-sizing: hộp viền; -moz-box-sizing: hộp viền; / * Firefox 1-3 * / -webkit-box-sizing: Border-box; / * Safari * /
Đoạn mã trên sẽ áp dụng kích thước hộp thuộc tính cho tất cả các yếu tố trên trang web của bạn.
Thí dụ
Trong phần này, chúng tôi sẽ cho bạn thấy một ví dụ thực tế về cách chúng ta có thể sử dụng điều này kích thước hộp bất động sản. Chúng tôi sẽ tạo một điều hướng đơn giản, dựa trên đánh dấu HTML bên dưới, với năm menu liên kết trong đó.
Sau đó, chúng tôi sẽ thêm một số phong cách trang trí; chẳng hạn như, đặt điều hướng sửa chiều rộng cho 500px và chiều rộng của liên kết cho mỗi 100px, sau đó nội tuyến mục danh sách và đưa ra các hình nền khác nhau cho mỗi menu liên kết, để bạn có thể thấy sự khác biệt giữa chúng.
điều hướng chiều rộng: 500px; lề: 50px tự động 0; chiều cao: 50px; nav ul đệm: 0; lề: 0; nav li float: left; điều hướng một display: inline-block; chiều rộng: 100px; chiều cao: 100%; màu nền: #ccc; màu: # 555; trang trí văn bản: không có; họ phông chữ: Arial, sans-serif; cỡ chữ: 12pt; chiều cao dòng: 300%; văn bản-align: trung tâm; điều hướng một display: inline-block; chiều rộng: 100px; chiều cao: 100%; màu: # 555; trang trí văn bản: không có; họ phông chữ: Arial, sans-serif; nav li: nth-child (1) a màu nền: # E9E9E9; biên trái: 0; nav li: nth-child (2) a màu nền: # E4E4E4; nav li: nth-child (3) a màu nền: #DFDFDF; nav li: nth-child (4) a màu nền: # D9D9D9; nav li: nth-child (5) a màu nền: # D4D4D4; biên giới bên phải: 0;
Tại thời điểm này, điều hướng của chúng tôi trông bình thường.
Tuy nhiên, vấn đề sẽ xảy ra khi chúng ta thêm viền trái hoặc phải vào menu liên kết.
điều hướng đường viền trái: 1px solid #aaa; viền phải: 1px solid # f3f3f3;
Menu sẽ tràn xuống dưới cùng, vì chiều rộng của liên kết không còn 100px. Nó bây giờ là 102px, làm cho tổng chiều rộng của điều hướng là 10px lâu hơn thì chúng tôi đã chỉ định ở trên (500px).
Để khắc phục vấn đề này, chúng ta cần áp dụng kích thước hộp tài sản, như sau:
điều hướng đường viền trái: 1px solid #aaa; viền phải: 1px solid # f3f3f3; kích thước hộp: hộp viền; -moz-box-sizing: hộp viền; -webkit-box-sizing: hộp viền;
- Bản giới thiệu
- Tải xuống nguồn
Đọc thêm
Và cuối cùng, nếu bạn là người thích phiêu lưu và muốn tìm hiểu sâu hơn về chủ đề này, chúng tôi đã tổng hợp một vài tài liệu tham khảo được chọn cho bạn:
- Hiểu mô hình hộp CSS - Tech Republic
- Lỗi kích thước hộp trong Firefox - BugZilla
- FTW kích thước hộp - Paul Ailen
