phao: trái; vs hiển thị: nội tuyến; vs hiển thị: khối nội tuyến; vs hiển thị: ô bảng;

Những câu hỏi của tôi)

1. Có bất kỳ phương pháp nào được ưa thích bởi một nhà thiết kế web chuyên nghiệp?

2. Có bất kỳ phương pháp nào trong số các phương pháp này được trình duyệt web đặt trước khi vẽ trang web không?

3. Đây có phải tất cả chỉ là sở thích cá nhân?

4. Có những kỹ thuật khác tôi đang thiếu?

Lưu ý: Các câu hỏi trên liên quan đến việc thiết kế bố cục nhiều cột

phao: trái;

http://jsfiddle.net/CDe6a/

Đây là phương pháp tôi luôn sử dụng khi tạo bố cục cột và có vẻ như nó chỉ hoạt động tốt. Cha mẹ tự sụp đổ, vì vậy bạn chỉ cần nhớ clear:both;sau đó. Một lừa đảo khác mà tôi vừa tìm thấy là không có khả năng căn chỉnh văn bản theo chiều dọc.

Hiển thị nội dòng;

Điều này dường như để khắc phục vấn đề của cha mẹ sụp đổ, nhưng thêm khoảng trắng.

http://jsfiddle.net/CDe6a/1/

Xóa khoảng trắng khỏi html dường như là cách khắc phục vấn đề dễ dàng nhất, nhưng không mong muốn nếu bạn thực sự kén chọn html của mình.

http://jsfiddle.net/CDe6a/2/

hiển thị: khối nội tuyến;

Có vẻ như cư xử chính xác như thế display:inline;.

http://jsfiddle.net/CDe6a/3/

hiển thị: ô bảng;

http://jsfiddle.net/CDe6a/4/

Hoạt động hoàn hảo.

Suy nghĩ của tôi:

Tôi chắc chắn rằng tôi đang thiếu rất nhiều thứ, giống như một số ngoại lệ nhất định sẽ phá vỡ bố cục nhưng, display:table-cell;dường như hoạt động tốt nhất, và tôi nghĩ rằng tôi sẽ bắt đầu thay thế float:left;vì dường như tôi luôn rối tung lên clear:both;. Tôi đã đọc nhiều bài viết và blog về điều này trên web, nhưng không ai trong số họ cho tôi một câu trả lời chắc chắn về những gì tôi nên sử dụng khi đặt trang web của mình.

Trong số các tùy chọn bạn đã hỏi về:

• float:left;
  Tôi không thích phao vì cần phải có thêm đánh dấu để xóa phao. Theo như tôi biết, toàn bộ floatkhái niệm này được thiết kế kém trong các thông số kỹ thuật CSS. Không có gì chúng ta có thể làm về điều đó bây giờ mặc dù. Nhưng điều quan trọng là nó hoạt động và nó hoạt động trong tất cả các trình duyệt (thậm chí IE6 / 7), vì vậy hãy sử dụng nó nếu bạn thích nó.

Đánh dấu bổ sung để xóa có thể không cần thiết nếu bạn sử dụng :afterbộ chọn để xóa phao, nhưng đây không phải là một tùy chọn nếu bạn muốn hỗ trợ IE6 hoặc IE7.

• display:inline;
  Điều này không nên được sử dụng để bố trí, ngoại trừ IE6 / 7, trong đó display:inline; zoom:1có một bản hack dự phòng cho hỗ trợ bị hỏng cho inline-block.

• display:inline-block;
  Đây là lựa chọn yêu thích của tôi. Nó hoạt động tốt và nhất quán trên tất cả các trình duyệt, với một cảnh báo cho IE6 / 7, hỗ trợ nó cho một số yếu tố. Nhưng xem ở trên cho các giải pháp hacky để làm việc xung quanh này.

Một cảnh báo lớn khác inline-blocklà do khía cạnh nội tuyến, khoảng trắng giữa các thành phần được xử lý giống như khoảng trắng giữa các từ của văn bản, do đó bạn có thể có các khoảng trống xuất hiện giữa các yếu tố. Có những cách giải quyết vấn đề này, nhưng không ai trong số chúng là lý tưởng. (tốt nhất chỉ đơn giản là không có bất kỳ khoảng cách nào giữa các yếu tố)

• display:table-cell;
  Một số khác mà bạn sẽ gặp vấn đề với khả năng tương thích trình duyệt. IE cũ hơn sẽ không hoạt động với điều này cả. Nhưng ngay cả đối với các trình duyệt khác, đáng chú ý là nó table-cellđược thiết kế để được sử dụng trong bối cảnh nằm bên trong các yếu tố được tạo kiểu như tablevà table-row; sử dụng table-celltrong sự cô lập không phải là cách dự định để làm điều đó, vì vậy bạn có thể trải nghiệm các trình duyệt khác nhau đối xử với nó khác nhau.

Các kỹ thuật khác bạn có thể đã bỏ lỡ? Đúng.

