Làm cách nào để hiển thị nội dung bằng CSS?

Một trong những điều tốt nhất về CSS là nó cho chúng ta khả năng sắp xếp nội dung và các thành phần trên một trang theo bất kỳ cách nào có thể tưởng tượng được, mang lại cấu trúc cho các thiết kế của chúng ta và giúp làm cho nội dung dễ hiểu hơn

Có một số loại định vị khác nhau trong CSS và mỗi loại có ứng dụng riêng. Trong chương này, chúng ta sẽ xem xét một số trường hợp sử dụng khác nhau—tạo bố cục có thể tái sử dụng và định vị duy nhất các phần tử dùng một lần—và mô tả một vài cách để thực hiện từng trường hợp.

Định vị bằng phao

Một cách để định vị các phần tử trên một trang là sử dụng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0. Thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 khá linh hoạt và có thể được sử dụng theo nhiều cách khác nhau

Về cơ bản, thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 cho phép chúng ta lấy một phần tử, xóa phần tử đó khỏi quy trình bình thường của trang và đặt phần tử đó ở bên trái hoặc bên phải của phần tử cha của nó. Tất cả các phần tử khác trên trang sau đó sẽ chảy xung quanh phần tử nổi. Ví dụ, một phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 3 nổi ở bên cạnh một vài đoạn văn bản sẽ cho phép các đoạn bao quanh hình ảnh khi cần thiết

Khi thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 được sử dụng trên nhiều phần tử cùng một lúc, nó cung cấp khả năng tạo bố cục bằng các phần tử nổi ngay cạnh hoặc đối diện nhau, như được thấy trong bố cục nhiều cột

Thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 chấp nhận một vài giá trị;

1 2 3 4img { float: left; }

Phao trong thực tế

Hãy tạo một bố cục trang chung với tiêu đề ở trên cùng, hai cột ở giữa và chân trang ở dưới cùng. Lý tưởng nhất là trang này sẽ được đánh dấu bằng cách sử dụng các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 như đã thảo luận trong Bài 2, “Làm quen với HTML. ” Bên trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 22, HTML có thể trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 5section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6

Bố cục không có Floats Demo

Xem Bố cục bút không có dấu nổi của Shay Howe (@shayhowe) trên CodePen

Ở đây, các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20, dưới dạng các phần tử cấp khối, sẽ được xếp chồng lên nhau theo mặc định. Tuy nhiên, chúng tôi muốn những yếu tố này ngồi cạnh nhau. Bằng cách di chuyển section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 đến section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20 đến section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7, chúng ta có thể định vị chúng thành hai cột đối diện nhau. CSS của chúng ta sẽ trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 3____24

Để tham khảo, khi một phần tử được thả nổi, nó sẽ nổi đến tận cạnh của phần tử cha của nó. Nếu không có phần tử cha, thì phần tử được thả nổi sẽ trôi đến tận mép trang

Khi chúng tôi thả nổi một phần tử, chúng tôi đưa nó ra khỏi luồng bình thường của tài liệu HTML. Điều này làm cho chiều rộng của phần tử đó mặc định bằng chiều rộng của nội dung bên trong nó. Đôi khi, chẳng hạn như khi chúng tôi tạo cột cho bố cục có thể sử dụng lại, hành vi này không được mong muốn. Nó có thể được sửa bằng cách thêm một giá trị thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 cố định vào mỗi cột. Ngoài ra, để ngăn các phần tử nổi chạm vào nhau, khiến nội dung của phần tử này nằm ngay bên cạnh nội dung của phần tử kia, chúng ta có thể sử dụng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 để tạo khoảng cách giữa các phần tử

Ở đây, chúng tôi đang mở rộng khối mã trước đó, thêm section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 vào mỗi cột để định hình rõ hơn kết quả mong muốn của chúng tôi

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; }

Bố cục với Floats Demo

Xem Bố cục bút có phao của Shay Howe (@shayhowe) trên CodePen

Phao nổi có thể thay đổi giá trị hiển thị của phần tử

Khi thả nổi một phần tử, điều quan trọng là phải nhận ra rằng một phần tử bị xóa khỏi quy trình bình thường của trang và điều đó có thể thay đổi giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 mặc định của phần tử. Thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 dựa trên một phần tử có giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 66 và có thể thay đổi giá trị mặc định của phần tử là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 nếu nó chưa được hiển thị dưới dạng phần tử cấp khối

