Làm gì autotrong margin:0 auto;?
Tôi dường như không thể hiểu những gì autolàm. Tôi biết nó đôi khi có tác dụng căn giữa các đối tượng. Cảm ơn.
Làm gì autotrong margin:0 auto;?
Tôi dường như không thể hiểu những gì autolàm. Tôi biết nó đôi khi có tác dụng căn giữa các đối tượng. Cảm ơn.
Câu trả lời:
Khi bạn đã chỉ định một widthđối tượng mà bạn đã áp dụng margin: 0 auto, đối tượng sẽ nằm ở trung tâm trong vùng chứa mẹ của nó.
Việc chỉ định autolàm tham số thứ hai về cơ bản cho trình duyệt tự động xác định lề trái và lề phải bằng cách đặt chúng bằng nhau. Nó đảm bảo rằng lề trái và lề phải sẽ được đặt ở cùng một kích thước. Tham số đầu tiên 0 chỉ ra rằng lợi nhuận trên cùng và dưới cùng sẽ được đặt thành 0.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;Do đó, để cung cấp cho bạn một ví dụ , nếu nguồn gốc là 100px và vùng con là 50px, thì thuộc autotính sẽ xác định rằng có 50px không gian trống để chia sẻ giữa margin-leftvà margin-right:
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;Cái nào sẽ cho:
margin-left:25;
margin-right:25;Hãy xem jsFiddle này . Bạn không phải chỉ định chiều rộng cha, chỉ có chiều rộng của đối tượng con.
%? Ý tôi là có bất kỳ tài sản khác trong css mà có thể cho kết quả tương tự như trái và phảiauto
margin:auto 0điều kiện?
Từ đặc tả CSS về Tính toán chiều rộng và lề cho các phần tử cấp khối, không được thay thế trong luồng thông thường :
Nếu cả 'margin-left' và 'margin-right' đều là 'auto', các giá trị được sử dụng của chúng bằng nhau. Điều này làm căn giữa phần tử theo chiều ngang đối với các cạnh của khối chứa.
margin:0 auto;0là trên-dưới và autotrái-phải. Có nghĩa là lề trái và lề phải sẽ tự động lấy lề theo chiều rộng của phần tử và chiều rộng của vùng chứa.
Nói chung, nếu bạn muốn đặt bất kỳ phần tử nào ở vị trí trung tâm thì nó margin:autohoạt động hoàn hảo. Nhưng nó chỉ hoạt động trong các phần tử khối.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;0 dành cho trên-dưới và tự động cho trái-phải. Trình duyệt đặt lề.
Nó trở nên rõ ràng hơn với một số giải thích về cách hoạt động của hai giá trị.
Thuộc tính ký quỹ là viết tắt của:
margin-top
margin-right
margin-bottom
margin-leftVậy làm thế nào chỉ có hai giá trị?
Vâng, bạn có thể biểu thị lợi nhuận với bốn giá trị như sau:
margin: 10px, 20px, 15px, 5px;có nghĩa là 10px trên cùng, 20px bên phải, 15px dưới cùng, 5px bên trái
Tương tự như vậy, bạn cũng có thể biểu thị bằng hai giá trị như sau:
margin: 20px 10px;Điều này sẽ cung cấp cho bạn một lề 20px trên và dưới và 10px trái và phải.
Và nếu bạn đặt:
margin: 20px auto;Sau đó, điều đó có nghĩa là lề trên và dưới 20px và lề trái và phải của tự động. Và tự động có nghĩa là lề trái / phải được đặt tự động dựa trên vùng chứa. Nếu phần tử của bạn là phần tử kiểu khối, nghĩa là nó là một hộp và chiếm toàn bộ chiều rộng của chế độ xem, thì tự động đặt lề trái và lề phải giống nhau và do đó phần tử được căn giữa.
bodyvà chúng tôi luôn cung cấp chowidthvàmargin:0 autođể#wrapper