tìm hiểu cách thức hoạt động của vùng chứa trong css

Question

Tôi là một lập trình viên đang cố gắng thực hiện một số bản vá trong thiết kế web và thường tìm thấy css rất hợp lý. Cho đến nay, chỉ có 'mô hình đấm bốc' vẫn còn là một vùng đất huyền diệu đầy những minotaur và harpies cho tôi. Tôi sẽ minh họa cho nó với các ví dụ:

• http://jsfiddle.net/qyMxv/
  Yếu tố bên trong của div với lớp đệm quy định đi ra ngoài không gian div. Không phải là div phải kèm theo mọi thứ bên trong nó sao? Điểm khác là làm gì?

• http://jsfiddle.net/wk9Kg/
  div mẹ hoàn toàn biến mất, trong khi trẻ em được hiển thị bình thường. Kỳ lạ hơn nữa là hành vi này được kích hoạt bởi float:left;.

Có sách hướng dẫn/tham khảo nào có thể giúp tôi xem logic trong những điều kỳ quặc này không? Tôi tin tưởng w3schools một thời gian nhưng họ đang rất khủng khiếp về chủ đề này. Tìm nội dung hay trên web cũng trở nên khó khăn. Ngay bây giờ tôi chỉ cần fiddle với display, position và float thuộc tính cho đến khi nó hoạt động.

Cảm ơn!

Answer 1

Phần tử nổi được lấy ra khỏi luồng thông thường và do đó không được tính là chiếm bất kỳ chiều cao nào.
Để khắc phục điều đó, bạn có thể thêm phần tử trống sau phao với clear:both. Các yếu tố thanh toán bù trừ là một yếu tố thường xuyên đó là trong dòng chảy, và các tài sản clear lực lượng nó bên dưới các yếu tố nổi.
Do đó, hộp chứa sẽ mở rộng để chứa phần tử thanh toán bù trừ, và ngẫu nhiên cũng chứa phao.

Để biết thêm thông tin, vui lòng xem spec:

Từ một phao không nằm trong dòng chảy, hộp khối không ở vị trí tạo trước và sau khi hộp phao chảy theo chiều dọc như thể float không tồn tại.

Answer 2

1. chung div có nghĩa vụ phải gửi kèm theo/chứa bất kỳ không nổi phần tử tương đối hoặc staticly vị trí, bên trong nhưng bạn có thể nhận được ngay với padding trên các yếu tố nội tuyến như bạn có nó, hoặc với lợi nhuận tiêu cực/giá trị âm với vị trí tương đối. Điều này cho phép bố trí linh hoạt hơn tôi cho là.

2. Nổi không được cho là được chứa khi chúng không còn lưu lượng, trừ khi bạn có phần bù trừ sau đó, hoặc tràn đặt cho bất kỳ mục nào khác ngoài hiển thị. Trong IE7/IE6, bạn chỉ cần kích hoạt hasLayout có thể được thực hiện thông qua vô số các thuộc tính/giá trị combo (điều này đi ngược lại với spec). Xem http://work.arounds.org/clearing-floats/ để biết cách làm nổi bật (các) phao bên trong.

Dưới đây là một danh sách các trang web cho các lỗi qua trình duyệt mà tôi biên soạn từ một câu hỏi khác:

• http://www.brunildo.org/test/

• http://www.gtalbot.org/BrowserBugsSection/

• http://www.quirksmode.org/

• http://www.quirksmode.org/bugreports/

• http://www.positioniseverything.net/

• http://reference.sitepoint.com/css

• http://www.richinstyle.com/bugs/

• http://haslayout.net/

• http://css-discuss.incutio.com/wiki/Main_Page

• http://channel9.msdn.com/wiki/wiki/InternetExplorerSupportForCSS/

• http://samples.msdn.microsoft.com/ietestcenter/

• http://channel9.msdn.com/wiki/wiki/InternetExplorerBugs/

• http://css-class.com/test/bugs/ie/ie-bugs.htm

• http://perfectionkills.com/category/cft/

• http://api.jquery.com/jQuery.support/

• http://www.css-lab.com/

• http://www.iecss.com/ (roundup phong cách IE mặc định Jonathan Neal)

• http://work.arounds.org/ (Đây là siêu trang web lưu trữ thực tế tôi đang làm việc trên)

Answer 3

• Eric Số điện thoại CSS: The Definitive Guide của Meyer là một tham chiếu tốt. Đó là cũ, nhưng mô hình hộp đã không thay đổi.
• quirksmode có giải thích tốt về hành vi dành riêng cho trình duyệt.
• ví dụ # 2, bạn có thể thêm <div style="clear: both;"></div> sau khi khối thứ hai màu đen hoặc và chiều cao và chiều rộng để chứa <div>

Answer 4

Về câu hỏi đầu tiên của bạn, đây là phương pháp ưa thích của tôi cho thanh toán bù trừ nổi trong một container mà không có sản phẩm nào các yếu tố: http://www.quirksmode.org/css/clearing.html

Answer 5

Tôi thấy các bài viết của Chris Coyier được viết tốt và dễ hiểu.Ông có một phần về khái niệm cốt lõi, bao gồm các chủ đề như Floats và Box Model

Hope this helps, JD