Kích thước hộp CSS3: hộp lề; Tại sao không?

Tại sao chúng ta không có box-sizing: margin-box;? Thông thường khi chúng tôi đặt box-sizing: border-box;trong các tờ phong cách của chúng tôi, chúng tôi thực sự có nghĩa là trước đây.

Thí dụ:

Giả sử tôi có bố cục trang 2 cột. Cả hai cột có chiều rộng 50%, nhưng chúng trông có vẻ xấu xí vì không có máng xối (khoảng trống ở giữa); Dưới đây là CSS:

.col2 {
    width: 50%;
    float: left;
}

Để áp dụng máng xối, bạn có thể nghĩ rằng chúng ta chỉ cần đặt lề phải trên cột đầu tiên trong số 2 cột; đại loại như thế này:

.col2:first-child {
    margin-right: 24px;
}

Nhưng điều này sẽ làm cho cột thứ hai quấn lên một dòng mới, bởi vì điều sau đây là đúng:

50% + 50% + 24px > 100%

box-sizing: margin-box;sẽ giải quyết vấn đề này bằng cách bao gồm lề trong chiều rộng tính toán của phần tử. Tôi sẽ thấy điều này rất hữu ích nếu không hữu ích hơn box-sizing: border-box;.

Bạn không thể sử dụng width: calc(50% - 24px);cho cols của bạn? Sau đó thiết lập lề của bạn.

Tôi nghĩ rằng chúng ta có thể có một box-sizing: margin-box . Mô hình hộp css hiển thị chính xác, vị trí của các lề của khung là gì.

Có một số vấn đề nhỏ - ví dụ, các hộp lề có thể chồng lấp - nhưng chúng không khó giải quyết.

Tôi nghĩ, tình huống là như nhau, như chúng ta có thể thấy với các kết hợp overflow-x& overflow-y, với các div được định vị tuyệt đối trong các ô của bảng, với sự kết hợp của min | max-width | height với kích thước hộp, v.v.

Có những tính năng, những tính năng thực sự đơn giản, mà các nhà phát triển trình duyệt đơn giản là không phát triển.

IMHO, box-sizing: margin-boxlà một tính năng rất hữu ích. Một tính năng hữu ích khác là box-sizing: padding-box, nó tồn tại ít nhất trong tiêu chuẩn, nhưng nó không được triển khai trong bất kỳ trình duyệt chính nào. Ngay cả trong chrome mới nhất!

Lưu ý: Nhận xét của @Oriol: Firefox đã triển khai kích thước hộp: padding-box. Nhưng những người khác thì không, và nó đã bị xóa khỏi thông số kỹ thuật. Firefox sẽ xóa nó trong phiên bản 50. Buồn.

Anh chàng ở phía trên đang hỏi về việc thêm lề vào chiều rộng tổng thể, bao gồm cả phần đệm và đường viền. Vấn đề là, lề được áp dụng bên ngoài hộp và phần đệm và đường viền không, khi sử dụngborder-box .

Tôi đã cố gắng để đạt được border-marginý tưởng. Những gì tôi đã tìm thấy là nếu sử dụng lề, bạn có thể thêm một lớp .lastvào mục cuối cùng (với lề, sau đó áp dụng lề bằng 0 hoặc sử dụng :last-child/:last-of-type). Hoặc thêm các lề bằng nhau (tương tự như phiên bản đệm ở trên).

Xem ví dụ tại đây: http://codepen.io/mofeenster/pen/Anidc

border-boxtính chiều rộng của phần tử + phần đệm của nó + đường viền của nó là tổng chiều rộng. Vì vậy, nếu bạn có 2 divs rộng 50%, chúng sẽ liền kề nhau. Nếu bạn thêm phần 8pxđệm cho chúng, thì bạn sẽ có một máng xối 16px. Kết hợp điều đó với một yếu tố bao bọc - cũng có phần đệm8px - bạn sẽ có một lưới được bố trí độc đáo với máng xối bằng nhau trên khắp đường.

Xem ví dụ này tại đây: http://codepen.io/mofeenster/pen/vGgje

Thứ hai là phương pháp yêu thích của tôi.

