NộI Dung
- Các mặt hàng tinh tế trên đầu trang
- Áo phông được đóng gói gọn gàng
- Đôi tất lấp đầy khoảng trống
- Chuyến đi xa
Bây giờ là nửa đêm, và đó là div trên trang web của bạn trông vẫn giống như một cái rương đồ chơi của trẻ em. Tất cả các yếu tố là một mớ hỗn độn và mỗi khi bạn chơi với CSS trưng bày tài sản, chúng tự sắp xếp lại thành một thứ vô nghĩa hoàn toàn khác.
Nếu bạn giống tôi, bạn có thể sẽ giải quyết vấn đề này bằng cách lẩm bẩm trong hơi thở và trở nên tích cực hơn với bàn phím của mình. Và mặc dù chiến lược đó đã có hiệu quả với tôi trước đây, nhưng gần đây tôi đã bắt đầu tìm cách tốt hơn để hiểu trưng bày bất động sản.
Nó chỉ ra những điều cơ bản của trưng bày đơn giản hơn nhiều so với tôi nghĩ ban đầu. Trên thực tế, họ sử dụng các nguyên tắc tương tự như đóng gói một chiếc vali. Tôi sẽ bao gồm hiển thị: khối, chặn Nội tuyến và nội tuyến. Nếu bạn đã sắp xếp vali một cách có trật tự trước đó, bạn sẽ thấy phần song song. Nếu bạn là loại người xé toạc quần áo của mình một cách lộn xộn - thì, tôi chỉ có thể làm được rất nhiều điều cho bạn.
Vali của chúng tôi sẽ chứa ba loại quần áo:
- Delicates, giống như một chiếc áo sơ mi có cổ
- Áo phông có thể cuộn lại
- Tất hoặc đồ lót có thể bị nhét vào các khoảng trống
Để tham khảo, nếu chúng tôi lập mô hình vali bằng HTML, nó sẽ giống như sau:
div class = 'vali'> div class = 'thin'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'vớ'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'áo thun'> / div> / div>
Các mặt hàng tinh tế trên đầu trang
Hiển thị: khối là mặc định cho hầu hết các phần tử HTML. Điều đó có nghĩa là phần tử chiếm toàn bộ không gian ngang trong vùng chứa của nó div. Nếu nó nằm cạnh các phần tử anh em khác, nó sẽ bắt đầu một dòng mới và không cho phép các phần tử khác trên dòng của nó. Nó cũng tương tự như những món đồ mỏng manh mà bạn đặt ở đầu vali. Đây là những món đồ tinh tế hoặc thông minh như áo sơ mi có cổ. Bạn không muốn chúng bị nhăn, vì vậy bạn phải đảm bảo chúng không bị đè lên các mảnh quần áo khác.
Điều này dẫn đến một trong những phần khó khăn nhất của hiển thị: khối. Chú ý làm thế nào để chiếc áo sơ mi có cổ không chiếm hết chiều rộng của vali? Điều đó không có nghĩa là các mặt hàng khác sẽ tăng lên mức của nó. Giả sử chiếc áo sơ mi này bằng 60% chiều rộng của chiếc vali; nó sẽ vẫn chặn các phần tử khác tham gia nó ở cấp cao nhất.
Đó là lý do tại sao có viền màu cam trong hình. A hiển thị: khối phần tử sẽ tự động thêm lề xung quanh nó nếu nó không chiếm toàn bộ không gian ngang.
Áo phông được đóng gói gọn gàng
Hầu hết vali của bạn có thể chứa đầy những quần áo còn lại cho chuyến đi của bạn. Vì đơn giản, chúng tôi sẽ cắt giảm thứ này xuống chỉ còn áo phông. Có một cuộc tranh luận lớn trên internet về việc liệu gấp hay cuộn là hiệu quả hơn. Tôi là một loại người gấp.
Dù sao đi nữa, để đựng được nhiều đồ nhất, bạn hãy xếp những chiếc áo phông cạnh nhau. Đây chính xác là những gì display: inline-block có nghĩa là cho. Các phần tử này có thể nằm cạnh nhau trên cùng một dòng, cũng như bên cạnh Hiển thị nội dòng các yếu tố.
không giống Hiển thị nội dòng các yếu tố, một chặn Nội tuyến phần tử sẽ chuyển sang dòng tiếp theo nếu nó không vừa với phần tử chứa div cùng với cái khác chặn Nội tuyến các yếu tố. Để có một chiếc áo phông tràn sang hàng tiếp theo, bạn cần phải cắt đôi nó và sử dụng nửa còn lại để bắt đầu một hàng mới. Chặn Nội tuyến các phần tử không được phép chia đôi nếu chúng không nằm trên một dòng.
Đôi tất lấp đầy khoảng trống
Kiểm tra lại HTML ban đầu và bạn sẽ lưu ý rằng có một đôi tất div> giữa tám chiếc áo phông. Nhưng hãy nhìn vào góc nhìn ngang của chiếc vali bên phải. Nếu có một đôi tất div>, làm thế nào nó có thể kết thúc hàng giữa và bắt đầu hàng dưới cùng? Đây là mục đích của Hiển thị nội dòng!
An nội tuyến phần tử sẽ tràn sang dòng tiếp theo nếu nó vượt quá chiều rộng của div (theo cách này nó khác với chặn Nội tuyến hoặc là khối). Kể từ khi tất của chúng tôi div đầy những chiếc tất được nhét lộn xộn vào các khoảng trống, nó có thể dễ dàng lấp đầy khoảng trống ở phía bên phải của hàng giữa và tràn ra để bắt đầu hàng dưới cùng.
Không cần phải cắt đôi tất để điều này xảy ra. Đây là lý do tại sao họ có thể trở thành nội tuyến, trong khi áo phông chỉ có thể là chặn Nội tuyến. Nếu áo phông ở hàng giữa chỉ chiếm 60% chiều rộng, thì tất div> sẽ di chuyển lên để lấp đầy toàn bộ không gian trên phần còn lại của hàng.
Chuyến đi xa
Đây là CSS cuối cùng cho vali của chúng tôi:
.delicate {display: block; chiều rộng: 60%; } .tshirt {display: inline-block; chiều rộng: 20%; } .socks {display: inline; }
Dưới đây là một số tình huống thay thế để minh họa các cách sử dụng khác nhau của màn hình. Nếu các món ngon ở trên có display: inline-block, chúng sẽ vừa vặn với áo phông. Một số áo phông sẽ di chuyển lên dòng trên cùng và số còn lại sẽ điều chỉnh cho phù hợp. Sẽ không có phần đệm thoải mái cho bên trái và bên phải của chiếc áo sơ mi có cổ.
Nếu mỗi chiếc áo phông có khối hiển thị, bạn sẽ có một chồng áo phông khổng lồ chồng lên nhau, mỗi chiếc một dòng. Nếu đôi tất có display: inline-block, tất cả họ sẽ ngồi ở hàng dưới cùng hơn là nằm giữa hai hàng. Một số áo phông sẽ được đẩy sang một hàng khác, tạo thành dòng thứ tư. Sẽ có một khoảng trống ở bên phải của hàng áo phông ở giữa.
Với phương pháp mà tôi đã nêu ở đây, chúng ta sẽ có được một chiếc vali được đóng gói gọn gàng, tận dụng tốt nhất không gian có sẵn.
Bài viết này ban đầu xuất hiện trong tạp chí net số phát hành 289; mua nó ở đây!
