Css lề 0 ý nghĩa tự động

Sử dụng margin:auto để căn giữa 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? . ô tô hoạt động. Ngoài ra, trong hỗn hợp là những gì auto có thể làm ở lề, nếu nó hoạt động để định tâm theo chiều dọc và một số vấn đề khác

Nhưng trước tiên, auto thực sự làm gì?

Định nghĩa của auto thay đổi theo các phần tử, loại phần tử và ngữ cảnh. Ở lề, auto 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 cái này sẽ xác định các bố cục khác nhau cho một phần tử

Đọc thêm. 6 thủ thuật CSS để căn chỉnh nội dung theo chiều dọc

"tự động" chiếm dung lượng có sẵn

Đây là cách sử dụng ký quỹ phổ biến nhất mà chúng ta thường gặp. Bằng cách gán auto cho 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ử như nhau – và do đó phần tử được căn giữa

Xem lề Bút. tự động bởi Preethi (@rpsthecoder) trên CodePen

Tuy nhiên, điều này sẽ chỉ hoạt động đối với các lề ngang (sẽ nói thêm về lý do sau), và nó cũng không hoạt động với các phần tử nổi và nội tuyến và bản thân nó cũng không thể hoạt động với các phần tử có vị trí tuyệt đối và cố định (tuy nhiên chúng ta sẽ xem cách thực hiện

Giả nổi bằng cách chiếm không gian có sẵn

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

Lề trái hoặc phải với auto sẽ chiếm toàn bộ khoảng trống "có sẵn" làm cho phần tử trông giống như nó đã bị xóa sang phải hoặc trái

Xem lề Bút. auto faux float bởi Preethi (@rpsthecoder) trên CodePen

“auto” Được tính thành 0px

Như đã đề cập trước đây, auto sẽ không hoạt động trong các phần tử float, inline và absolute. Tất cả các yếu tố này đã quyết định bố cục của chúng, vì vậy sẽ không có ích gì khi sử dụng auto cho các lề và mong đợi nó sẽ được căn giữa như thế

Điều đó sẽ đánh bại mục đích ban đầu của việc sử dụng thứ gì đó như auto2. Do đó, auto sẽ có giá trị 0px trong các phần tử đó

auto cũng sẽ không hoạt động trên 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 đều có chiều rộng

Chiều rộng của giá trị auto sẽ có lề auto6. Chiều rộng của phần tử khối thường bao phủ vùng chứa của nó khi nó là auto hoặc auto8 và do đó, lề auto sẽ được tính thành auto6 trong trường hợp như vậy

Điều gì xảy ra với lề dọc với giá trị auto?

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

“Nếu “margin-top” hoặc “margin-bottom” là “auto”, giá trị được sử dụng của chúng là 0″

Tại sao, đó là cho đến nay, một bí ẩn. Có thể là do luồng trang dọc điển hình, trong đó kích thước trang tăng theo chiều cao. Vì vậy, căn giữa một phần tử theo chiều dọc trong vùng chứa của nó sẽ không làm cho nó xuất hiện ở giữa, so 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ẽ chính vì lý do này, họ đã quyết định thêm một ngoại lệ cho các phần tử tuyệt đối có thể được căn giữa theo chiều dọc dọc theo toàn bộ chiều cao của trang

Cũng có thể là do hiệu ứng thu gọn lề (sự sụp đổ của các phần tử liền kề” lề), đây là một ngoại lệ khác đối với các lề dọc

Tuy nhiên, trường hợp thứ hai dường như không xảy ra – vì các phần tử không thu gọn lề của chúng – như Floats và các phần tử có auto3 khác với auto4, vẫn chỉ định lề dọc 0px cho auto

Định tâm các yếu tố được định vị tuyệt đối

Vì có một ngoại lệ đối với các phần tử được định vị tuyệt đối, nên chúng tôi sẽ sử dụng giá trị auto để căn giữa một phần tử theo chiều dọc và chiều ngang. Nhưng trước đó, chúng ta cần tìm hiểu xem khi nào thì margin:auto sẽ thực sự hoạt động như chúng ta muốn trong một phần tử được định vị tuyệt đối

Đây là nơi khác đến

"Nếu cả ba "trái", "chiều rộng" và "phải" là "tự động". Trước tiên, đặt bất kỳ giá trị “tự động” nào cho “lề trái” và “lề phải” thành 0… "

"Nếu không có cái nào trong số ba là "tự động". Nếu cả “lề-trái” và “lề-phải” đều là “tự động”, hãy giải phương trình với ràng buộc bổ sung là hai lề có giá trị bằng nhau"

Điều đó nói lên khá nhiều rằng đối với các lề ngang của auto để chiếm các khoảng bằng nhau, các giá trị cho auto9, auto0 và auto1 không nên là auto , 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 chúng một số giá trị trong một phần tử được định vị tuyệt đối. auto9 và auto1 phải có các giá trị bằng nhau để định tâm hoàn hảo

Thông số kỹ thuật tương tự cho lề dọc

“Nếu cả ba “top”, “height” và “bottom” đều tự động, hãy đặt “top” thành vị trí tĩnh…”

“Nếu không có cái nào trong số ba là “tự động”. Nếu cả “margin-top” và “margin-bottom” đều là “auto”, hãy giải phương trình với ràng buộc bổ sung là hai lề có giá trị bằng nhau…”

Do đó, để một phần tử tuyệt đối được căn giữa theo chiều dọc, các giá trị auto5, auto6 và auto7 của nó không nên là auto

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ề Bút. 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 quanh nó (như điều xảy ra với float), hãy nhớ rằng có tùy chọn sử dụng auto cho lề

Chuyển đổi một phần 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 hay. Có các tùy chọn khác như flexbox và CSS transform phù hợp hơn với những

Khi nào bạn có thể sử dụng lề 0 tự động?

Lề 0 0 0 0 nghĩa là gì?

Từ khóa auto có nghĩa là gì trong code margin 0 auto?

Lề cơ thể 0 có nghĩa là gì?