Tôi chắc chắn tất cả những điều này là rõ ràng, nhưng dù sao tôi cũng sẽ loại nó ra bởi vì ... tốt, tôi cần tập thể dục. Kết quả sau đây sẽ không hiệu quả như box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingđược sử dụng để kiểm soát từ điểm đệm và đường viền được đánh giá theo kích thước tổng thể của phần tử. Vì vậy, mặc dù không bao gồm các pxlề có %chiều rộng (thường là như vậy), việc tính toán tỷ lệ phần trăm tương đối sẽ là bao nhiêu vì bạn không phải kết hợp phần đệm và viền với chiều rộng đã xác định.

Điều này là do thuộc tính kích thước hộp đề cập đến kích thước của một phần tử sau khi tính toán các giá trị cụ thể về kích thước cụ thể (phần đệm, đường viền). "Box-sizing: Border-box" đặt chiều cao / chiều rộng của một phần tử và xem xét phần đệm cũng như chiều rộng đường viền. Phạm vi lề của một phần tử lớn hơn chính phần tử đó, có nghĩa là nó điều chỉnh dòng chảy của trang và các phần tử xung quanh, do đó trực tiếp thay đổi cách phần tử khớp với cha mẹ của nó so với các phần tử anh chị em của nó. Cuối cùng, giá trị thuộc tính "hộp lề" sẽ gây ra vấn đề lớn và về cơ bản giống như đặt trực tiếp chiều cao / chiều rộng của các phần tử.

Trên Codrops, có một vài bài viết hay về chủ đề ảnh hưởng của lề và hàng bị buộc phải tràn. Họ đề nghị sử dụng đơn vị rem hoặc em với kích thước phông chữ css của trình chuẩn hóa thành 100% cho tất cả các trình duyệt, sau đó khi bạn đặt độ rộng và lề, bạn có thể dễ dàng theo dõi hiệu ứng trên chiều rộng của hàng bằng cách chỉ cần ghi chú trong các nhận xét cho tổng chiều rộng. Chuyển đổi 16px thành 1 em là cách để thu hẹp tổng số lượt xem được nhắm mục tiêu.

Làm việc như vậy đối với giai đoạn nhà phát triển ít nhất và sau đó nếu bạn muốn các mẫu 'phản hồi', bạn có thể chuyển đổi độ rộng thành% bao gồm cả độ rộng lề.

Một cách khác và thường đơn giản hơn mà họ đề xuất để xử lý máng xối là sử dụng giả sau và content: '';trên mỗi cột của bạn mà tôi thấy hoạt động rất tốt. Nếu bạn đặt một lớp div là cột cuối cùng được xác định, chẳng hạn như kết thúc, thì bạn có thể nhắm mục tiêu lớp đó không có giả sau hoặc để có một cột rộng hơn; mà phù hợp nhất với bố cục của bạn.

Phần thưởng thêm vào khi sử dụng phương pháp phần tử giả này là nó cũng cung cấp cho bạn mục tiêu cho các bóng có thể mang lại hiệu ứng 3d và độ sâu lớn hơn cho hình ảnh phẳng trên màn hình của trình đọc. Tôi đang thử nghiệm hiệu ứng này vào lúc này bằng cách nhân rộng các hiệu ứng đang được sử dụng trên các nút, 'điều chỉnh' độ dốc và chỉ số z.

Kích thước của các yếu tố cấp khối, không thay thế trong luồng bình thường phải đáp ứng

lề-trái + viền-trái-chiều rộng + đệm-trái + chiều rộng + đệm-phải + viền-phải-rộng + lề-phải = chiều rộng của khối chứa

Khi bị hạn chế quá mức, các trình duyệt phải điều chỉnh lề trái hoặc lề phải. Tôi nghĩ điều đó có nghĩa là chiều rộng của hộp lề phải bằng chiều rộng của khối chứa (tức là 100%).

Đối với trường hợp của bạn, đường viền trong suốt có box-sizing: border-boxthể hoạt động giống như lề .

Có lẽ đặt đường viền thành độ mờ 0% bằng RGBA và sử dụng đường viền làm lề.

Có tình huống thú vị khi sử dụng kích thước hộp bên trong nội dung cơ thể

không có nội dung, không có hộp viền nào cho bất kỳ giá trị nào trên lề trái phải% kể lại hai hộp này kể lại algoritms

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Các phiên bản Firefox trước 57 cũng hỗ trợ giá trị hộp đệm cho kích thước hộp, mặc dù giá trị này đã bị xóa khỏi đặc tả và các phiên bản mới hơn của trình duyệt.

Vì vậy, hộp lề thậm chí không được lên kế hoạch ...