Trước đây giả định của tôi về width: auto là chiều rộng được đặt thành chiều rộng của nội dung. Bây giờ tôi thấy rằng nó chiếm toàn bộ chiều rộng của cha mẹ.
Bất cứ ai có thể vui lòng mô tả sự khác biệt giữa chúng?
Câu trả lời:
Chiều rộng tự động
Chiều rộng ban đầu của phần tử cấp khối như div hoặc p là tự động. Điều này làm cho nó mở rộng để chiếm tất cả không gian ngang có sẵn trong khối chứa nó. Nếu nó có bất kỳ phần đệm hoặc đường viền ngang nào, chiều rộng của những phần đó không cộng vào tổng chiều rộng của phần tử.
Chiều rộng 100%
Mặt khác, nếu bạn chỉ định chiều rộng: 100%, tổng chiều rộng của phần tử sẽ là 100% khối chứa nó cộng với bất kỳ lề ngang, phần đệm và đường viền nào (trừ khi bạn đã sử dụng box-sizing: border-box, trong trường hợp đó chỉ các lề được thêm vào 100% để thay đổi cách tính tổng chiều rộng của nó). Đây có thể là điều bạn muốn, nhưng rất có thể không phải vậy.
Để hình dung sự khác biệt, hãy xem hình này:
width: autocư xử như vậy: stackoverflow.com/questions/28353625/...
autokhông giống nhưfill-available
width: auto; sẽ cố gắng hết sức có thể để giữ một phần tử có cùng chiều rộng với vùng chứa mẹ của nó khi có thêm không gian từ lề, phần đệm hoặc đường viền.
width: 100%;sẽ làm cho phần tử rộng bằng vùng chứa mẹ. Khoảng cách bổ sung sẽ được thêm vào kích thước của phần tử mà không liên quan đến phần tử gốc. Điều này thường gây ra vấn đề.
Đó là về lề và biên giới. Nếu bạn sử dụng width: auto, sau đó thêm đường viền, div của bạn sẽ không trở nên lớn hơn vùng chứa của nó. Mặt khác, nếu bạn sử dụng width: 100%và một số đường viền, chiều rộng của phần tử sẽ là 100% + đường viền hoặc lề. Để biết thêm thông tin, hãy xem điều này .
Miễn là giá trị của chiều rộng là tự động, phần tử có thể có lề ngang, phần đệm và đường viền mà không trở nên rộng hơn vùng chứa của nó (tất nhiên là trừ khi tổng của margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right lớn hơn vùng chứa). Chiều rộng của hộp nội dung của nó sẽ là bất kỳ thứ gì còn lại khi lề, phần đệm và đường viền đã bị trừ đi khỏi chiều rộng của vùng chứa.
Mặt khác, nếu bạn chỉ định chiều rộng: 100%, tổng chiều rộng của phần tử sẽ là 100% khối chứa nó cộng với bất kỳ lề ngang, phần đệm và đường viền nào (trừ khi bạn đã sử dụng box-sizing: border-box, trong trường hợp đó chỉ các lề được thêm vào 100% để thay đổi cách tính tổng chiều rộng của nó). Đây có thể là điều bạn muốn, nhưng rất có thể không phải vậy.
Nguồn:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Chiều rộng ban đầu của phần tử cấp khối như div hoặc p là tự động.
Sử dụng width: auto để hoàn tác các chiều rộng được chỉ định rõ ràng.
nếu bạn chỉ định chiều rộng: 100%, tổng chiều rộng của phần tử sẽ bằng 100% khối chứa nó cộng với bất kỳ lề ngang, phần đệm và đường viền nào.
Vì vậy, lần tới khi bạn thấy mình đặt chiều rộng của phần tử mức khối thành 100% để làm cho nó chiếm hết chiều rộng có sẵn, hãy cân nhắc xem điều bạn thực sự muốn có đang đặt nó thành tự động hay không.
Chiều rộng 100%: Nó sẽ tạo ra nội dung với 100%. margin, border, padding sẽ được thêm vào chiều rộng này và phần tử sẽ tràn nếu bất kỳ phần tử nào được thêm vào.
Tự động chiều rộng: Nó sẽ phù hợp với phần tử trong không gian có sẵn bao gồm lề, đường viền và phần đệm. không gian còn lại sau khi điều chỉnh lề + đệm + đường viền sẽ có chiều rộng / chiều cao khả dụng.
Width 100% + box-sizing: border box: Nó cũng sẽ phù hợp với phần tử trong không gian có sẵn bao gồm đường viền, phần đệm (lề sẽ làm cho nó tràn vùng chứa).
Sử dụng width: auto; + display: inline-block; trong css cho hiệu ứng tuyệt vời.
width : auto;
display: inline-block;Khi chúng tôi nói
width:auto;chiều rộng sẽ không bao giờ vượt quá tổng chiều rộng của phần tử mẹ. Chiều rộng tối đa là chiều rộng mẹ. Ngay cả khi chúng ta thêm đường viền, phần đệm và lề, bản thân nội dung của phần tử sẽ trở nên nhỏ hơn để tạo khoảng trống cho đường viền, phần đệm và lề. Trong trường hợp nếu không gian cần thiết cho đường viền + đệm + lề lớn hơn tổng chiều rộng của phần tử mẹ thì chiều rộng của nội dung sẽ trở thành 0.
Khi chúng tôi nói
width:100%;chiều rộng của nội dung của phần tử sẽ trở thành 100% của phần tử mẹ và từ bây giờ nếu chúng ta thêm đường viền, phần đệm hoặc lề thì nó sẽ khiến phần tử con vượt quá chiều rộng của phần tử mẹ và nó sẽ bắt đầu tràn ra khỏi phần tử mẹ.