Privacy & Cookies
This site uses cookies. By continuing, you agree to their use. Learn more, including how to control cookies.
Từ sách CSS Mastery Advance mình biết được rằng có 1 số cách để thiết kế layout trang web đúng chuẩn. Sau đây mình sẽ trình bày các cách đó:
- Fixed width:
- Nghe cái tên thôi thì cũng biết là phải fix cứng chiều dài của layout rồi.
- Thường thì ta sẽ bỏ tất cả các nội dung chính của 1 trang web vào 1 thẻ div để tiện tùy chỉnh. Ví dụ
Để nội dung trên 1 trang web sao cho đẹp mắt thì ta thường đặt phần nội dung này vào giữa trang. Ngay cả trang webtạo ra blogpost này cũng đặt ở giữa màn hình web browser.
#wrapper{width: 720px; margin: 0 auto}
Nếu như bạn không thích cách dùng margin để cennter 1 trang thì có thể dùng position và negative margin:
#wrapper{ width: 720px; position: relative; left: 50%; margin-left: -360px}
Khi dùng left: 50% tức là phần đỉnh bên trái trên cùng của wrapper sẽ ở giữa trang, nhưng cái ta muốn là điểm trên cùng ở giữa wrapper sẽ ở giữa trang vì thế ta dùng thêm margin-left: -360px để dịch thẻ div sang bên trái thêm 360px;
Điều quan trọng nhất của fixed width layout là là độ dài của thẻ wrapper sẽ không đổi dù ở trên màn hình nào, và được cố định, không di chuyển được.
Float layout dùng atttribute float để sắp xếp các thẻ hiển thị nội dung trong thẻ bự wrapper. Ví dụ:
#wrapper{position: relative; width: 720px;}
#main_content{width:520px; float:right}
#side_bar{width:180px; float:left}
=========> Lúc này thẻ main_content sẽ bị trượt về bên phải của trang, thẻ side_bar sẽ trượt về bên trái của trang.
3. Liquid Layout [Fluid]Liquid Layout dùng % để set width của các thẻ div. Ví dụ:
#wrapper{ width: 85%}
#main_content{width: 80%; float:right}
#side_bar{width: 15%; float:left}
% này dựa trên độ dài của parent element gần nhất. Tức là thẻ wrapper sẽ chiếm 85% không gian màn hình.
VIệc dùng liquid layout cho phép tùy biến trang dựa trên màn hình, màn hình nhỏ thì trang nhỏ, màn hình thì trang cũng lớn theo. Nhưng có 1 điều khá bức bối là khi màn hình càng lớn thì dòng chữ sẽ càng dài ra dẫn tới đọc khó hơn, có thể hạn chế việc này bằng cách cũng set margin và padding theo %, khi đó tại màn hình lớn margin và padding cũng lớn tương ứng để hạn chế việc dòng chữ quá dài.
Thay vì dựa trên độ dài màn hình như liquid layout, elastic layout dựa trên font-size. Việc này giữ cho độ dài của dòng ở mức chấp nhận được, đặc biệt hữu ích đối với những người bị giảm thị lực và rối loạn nhận thức.
body {
font-size: 62.5%;
}
#wrapper {
width: 72em;
margin: 0 auto;
text-align: left;
}
Ngoài ra còn có elastic-liquid hybird là sự kết hợp của elastice layout với set max-width bằng % ở các thẻ div.
Các Layout này có những ưu và nhược điểm riêng của nó, hiện thời mình không nghĩ là đủ kiển thức để mô tả nó tốt xấu như thế nào cả. Tuy nhiên có những trang đã có so sánh và có thể xem để biết từ từ về nó. ;]]
Tham khảo:
Fixed vs. Fluid vs. Elastic Layout