Page Layout

Từ rất lâu, con người đã sử dụng HTML để xây dựng khung layout cho trang web. Điều đấy thực sự thú vị. Nhưng vào năm 2001, CSS: như một khối Space Odyssey, đã sớm xuất hiện và thay đổi tất cả mọi thứ.

Xây dựng Layout với CSS khá dễ. Bạn có thể chọn một đoạn trang web và đặt nó ở bất cứ đâu bạn muốn. Bạn có thể đặt absolute hoặc relative với những đoạn này với đoạn khác.

Position

Các thuộc tính của Position được dùng để định nghĩa cho một box là absolute, relative, static hay fixed:

  • static là dạng mặc định, và nó tuân theo cấu trúc chung HTML
  • relative cũng khá giống static nhưng box có thể được xác định vị trí ban đầu của nó với những thuộc tính như top, right, bottom và left.
  • absolute không còn tuân theo mặc định của HTML, và tạo ra sự khác biệt cho nó.Trong trang web, box absolute có thể được đặt ở bất cứ nơi nào của trang với top, right, bottom và left.
  • fixed cũng giống như absolute,nhưng nó sẽ được ấn định vị trí ở trình duyệt thay vì trang web, vì vậy các box fixed được cố định ở vị trí chính xác của chúng ngay cả khi cuộn trang.
 Khi chúng ta nói răng thuộc tính absolute được đặt ở bất cứ đâu trên trang web, chúng thực ra vẫn có thể được định vị một cách tương đối từ lề của trang web. Và để thêm một bản nền khác, trang web không thực sự là vùng chứa- một box sẽ được đặt tính absolute trong một box relative tới bất cứ box không tĩnh nào. Bỏ qua điều đó ngay bây giờ, mặc dù...

Layout sử dụng thuộc tính absolute 

Bạn có thể tạo ra một layout hai dòng theo cách cổ điển với thuộc tính absolute nếu bạn dùng những dòng HTML dưới đây:

​
<div id="navigation">
    <ul>
        <li><a href="this.html">This</a></li>
        <li><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
    </ul>
</div>

<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>
​

Chúng ta đang thực hiện theo cách xưa cũ và chỉ sử dụng thẻ div nên không cải thiện được quá nhiều thứ, nhưng Sectioning sẽ trông quyến rũ hơn.

 Và nếu bạn áp dụng CSS dưới đây:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}

Bạn thấy rằng thẻ navigation sang trái và độ rộng 200pixels. Bởi vì navigation được đặt thuộc tính absolute, không có gì thực hiện với phần còn lại của trang vậy nên mọi thứ cần được set lề trái và độ rộng tổng cộng của content của navigation bar.

Thật dễ dàng! Và bạn không bị giới hạn trong cách tiếp cận hai column này. Với việc đặt ví trí khôn khéo, bạn có thể bố trí nhiều blocks như bạn thích. Nếu bạn muốn thêm một cột thứ 3, ví dụ, bạn có thể thêm một thẻ "navigation2"  tới HTML và thay đổi CSS thành:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

#content {
    margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin to 200px */
}

Nhược điểm duy nhất để đặt box absolute là bởi vì nó theo đặc thù riêng của nó, không có cách nào để xác định chính xác nơi nó kết thúc. Nếu bạn đã sử dụng ví dụ bên trên và tất cả trang của bạn có một navigation bar nhỏ và khu vực content rộng, sẽ ok, nhưng, trường hợp đặc biệt khi bạn dùng thuộc tính relative cho độ rộng width và kích thước size, bạn thường khó thay đổi mọi thứ, như footer,dưới cùng của những box này. Nếu bạn muốn làm một điều gì đấy, một cách có thể được dử dụng đó là float đoạn của bạn, thay vì absolute chúng hoàn toàn.

Float

Một box float sẽ trôi sang trái hoặc phải của dòng, với nội dung xung quanh hướng trôi của nó.

Float là cách bình thường để dịch chuyển các khối nhỏ hơn trong một trang, chẳng hạn như đẩy liên kết navigation về bên phải của một vùng chứa, nhưng nó cũng có thể được sử dụng với các khối lớn hơn, chẳng hạn như các cột điều hướng.

Sử dung Float, bạn có thế dùng  float: left hoặc float: right. 

Cùng với mẫu HTML trước, bạn có thể áp dụng những CSS dưới đây:

#navigation {
    float: left;
    width: 200px;
}

#navigation2 {
    float: right;
    width: 200px;
}

#content {
    margin: 0 200px;
}

Sau đó, nếu bạn không muốn đoạn tiếp theo bao quanh đối tượng float, bạn có thể sử dụng thuộc tính clear:

  • clear: left sẽ làm trống bên trái box float
  • clear: right sẽ làm trống bên phải box float
  • clear: both sẽ làm trống cả bên trái và bên phải của box float.

 Vì vậy, ví dụ như, bạn muốn một footer trong trang của bạn, bạn có thể thêm một đoạn HTML...

​
<div id="footer">
    <p>Footer! Hoorah!</p>
</div>
​

...và sau đó thêm CSS sau:

#footer {
    clear: both;
}

Và bạn có được điều mình muốn. Một footer mà nó sẽ xuất hiện bên dưới cột, không liên quan đến chiều dài của bất cứ gì của cột trên.

Đây là một hướng dẫn cơ bản về thuộc tính position và float, với sự nhấn mạnh vào các phần lớn của trang, nhưng nhớ rằng, những phương pháp sau đây có thể áp dụng ảnh hưởng tới bất kì box nào mà không thuộc chúng. Với một sự kết hợp giữa position, float, margins, padding và borders, bạn có thể thực hiện bất kì một thiết kế web nào mà bạn nghĩ ra. Một phương pháp tốt để học chứ? 
Thay đổi! Hành động! Và tiến lên!

 Bài viết được dịch từ trang: https://htmldog.com