Ví dụ: một phần tử có giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 69, chẳng hạn như phần tử cấp độ nội tuyến img { float: left; } 00, bỏ qua mọi giá trị thuộc tính img { float: left; } 01 hoặc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29. Tuy nhiên, nếu phần tử cấp độ nội tuyến đó được thả nổi, giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 của nó sẽ được thay đổi thành khối và sau đó nó có thể chấp nhận các giá trị thuộc tính img { float: left; } 01 hoặc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29

Khi chúng ta thả nổi các phần tử, chúng ta phải theo dõi xem các giá trị thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 của chúng bị ảnh hưởng như thế nào

Với hai cột, chúng ta có thể di chuyển một cột sang trái và một cột khác sang phải, nhưng với nhiều cột hơn, chúng ta phải thay đổi cách tiếp cận của mình. Ví dụ: giả sử chúng tôi muốn có một hàng gồm ba cột giữa các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 của chúng tôi. Nếu chúng ta bỏ phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20 và sử dụng ba phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9, thì HTML của chúng ta có thể trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2____26

Để định vị ba phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 này trong một hàng có ba cột, thay vì thả nổi một cột sang trái và một cột sang phải, chúng ta sẽ thả cả ba phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 sang trái. Chúng ta cũng cần điều chỉnh độ rộng của các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 để tính đến các cột bổ sung và để chúng nằm cạnh nhau

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2img { float: left; } 1

Ở đây chúng tôi có ba cột, tất cả đều có giá trị lề và chiều rộng bằng nhau và tất cả đều được thả nổi vào section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6

Bố cục ba cột với bản demo nổi

Xem Bố cục ba cột bút có dấu nổi của Shay Howe (@shayhowe) trên CodePen

Dọn dẹp & chứa phao nổi

Thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 ban đầu được thiết kế để cho phép nội dung bao quanh hình ảnh. Một hình ảnh có thể được thả nổi và tất cả nội dung xung quanh hình ảnh đó có thể chảy xung quanh nó một cách tự nhiên. Mặc dù điều này hoạt động tốt cho hình ảnh, nhưng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 thực sự không bao giờ được sử dụng cho mục đích bố cục và định vị, do đó, thuộc tính này có một vài cạm bẫy

Một trong những cạm bẫy đó là đôi khi các kiểu phù hợp sẽ không hiển thị trên phần tử mà nó nằm bên cạnh hoặc là phần tử cha của phần tử nổi. Khi một phần tử được thả nổi, nó sẽ bị loại khỏi quy trình bình thường của trang và do đó, kiểu của các phần tử xung quanh phần tử nổi đó có thể bị ảnh hưởng tiêu cực

Các giá trị thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 và img { float: left; } 18 thường không được giải thích chính xác, khiến chúng hòa trộn vào phần tử nổi;

Một cạm bẫy khác là đôi khi nội dung không mong muốn bắt đầu bao quanh một phần tử nổi. Việc xóa một phần tử khỏi luồng của tài liệu cho phép tất cả các phần tử xung quanh phần tử nổi bao bọc và sử dụng mọi khoảng trống có sẵn xung quanh phần tử nổi, điều này thường không mong muốn

Với ví dụ hai cột trước của chúng tôi, sau khi chúng tôi thả nổi các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20 và trước khi chúng tôi đặt giá trị thuộc tính chiều rộng cho một trong hai phần tử đó, nội dung trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 sẽ được bao bọc ở giữa hai phần tử nổi phía trên nó, điền vào . Do đó, phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 sẽ nằm trong rãnh giữa các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20, chiếm dung lượng có sẵn

Bố cục không Cleared hoặc Contained Floats Demo

Xem Bố cục bút không xóa hoặc chứa số float của Shay Howe (@shayhowe) trên CodePen

Để ngăn nội dung bao quanh các phần tử nổi, chúng ta cần xóa hoặc chứa các phần tử nổi đó và đưa trang trở lại quy trình bình thường. Chúng ta sẽ tiếp tục bằng cách xem cách xóa số float và sau đó chúng ta sẽ xem cách chứa số float

Xóa phao

Việc xóa số float được thực hiện bằng thuộc tính img { float: left; } 25, thuộc tính này chấp nhận một vài giá trị khác nhau. các giá trị được sử dụng phổ biến nhất là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7 và img { float: left; } 28

1 2 3 4img { float: left; } 3

Giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6 sẽ xóa số float bên trái, trong khi giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7 sẽ xóa số float bên phải. Tuy nhiên, giá trị img { float: left; } 28 sẽ xóa cả số float bên trái và bên phải và thường là giá trị lý tưởng nhất

