CSS - marginauto; - Làm thế nào nó hoạt động

Sử dụng lề: tự động để tập trung một phần tử khối theo chiều ngang là một kỹ thuật nổi tiếng. Nhưng bạn đã bao giờ tự hỏi tại sao hoặc làm thế nào nó hoạt động? Để trả lời điều này, trước tiên chúng ta cần xem xét cách thức lề: auto hoạt động. Ngoài ra trong hỗn hợp là những gì Tự động có thể có thể làm trong lề, nếu nó hoạt động cho định tâm dọc và một số vấn đề khác.

Nhưng trước tiên, làm gì Tự động thực sự làm?

Định nghĩa của Tự động thay đổi theo yếu tố, các loại phần tử và bối cảnh. Trong lề, Tự động có thể có nghĩa là một trong hai điều: chiếm không gian có sẵn hoặc 0 px. Hai sẽ xác định bố cục khác nhau cho một yếu tố.

"tự động" Chiếm không gian có sẵn

Đây là cách sử dụng ký quỹ phổ biến nhất Tự động chúng tôi đi qua thường xuyên Bằng cách phân công Tự động ở lề trái và phải của một phần tử, chúng chiếm không gian ngang có sẵn trong vùng chứa của phần tử - và do đó phần tử được căn giữa.

Xem lề Pen: auto by Preethi (@rpsthecoder) trên CodePen.

Tuy nhiên, điều này sẽ chỉ hoạt động cho lề ngang (nhiều hơn về tại sao sau này), và nó cũng sẽ không làm việc với nổi và yếu tố nội tuyến và chính nó, nó cũng không thể làm việc trong tuyệt đối và yếu tố định vị cố định (tuy nhiên chúng tôi sẽ xem cách làm cho những công việc đó).

Faux Float bằng cách chiếm không gian có sẵn

Kể từ khi Tự động ở cả lề phải và lề trái chiếm không gian "có sẵn" như nhau, bạn nghĩ điều gì sẽ xảy ra khi giá trị Tự động chỉ được trao cho một trong số đó?

Lề trái hoặc phải với Tự động sẽ chiếm tất cả không gian "có sẵn" làm cho phần tử trông giống như được xóa sang phải hoặc trái.

Xem lề Pen: auto fake float của Preethi (@rpsthecoder) trên CodePen.

“Tự động” Được tính thành 0px

Như đã đề cập trước đó, Tự động sẽ không hoạt động trong các yếu tố nổi, nội tuyến và tuyệt đối. Tất cả những yếu tố này đã có quyết định bố trí của họ, vì vậy không có sử dụng trong việc sử dụng Tự động cho các lề và hy vọng nó sẽ được tập trung như thế.

Điều đó sẽ đánh bại mục đích ban đầu của việc sử dụng một cái gì đó như phao. Vì thế Tự động sẽ có giá trị 0px trong các phần tử đó.

Tự động cũng sẽ không hoạt động trên một phần tử khối điển hình nếu nó không có chiều rộng. Tất cả các ví dụ tôi chỉ cho bạn cho đến nay có chiều rộng.

Chiều rộng của giá trị Tự động sẽ có 0px lề. Chiều rộng của phần tử khối thường bao phủ phần chứa của nó khi nó Tự động hoặc là 100% và do đó một lề Tự động sẽ được tính đến 0px trong trường hợp như vậy.

Điều gì xảy ra với lợi nhuận dọc với giá trị `Tự động`?

Tự động ở cả lề trên và dưới luôn được tính thành 0px (ngoại trừ các phần tử tuyệt đối). Thông số W3C nói rằng nó như thế này:

“Nếu “đầu lề” hoặc là “lề dưới” Là “Tự động”, giá trị sử dụng của chúng là 0 "

Tại sao, đó là cho đến nay, một bí ẩn. Nó có thể là do dòng trang dọc điển hình, trong đó kích thước trang tăng chiều cao. Vì vậy, việc căn giữa một phần tử theo chiều dọc trong bộ chứa của nó sẽ không làm cho nó xuất hiện ở giữa, tương ứng với chính trang đó, không giống như khi nó được thực hiện theo chiều ngang (trong hầu hết các trường hợp).

Và có lẽ vì lý do tương tự, họ đã quyết định thêm một ngoại lệ cho các yếu tố tuyệt đối có thể được căn giữa theo chiều dọc của toàn bộ chiều cao của trang.

Nó cũng có thể là do hiệu ứng sụp đổ lề (sự sụp đổ của các yếu tố liền kề” lề) là một ngoại lệ khác cho lề dọc.

Tuy nhiên, trường hợp sau dường như là một trường hợp không thể xảy ra - vì các yếu tố không thu hẹp lợi nhuận của chúng - như Floats và các yếu tố với tràn ra khác hơn có thể nhìn thấy, vẫn chỉ định lề dọc 0px cho Tự động.

Định tâm các yếu tố hoàn toàn định vị

Vì có một ngoại lệ đối với các yếu tố được định vị tuyệt đối, chúng tôi”sẽ sử dụng Tự động giá trị trung tâm một theo chiều dọc và chiều ngang. Nhưng trước đó, chúng ta cần tìm hiểu khi nào lề: tự động thực sự hoạt động như chúng ta muốn nó trong một yếu tố được định vị tuyệt đối.

Đây là nơi mà một thông số W3C khác xuất hiện:

"Nếu cả ba “trái”, “chiều rộng”, và “đúng” là “Tự động”: Đầu tiên đặt bất kỳ “Tự động” giá trị cho “lề trái” và “lề phải” đến 0 "

"Nếu không ai trong ba người là “Tự động”: Nếu cả hai “lề trái” và “lề phải” là “Tự động”, giải phương trình dưới ràng buộc thêm rằng hai lề có giá trị bằng nhau "

Điều đó khá nhiều nói rằng ngang Tự động lề để chiếm không gian bằng nhau, giá trị cho trái, chiều rộng và đúng không nên Tự động , giá trị mặc định của chúng. Vì vậy, tất cả những gì chúng ta phải làm là cung cấp cho họ một số giá trị trong một yếu tố được định vị tuyệt đối. trái và đúng nên có giá trị bằng nhau để định tâm hoàn hảo.

Thông số kỹ thuật cũng đề cập đến một cái gì đó tương tự cho lề dọc.

“Nếu cả ba “hàng đầu”, “Chiều cao”, và “dưới cùng” là tự động, thiết lập “hàng đầu” đến vị trí tĩnh ”

“Nếu không ai trong ba “Tự động”: Nếu cả hai “đầu lề” và “lề dưới” là “Tự động”, giải phương trình dưới ràng buộc thêm rằng hai lề có giá trị bằng nhau ”

Do đó, đối với một yếu tố tuyệt đối là tập trung theo chiều dọc, nó là hàng đầu, Chiều cao, và dưới cùng giá trị không nên Tự động.

Bây giờ bằng cách kết hợp tất cả những thứ này, đây là những gì chúng ta”Sẽ nhận được:

Xem lề Pen: tự động tuyệt đối bởi Preethi (@rpsthecoder) trên CodePen.

Phần kết luận

Nếu bạn muốn xóa một phần tử trên trang của mình sang phải hoặc trái mà không có các phần tử sau bao bọc nó (như những gì xảy ra với float), hãy nhớ có tùy chọn để sử dụng Tự động cho lề.

Chuyển đổi một yếu tố thành tuyệt đối chỉ để nó có thể được căn giữa theo chiều dọc có thể không phải là một ý tưởng tuyệt vời. Có các tùy chọn khác như flexbox và CSS biến đổi phù hợp hơn cho các tùy chọn đó.