• Vì bạn nói đây là bố cục nhiều cột, nên có một tính năng Cột CSS mà bạn có thể muốn biết. Tuy nhiên, đây không phải là tính năng được hỗ trợ tốt nhất (không được IE hỗ trợ ngay cả trong IE9 và tiền tố nhà cung cấp được yêu cầu bởi tất cả các trình duyệt khác), vì vậy bạn có thể không muốn sử dụng nó. Nhưng đó là một lựa chọn khác, và bạn đã hỏi.

• Ngoài ra còn có tính năng CSS FlexBox, nhằm mục đích cho phép bạn chuyển văn bản từ hộp này sang hộp khác. Đây là một tính năng thú vị sẽ cho phép một số bố cục phức tạp, nhưng điều này vẫn còn rất nhiều trong quá trình phát triển - xem http://html5please.com/#flexbox

Mong rằng sẽ giúp.

Tôi thường sử dụng float: left;và thêm overflow: auto;để giải quyết vấn đề cha mẹ sụp đổ (như lý do tại sao điều này hoạt động, overflow: autosẽ mở rộng cha mẹ thay vì thêm thanh cuộn nếu bạn không cho nó chiều cao rõ ràng, cũng overflow: hiddenhoạt động tốt). Hầu hết các nhu cầu căn chỉnh dọc mà tôi có là dành cho một dòng văn bản trong các thanh menu , có thể được giải quyết bằng thuộc line-heighttính. Nếu tôi thực sự cần căn chỉnh một phần tử khối, tôi sẽ đặt chiều cao rõ ràng trên phần gốc và mục được căn chỉnh theo chiều dọc, vị trí tuyệt đối, 50% trên cùng và lề âm.

Lý do tôi không sử dụng display: table-celllà cách nó tràn ra khi bạn có nhiều mặt hàng hơn chiều rộng của trang web có thể xử lý. ô bảng sẽ buộc người dùng cuộn theo chiều ngang, trong khi phao sẽ bao bọc menu tràn, làm cho nó vẫn có thể sử dụng được mà không cần phải cuộn ngang.

Điều tốt nhất về float: left và overflow: auto là nó hoạt động hoàn toàn trở lại IE6 mà không cần hack, thậm chí có thể còn hơn thế nữa.

Tôi muốn nói nó phụ thuộc vào những gì bạn cần nó cho:

1. Nếu bạn cần nó chỉ để có được bố cục 3 cột, tôi khuyên bạn nên làm điều đó với float.

2. Nếu bạn cần nó cho menu, bạn có thể sử dụng inline-block. Đối với vấn đề về khoảng trắng, bạn có thể sử dụng một số thủ thuật như được mô tả bởi Chris Coyier tại đây http://css-tricks.com/fighting-the-space-b between-inline-block-elements/ .

3. Nếu bạn cần thực hiện một tùy chọn nhiều lựa chọn, chiều rộng cần trải đều trong một hộp được chỉ định, thì tôi thích hơn display: table. Điều này sẽ không hoạt động chính xác trong một số trình duyệt, vì vậy nó phụ thuộc vào hỗ trợ trình duyệt của bạn.

Cuối cùng, những gì có thể là phương pháp tốt nhất đang sử dụng flexbox. Thông số kỹ thuật cho điều này đã thay đổi vài lần, vì vậy nó chưa ổn định. Nhưng một khi nó đã được hoàn thiện, đây sẽ là phương pháp tốt nhất tôi nghĩ.

Tôi thích khối nội tuyến, mặc dù float cũng hữu ích. Tế bào bảng không được hiển thị chính xác bởi các IE cũ (cũng không chặn nội tuyến, nhưng có zoom: 1; *display: inlinehack mà tôi sử dụng thường xuyên). Nếu bạn có con có chiều cao nhỏ hơn bố mẹ, phao sẽ đưa chúng lên đỉnh, trong khi khối nội tuyến đôi khi sẽ vặn lên.

Hầu hết thời gian, trình duyệt sẽ diễn giải mọi thứ một cách chính xác, tất nhiên trừ khi đó là IE. Bạn luôn phải kiểm tra để chắc chắn rằng IE không hút - ví dụ, khái niệm ô bảng.

Trong tất cả thực tế, vâng, nó sôi sục theo sở thích cá nhân.

Một kỹ thuật bạn có thể sử dụng để loại bỏ khoảng trắng sẽ là đặt font-size0 cho cha mẹ, sau đó trả font-sizelại cho con cái, mặc dù điều đó thật rắc rối và thô thiển.

Chỉ dành cho bản ghi, để thêm vào câu trả lời của Spudley, cũng có khả năng sử dụng position: absolutevà lề nếu bạn biết độ rộng cột.

Đối với tôi, vấn đề chính khi chọn phương thức là bạn có cần các cột để lấp đầy toàn bộ chiều cao (chiều cao bằng nhau) hay không, trong đó ô bảng là phương pháp dễ nhất (nếu bạn không quan tâm nhiều đến các trình duyệt cũ hơn).

Tôi thích inline-block, nhưng floatvẫn là cách hữu ích để kết hợp các elemenets HTML, đặc biệt khi chúng ta có các phần tử nên bám bên trái và một bên phải, làm việc tốt hơn với việc viết ít dòng hơn, trong khi khối nội tuyến hoạt động tốt trong nhiều trường hợp khác .