Quay trở lại ví dụ trước của chúng tôi, nếu chúng tôi sử dụng thuộc tính img { float: left; } 25 với giá trị của img { float: left; } 28 trên phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21, chúng tôi có thể xóa số float. Điều quan trọng là việc xóa này được áp dụng cho một phần tử xuất hiện sau các phần tử nổi, không phải trước đó, để đưa trang trở lại quy trình bình thường của nó

1 2 3 4img { float: left; } 5

Bố cục với Cleared Floats Demo

Xem Bố cục bút với các dấu nổi đã xóa của Shay Howe (@shayhowe) trên CodePen

chứa phao

Thay vì xóa số float, một tùy chọn khác là chứa số float. Kết quả của việc chứa số float so với kết quả của việc xóa chúng gần như giống nhau;

Để chứa float, các phần tử float phải nằm trong phần tử cha. Phần tử cha sẽ hoạt động như một thùng chứa, khiến luồng tài liệu hoàn toàn bình thường bên ngoài nó. CSS cho phần tử cha đó, được đại diện bởi lớp img { float: left; } 35 bên dưới, được hiển thị ở đây

img { float: left; } 6img { float: left; } 7

Có khá nhiều thứ đang diễn ra ở đây, nhưng về cơ bản, những gì CSS đang làm là xóa mọi phần tử nổi trong phần tử có lớp img { float: left; } 35 và đưa luồng tài liệu trở lại bình thường

Cụ thể hơn, các phần tử giả img { float: left; } 37 và img { float: left; } 38, như đã đề cập trong bài tập Bài 4, là các phần tử được sinh động bên trên và bên dưới phần tử có lớp là img { float: left; } 35. Những phần tử đó không bao gồm bất kỳ nội dung nào và được hiển thị dưới dạng phần tử cấp img { float: left; } 40, giống như phần tử cấp khối. Phần tử được tạo động sau phần tử có lớp img { float: left; } 35 đang xóa các số float trong phần tử có lớp img { float: left; } 35, giống như phần tử img { float: left; } 25 trước đó. Và cuối cùng, bản thân phần tử có lớp img { float: left; } 35 cũng xóa bất kỳ số float nào có thể xuất hiện phía trên nó, trong trường hợp có thể tồn tại số float trái hoặc phải. Nó cũng bao gồm một thủ thuật nhỏ để giúp các trình duyệt cũ hơn chơi tốt

Nó có nhiều mã hơn so với khai báo img { float: left; } 45, nhưng nó có thể tỏ ra khá hữu ích

Nhìn vào bố cục trang hai cột của chúng tôi từ trước, chúng tôi có thể bọc các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 20 bằng một phần tử cha. Phần tử cha đó sau đó cần chứa các số float trong chính nó. Mã sẽ trông như thế này

HTMLsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 3img { float: left; } 9 CSSsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 50section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 51

Bố cục với Bản trình diễn nổi có chứa

Xem Bố cục bút có phao nổi của Shay Howe (@shayhowe) trên CodePen

Kỹ thuật hiển thị ở đây để chứa các phần tử được gọi là "xóa rõ ràng" và thường có thể được tìm thấy trong các trang web khác có tên lớp là img { float: left; } 48 hoặc img { float: left; } 49. Tuy nhiên, chúng tôi đã chọn sử dụng tên lớp của img { float: left; } 35 vì nó đại diện cho một nhóm các phần tử và thể hiện nội dung tốt hơn

Khi các phần tử được thả nổi, điều quan trọng là phải lưu ý cách chúng ảnh hưởng đến luồng của trang và đảm bảo luồng của trang được đặt lại bằng cách xóa hoặc chứa các phần nổi khi cần thiết. Việc không theo dõi số float có thể gây ra khá nhiều vấn đề đau đầu, đặc biệt là khi các trang bắt đầu có nhiều hàng nhiều cột

Trong thực tế

Hãy quay lại trang web Styles Conference để thử thả nổi một số nội dung

1. Điều đầu tiên, trước khi chúng ta bắt đầu thả nổi bất kỳ phần tử nào, hãy cung cấp một cách để chứa các phần tử nổi đó bằng cách thêm phần rõ ràng vào CSS của chúng ta. Trong tệp img { float: left; } 51, ngay bên dưới các kiểu lưới của chúng ta, hãy thêm phần rõ ràng bên dưới tên lớp img { float: left; } 35, giống như trước đây

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 52section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 53

