Tại sao Bootstrap 3 lại chuyển sang box-sizing: border-box?

Tôi đang di chuyển các chủ đề Bootstrap của mình từ v2.3.2 sang v3.0.0 và một điều tôi nhận thấy là rất nhiều kích thước được tính khác nhau, do các kiểu sau trong bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Bất cứ ai có thể giải thích tại sao Bootstrap chuyển kích thước hộp của tất cả các phần tử thành hộp viền? Tôi nghi ngờ nó có liên quan đến hệ thống lưới mới dựa trên phần trăm, nhưng bộ chọn ở trên rõ ràng không chỉ áp dụng cho các phần tử lưới.

Có vẻ hơi cực đoan :-)

Bất cứ ai quan tâm để cung cấp cho một số cái nhìn sâu sắc?

— Alexander Rechsteiner
nguồn

Cảm ơn vì đoạn mã CSS; đó chính xác là những gì tôi đang tìm kiếm để áp dụng điều này cho một dự án phi bootstrap. :)

— berto

Có ai biết tại sao cần sử dụng *: before và *: after không?

— limscoder

@limscoder Các *:beforevà *:afterlà cần thiết để cũng áp dụng mô hình hộp này đến :beforevà :aftergiả yếu tố.

— buschtoens

* Selector khiến các nhà phát triển khó sử dụng content-box hoặc padding-box ở những nơi khác trong CSS. Cách tốt nhất khi bắt đầu một dự án mới từ đầu là html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

Ghi chú phát hành cho bạn biết: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Mô hình hộp tốt hơn theo mặc định. Mọi thứ trong Bootstrap đều có box-sizing: border-box, giúp các tùy chọn định kích thước dễ dàng hơn và hệ thống lưới nâng cao.

Cá nhân tôi nghĩ rằng hầu hết các lợi ích thuộc về hệ thống lưới điện. Trong Bootstrap của Twitter, tất cả các lưới đều linh hoạt. Các cột được xác định là phần trăm của tổng chiều rộng. Nhưng máng xối có chiều rộng cố định tính bằng pixel. Theo mặc định, một khoảng đệm 15px ở cả hai bên của cột. Sự kết hợp của chiều rộng tính bằng pixel và tỷ lệ phần trăm có thể phức tạp. Với border-boxviệc tính toán này rất dễ dàng vì border-boxgiá trị (trái với giá trị mặc định của hộp nội dung) làm cho hộp được hiển thị cuối cùng có chiều rộng được khai báo và bất kỳ đường viền và phần đệm nào bị cắt bên trong hộp. ( http://css-tricks.com/box-sizing/ )

Cũng đọc: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

— Bass Jobsen
nguồn

Ví dụ đơn giản: Hãy thử đặt đường viền 1 pixel trên div 100% chiều rộng, với content-box. Bây giờ bạn đã có thứ gì đó 100% + 2 pixel. Với border-box, bạn không có vấn đề đó, nó vẫn 100%.

— tường trống

Tốt bổ sung thảo luận và biện minh về nó trong vấn đề này .

— yuvilio

Cũng cần lưu ý rằng phương pháp hay nhất về triển khai kích thước hộp đã được cập nhật để không can thiệp vào các thư viện của bên thứ ba. Tôi không chắc chắn nếu kế hoạch Bootstrap về cập nhật, nhưng họ nên: css-tricks.com/...

— jbyrd

Cá nhân tôi không bao giờ thay đổi mô hình hộp kể từ IE6. Đó là điều DUY NHẤT IE biết rõ hơn. Và vâng, hôm nay bạn có calc () để giải quyết các vấn đề 100% cộng với 2 pixel đó, nhưng cách của samurai LUÔN LUÔN là hộp có viền bao gồm cả đường viền và phần đệm. Đó là cách bộ não con người tưởng tượng ra một chiếc hộp. Tôi thích nhìn thấy "xu hướng mới" này, tôi có một thức uống chào mừng trở lại cho họ.

— dkellner