2. Bây giờ chúng ta có thể chứa các số float, hãy thả phần chính img { float: left; } 53 trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8 sang bên trái và cho phép tất cả nội dung khác trong tiêu đề bao quanh bên phải của nó

   Để làm điều này, hãy thêm một lớp img { float: left; } 55 vào phần tử img { float: left; } 53. Sau đó, trong CSS của chúng tôi, hãy thêm một phần kiểu mới cho tiêu đề chính. Trong phần này, chúng tôi sẽ chọn phần tử img { float: left; } 53 với lớp img { float: left; } 55 và sau đó section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 ở bên trái

   HTML1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 55 CSSsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 56section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 57

3. Trong khi chúng tôi đang ở đó, hãy thêm một chút chi tiết vào logo của chúng tôi. Chúng tôi sẽ bắt đầu bằng cách đặt một phần tử img { float: left; } 60 hoặc ngắt dòng giữa từ “Phong cách” và từ “Hội nghị” để buộc văn bản logo của chúng tôi nằm trên hai dòng

   Trong CSS, hãy thêm một đường viền vào đầu logo của chúng ta và một số img { float: left; } 18 dọc để tạo không gian cho logo

   HTML1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 59 CSSsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 61

4. Bởi vì chúng tôi thả nổi phần tử img { float: left; } 53, chúng tôi sẽ muốn chứa section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 đó. Phần tử cha gần nhất của phần tử img { float: left; } 53 là phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8, vì vậy chúng tôi sẽ muốn thêm lớp của img { float: left; } 35 vào phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8. Việc làm này sẽ áp dụng các kiểu Clearfix mà chúng ta đã thiết lập trước đó cho phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8

   1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63

5. Phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8 đang hình thành, vì vậy hãy xem phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21. Giống như chúng ta đã làm với phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8, chúng ta sẽ thả bản quyền của mình sang bên trái trong phần tử img { float: left; } 72 và để tất cả các phần tử khác bao quanh nó ở bên phải

   Tuy nhiên, không giống như phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8, chúng ta sẽ không sử dụng một lớp trực tiếp trên phần tử float. Lần này chúng ta sẽ áp dụng một lớp cho cha của phần tử được thả nổi và sử dụng bộ chọn CSS duy nhất để chọn phần tử rồi thả nổi phần tử đó

   Hãy bắt đầu bằng cách thêm lớp img { float: left; } 74 vào phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21. Bởi vì chúng tôi biết rằng chúng tôi sẽ thả nổi một phần tử trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21, chúng tôi cũng nên thêm lớp img { float: left; } 35 trong khi chúng tôi đang ở đó

   1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 65

6. Bây giờ lớp của img { float: left; } 74 nằm trên phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21, chúng ta có thể sử dụng lớp đó để sơ tuyển phần tử img { float: left; } 72 bằng CSS. Chúng tôi sẽ muốn chọn và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 0 phần tử img { float: left; } 72 cho phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6. Đừng quên tạo một phần mới trong tệp img { float: left; } 51 của chúng tôi cho các kiểu chân trang chính này

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 56____167

   Để xem xét, ở đây chúng tôi đang chọn phần tử img { float: left; } 72, phần tử này phải nằm trong một phần tử có giá trị thuộc tính lớp là img { float: left; } 74, chẳng hạn như phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 của chúng tôi chẳng hạn

7. Cuối cùng, hãy đặt một số img { float: left; } 18 ở trên cùng và dưới cùng của phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 để giúp tách nó ra khỏi phần còn lại của trang hơn một chút. Chúng ta có thể làm điều này trực tiếp bằng cách sử dụng lớp img { float: left; } 74 với bộ chọn lớp

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 5section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 69

Với tất cả những thay đổi này đối với các yếu tố section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21, chúng tôi phải đảm bảo thực hiện chúng trên mọi trang, không chỉ trang img { float: left; } 93

Hình 5

Với một vài số float, các yếu tố section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 8 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 21 trên trang chủ Hội nghị Phong cách của chúng tôi sẽ kết hợp với nhau

Định vị với Inline-Block

Ngoài việc sử dụng float, một cách khác mà chúng ta có thể định vị nội dung là sử dụng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 kết hợp với giá trị img { float: left; } 97. Phương thức inline-block, như chúng ta sẽ thảo luận, chủ yếu hữu ích cho việc bố trí các trang hoặc đặt các phần tử cạnh nhau trong một dòng

Nhớ lại rằng giá trị img { float: left; } 97 cho thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 sẽ hiển thị các phần tử trong một dòng đồng thời cho phép chúng chấp nhận tất cả các thuộc tính của mô hình hộp, bao gồm img { float: left; } 01, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29, img { float: left; } 18, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 503 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60. Sử dụng các phần tử khối nội tuyến cho phép chúng tôi tận dụng tối đa mô hình hộp mà không phải lo lắng về việc xóa bất kỳ số float nào

Inline-Block trong thực tế

Hãy xem ví dụ ba cột của chúng tôi từ trước. Chúng tôi sẽ bắt đầu bằng cách giữ nguyên HTML của chúng tôi

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2____26

Bây giờ thay vì thả nổi ba phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 của chúng ta, chúng ta sẽ thay đổi giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 63 của chúng thành img { float: left; } 97, chỉ để lại các thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 từ trước đó. CSS kết quả của chúng tôi sẽ trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2____233

Thật không may, một mình mã này không hoàn toàn làm được điều đó và phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 cuối cùng được đẩy sang một hàng mới. Hãy nhớ rằng, vì các phần tử khối nội tuyến được hiển thị trên cùng một dòng với nhau, nên chúng bao gồm một khoảng trắng giữa chúng. Khi kích thước của mỗi khoảng trắng đơn lẻ được thêm vào các giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 và chiều ngang section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 của tất cả các phần tử trong hàng, tổng chiều rộng sẽ trở nên quá lớn, đẩy phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 cuối cùng sang một hàng mới. Để hiển thị tất cả các phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 trên cùng một hàng, phải xóa khoảng trắng giữa mỗi phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9

Inline-Block Elements với White Space Demo

Xem Các thành phần khối trong dòng bút có khoảng trắng của Shay Howe (@shayhowe) trên CodePen

Xóa khoảng trắng giữa các phần tử khối nội tuyến

Có một số cách để loại bỏ khoảng cách giữa các phần tử khối nội tuyến và một số cách phức tạp hơn những cách khác. Chúng ta sẽ tập trung vào hai trong số những cách dễ nhất, cả hai đều xảy ra bên trong HTML

Giải pháp đầu tiên là đặt mỗi thẻ mở của phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 mới trên cùng một dòng với thẻ đóng của phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 trước đó. Thay vì sử dụng một dòng mới cho mỗi phần tử, chúng tôi sẽ kết thúc và bắt đầu các phần tử trên cùng một dòng. HTML của chúng tôi có thể trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 56section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 35

Viết các phần tử khối nội tuyến theo cách này đảm bảo rằng khoảng cách giữa các phần tử khối nội tuyến trong HTML không tồn tại;

Inline-Block Elements không có White Space Demo

Xem Các phần tử khối trong dòng bút không có khoảng trắng của Shay Howe (@shayhowe) trên CodePen

Một cách khác để xóa khoảng trắng giữa các phần tử khối nội tuyến là mở một nhận xét HTML trực tiếp sau thẻ đóng của phần tử khối nội tuyến. Sau đó, đóng nhận xét HTML ngay trước thẻ mở phần tử khối nội tuyến tiếp theo. Làm điều này cho phép các phần tử khối nội tuyến bắt đầu và kết thúc trên các dòng HTML riêng biệt và "nhận xét" bất kỳ khoảng trống tiềm năng nào giữa các phần tử. Mã kết quả sẽ trông như thế này

section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 36section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 37

Cả hai tùy chọn này đều không hoàn hảo, nhưng chúng hữu ích. Tôi có xu hướng ủng hộ việc sử dụng nhận xét để tổ chức tốt hơn, nhưng bạn chọn tùy chọn nào hoàn toàn tùy thuộc vào bạn

Tạo bố cục có thể tái sử dụng

Khi xây dựng một trang web, tốt nhất bạn nên viết các kiểu mô-đun có thể được sử dụng lại ở nơi khác và các bố cục có thể sử dụng lại được xếp hạng cao trong danh sách mã có thể sử dụng lại. Bố cục có thể được tạo bằng cách sử dụng phần tử float hoặc phần tử khối nội tuyến, nhưng cách nào hoạt động tốt nhất và tại sao?

Việc sử dụng các phần tử float hay inline-block để bố trí cấu trúc của một trang có tốt hơn hay không vẫn còn gây tranh luận. Cách tiếp cận của tôi là sử dụng các phần tử khối nội tuyến để tạo lưới—hoặc bố cục—của một trang và sau đó sử dụng các phần nổi khi tôi muốn nội dung bao quanh một phần tử nhất định (như phần nổi được dự định thực hiện với hình ảnh). Nói chung, tôi cũng thấy các phần tử khối nội tuyến dễ làm việc hơn

Điều đó nói rằng, sử dụng bất cứ điều gì tốt nhất cho bạn. Nếu bạn cảm thấy thoải mái với cách tiếp cận này hơn cách tiếp cận khác, thì hãy tiếp tục

Hiện tại, có các thông số kỹ thuật CSS mới đang được triển khai—cụ thể là các thuộc tính dựa trên section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 518 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 519—sẽ giúp giải quyết cách bố cục trang tốt nhất. Hãy để mắt đến những phương pháp này khi chúng bắt đầu xuất hiện

Trong thực tế

Với sự hiểu biết chắc chắn về các bố cục có thể tái sử dụng, đã đến lúc triển khai một bố cục trên trang web Hội nghị Phong cách của chúng tôi

1. Đối với trang web Styles Conference, chúng tôi sẽ tạo bố cục ba cột có thể tái sử dụng bằng cách sử dụng các phần tử khối nội tuyến. Chúng tôi sẽ làm như vậy theo cách cho phép chúng tôi có ba cột có chiều rộng bằng nhau hoặc hai cột có tổng chiều rộng được phân chia giữa chúng, hai phần ba ở cột này và một phần ba ở cột kia

   Để bắt đầu, chúng ta sẽ tạo các lớp xác định section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 của các cột này. Hai lớp chúng tôi sẽ tạo là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 521, cho một phần ba và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 522, cho hai phần ba. Trong phần lưới của tệp img { float: left; } 51 của chúng tôi, hãy tiếp tục và xác định các lớp này và độ rộng tương ứng của chúng

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 3____239

2. Chúng tôi muốn cả hai cột được hiển thị dưới dạng các phần tử khối nội tuyến. Chúng tôi cũng cần đảm bảo rằng căn chỉnh dọc của chúng cũng được đặt thành section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524 của mỗi cột

   Hãy tạo hai bộ chọn mới sẽ chia sẻ kiểu thuộc tính hiển thị và căn chỉnh dọc

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 2____241

   Nhìn lại CSS, chúng tôi đã tạo hai bộ chọn lớp, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 521 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 522, được phân tách bằng dấu phẩy. Dấu phẩy ở cuối bộ chọn đầu tiên biểu thị rằng một bộ chọn khác sẽ theo sau. Bộ chọn thứ hai được theo sau bởi dấu ngoặc nhọn mở, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 527, biểu thị rằng các khai báo kiểu sẽ tuân theo. Bằng cách phân tách các bộ chọn bằng dấu phẩy, chúng ta có thể liên kết các kiểu giống nhau với nhiều bộ chọn cùng một lúc

3. Chúng tôi sẽ muốn đặt một số khoảng trống ở giữa mỗi cột để giúp chia nhỏ nội dung. Chúng ta có thể thực hiện điều này bằng cách đặt img { float: left; } 18 nằm ngang trên mỗi cột

   Điều này hoạt động tốt; . Để cân bằng điều này, chúng tôi sẽ đặt tất cả các cột của chúng tôi trong một lưới và thêm cùng một phần đệm từ các cột của chúng tôi vào lưới đó

   Hãy sử dụng tên lớp là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 529 để xác định lưới của chúng ta, sau đó hãy xác định cùng một chiều ngang img { float: left; } 18 cho lưới của chúng ta, các lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 521 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 522. Với dấu phẩy ngăn cách bộ chọn của chúng tôi một lần nữa, CSS của chúng tôi trông như thế này

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 3____243

4. Khi chúng tôi thiết lập img { float: left; } 18 nằm ngang, chúng tôi sẽ cần phải cẩn thận. Hãy nhớ rằng, trong bài học trước, chúng ta đã tạo một phần tử vùng chứa, được gọi là lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534, để căn giữa tất cả nội dung của chúng ta trên một trang trong một phần tử có chiều rộng section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 535 pixel. Hiện tại, nếu chúng ta đặt một phần tử có lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 529 bên trong một phần tử có lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534, các phần đệm ngang của chúng sẽ thêm vào nhau và các cột của chúng ta sẽ xuất hiện không tương xứng với chiều rộng của phần còn lại của trang

   Chúng tôi không muốn điều này xảy ra, vì vậy, thay vào đó, chúng tôi sẽ phải chia sẻ một số kiểu từ bộ quy tắc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534 với bộ quy tắc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 529. Cụ thể, chúng tôi sẽ cần chia sẻ thuộc tính và giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 29 (để đảm bảo trang của chúng tôi cố định ở chiều rộng section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 535 pixel) và thuộc tính và giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 (để căn giữa bất kỳ phần tử nào có loại lưới trên trang)

   Chúng tôi sẽ thực hiện điều này bằng cách chia nhỏ bộ quy tắc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534 cũ thành các quy tắc sau

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 56____245

   Bây giờ, bất kỳ phần tử nào có lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534 hoặc lưới sẽ rộng section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 535 pixel và được căn giữa trên trang. Ngoài ra, chúng tôi đã giữ nguyên phần đệm ngang hiện có cho bất kỳ phần tử nào có lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534 bằng cách di chuyển phần tử đó vào một bộ quy tắc mới, riêng biệt

5. Được rồi—tất cả công việc nặng nhọc cần thiết để đưa các kiểu lưới có thể tái sử dụng của chúng ta vào vị trí đã hoàn tất. Bây giờ là lúc làm việc với HTML của chúng ta và để xem các lớp này hoạt động như thế nào

   Chúng tôi sẽ bắt đầu với các đoạn giới thiệu trên trang chủ, trong tệp img { float: left; } 93 của chúng tôi, sắp xếp chúng thành ba cột. Hiện tại, các đoạn giới thiệu được bao bọc trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 với lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534. Chúng tôi muốn thay đổi lớp đó từ section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 534 thành section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 529 để chúng tôi có thể bắt đầu đặt các cột bên trong nó

   1 2 3 4____247

6. Tiếp theo, chúng tôi sẽ muốn thêm một lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 521 vào mỗi phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 trong phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 với lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 529

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 48section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 49

7. Và cuối cùng, vì mỗi cột của chúng ta là một phần tử khối nội tuyến, nên chúng ta sẽ muốn đảm bảo rằng chúng ta xóa khoảng trắng trống giữa chúng. Chúng tôi sẽ sử dụng các nhận xét để thực hiện việc này và chúng tôi sẽ thêm một chút tài liệu lưu ý từng phần sắp tới trong khi chúng tôi đang thực hiện để tổ chức mã của mình tốt hơn

   section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 90section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 91

   Để xem xét, trên dòng 3, chúng tôi để lại nhận xét xác định phần “Loa” để theo dõi. Ở cuối dòng 7, chúng tôi mở một bình luận ngay sau thẻ đóng section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 556. Trong nhận xét đó, trên dòng 9, chúng tôi xác định phần “Lịch trình” sẽ đến. Sau đó, chúng tôi đóng nhận xét ở đầu dòng 11, ngay trước thẻ mở đầu section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9. Cấu trúc bình luận tương tự này xuất hiện lại trên các dòng từ 13 đến 17 giữa hai phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9, ngay trước phần “Địa điểm”. Nói chung, chúng tôi đã nhận xét bất kỳ khoảng trắng tiềm năng nào giữa các cột đồng thời sử dụng các nhận xét đó để xác định các phần của chúng tôi

Bây giờ chúng ta có một lưới ba cột có thể tái sử dụng, hỗ trợ nhiều cách sắp xếp, sử dụng cả hai cột có chiều rộng một phần ba và hai phần ba. Trang chủ của chúng tôi hiện có ba cột, chia nhỏ tất cả các đoạn giới thiệu khác nhau

Hình 5

Trang chủ Hội nghị Phong cách của chúng tôi hiện bao gồm bố cục ba cột

Demo và mã nguồn

Bên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại

Xem Trang web Styles Conference hoặc Tải xuống Mã nguồn (Tệp zip)

Các yếu tố định vị độc đáo

Thỉnh thoảng chúng ta sẽ muốn định vị chính xác một phần tử, nhưng các phần tử float hoặc inline-block sẽ không làm được điều đó. Phao, loại bỏ một phần tử khỏi luồng của trang, thường tạo ra các kết quả không mong muốn khi các phần tử xung quanh chảy xung quanh phần tử nổi. Các phần tử khối nội tuyến, trừ khi chúng ta đang tạo cột, có thể khá khó để vào đúng vị trí. Đối với những tình huống này, chúng ta có thể sử dụng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 liên quan đến thuộc tính bù hộp

Thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 xác định cách một phần tử được định vị trên trang và liệu phần tử đó có xuất hiện trong quy trình thông thường của tài liệu hay không. Điều này được sử dụng cùng với các thuộc tính bù hộp—_______1524, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 563 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6—xác định chính xác vị trí của một phần tử sẽ được định vị bằng cách di chuyển các phần tử theo một số hướng khác nhau

Theo mặc định, mọi phần tử có giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 566, có nghĩa là nó tồn tại trong luồng thông thường của tài liệu và nó không chấp nhận bất kỳ thuộc tính bù hộp nào. Giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 566 thường được ghi đè bằng giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 568 hoặc section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 569, chúng tôi sẽ kiểm tra giá trị này trong phần tiếp theo

Định vị tương đối

Giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 568 cho thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 cho phép các phần tử xuất hiện trong luồng bình thường của một trang, để lại khoảng trống cho một phần tử như dự định trong khi không cho phép các phần tử khác chạy xung quanh nó; . Ví dụ: hãy xem xét HTML và CSS sau

HTML1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 93 CSSsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 56section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 95

Trình diễn định vị tương đối

Xem Định vị Tương đối Bút của Shay Howe (@shayhowe) trên CodePen

Ở đây, phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 thứ hai, phần tử có lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 573, có giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 568 và hai thuộc tính bù hộp, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524. Điều này giữ nguyên vị trí ban đầu của phần tử và các phần tử khác không được phép di chuyển vào không gian này. Ngoài ra, các thuộc tính bù hộp đặt lại vị trí của phần tử, đẩy nó section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel từ section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel từ section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524 của vị trí ban đầu

Với các phần tử được định vị tương đối, điều quan trọng cần biết là các thuộc tính bù hộp xác định nơi một phần tử sẽ được di chuyển từ vị trí ban đầu của nó. Do đó, thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 6 có giá trị là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel sẽ thực sự đẩy phần tử về phía bên phải, từ bên trái, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel. Khi đó, thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524 có giá trị là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel sẽ đẩy một phần tử xuống dưới cùng, từ trên xuống, section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel

Khi chúng ta định vị phần tử bằng cách sử dụng thuộc tính bù hộp, phần tử sẽ chồng lên phần tử bên dưới nó thay vì di chuyển phần tử đó xuống dưới như thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 60 hoặc img { float: left; } 18 sẽ

định vị tuyệt đối

Giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 569 cho thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 khác với giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 568 ở chỗ một phần tử có giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 là section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 569 sẽ không xuất hiện trong luồng thông thường của tài liệu và không gian và vị trí ban đầu của phần tử được định vị tuyệt đối sẽ không được bảo toàn

Ngoài ra, các phần tử được định vị tuyệt đối được di chuyển liên quan đến phần tử cha được định vị tương đối gần nhất của chúng. Nếu phần tử cha được định vị tương đối không tồn tại, phần tử được định vị tuyệt đối sẽ được định vị liên quan đến phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 22. Đó là khá nhiều thông tin;

HTML1 2 3 4section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 97 CSSsection { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 98section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 99

Trình diễn định vị tuyệt đối

Xem Định vị bút tuyệt đối của Shay Howe (@shayhowe) trên CodePen

Trong ví dụ này, phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 được định vị tương đối nhưng không bao gồm bất kỳ thuộc tính bù hộp nào. Do đó vị trí của nó không thay đổi. Phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 với lớp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 573 bao gồm giá trị section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 của section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 569. Vì phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9 là phần tử cha có vị trí tương đối gần nhất với phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572, nên phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 sẽ được định vị liên quan đến phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9

Với các phần tử được định vị tương đối, các thuộc tính bù hộp xác định hướng mà một phần tử sẽ được di chuyển so với chính nó. Với các phần tử được định vị tuyệt đối, các thuộc tính bù hộp xác định hướng mà một phần tử sẽ được di chuyển so với phần tử cha được định vị tương đối gần nhất của nó

Là kết quả của các thuộc tính offset hộp section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524, phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 sẽ xuất hiện các pixel section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 từ section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 7 và section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 578 pixel từ section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 524 của section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 9

Bởi vì phần tử section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 được định vị tuyệt đối, nên nó không nằm trong luồng bình thường của trang và sẽ chồng lên mọi phần tử xung quanh. Ngoài ra, vị trí ban đầu của section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 572 không được giữ nguyên và các phần tử khác có thể chiếm không gian đó

Thông thường, hầu hết các định vị có thể được xử lý mà không cần sử dụng thuộc tính section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } 559 và thuộc tính bù hộp, nhưng trong một số trường hợp nhất định, chúng có thể cực kỳ hữu ích

Tóm lược

Học cách định vị nội dung trong HTML và CSS là một bước tiến lớn để thành thạo hai ngôn ngữ này. Thêm vào đây là mô hình hộp và chúng tôi đang trên đường trở thành nhà phát triển giao diện người dùng

Làm cách nào để sử dụng nội dung hiển thị trong CSS?

Làm cách nào để đưa nội dung vào CSS?

Nội dung hoạt động như thế nào trong CSS?

Các giá trị hiển thị trong CSS là gì?