----
2.6.2 Các phương pháp tạo bố cục
Ở phần trước đã tìm hiểu về các loại bố cục, phần này sẽ tập
trung vào khía cạnh thực hành, làm các bố cục gồm hai và ba cột bằng CSS. Các
hướng dẫn trong phần này chỉ ở mức cơ bản, tập trung vào những vấn đề quan trọng
của mỗi kĩ thuật. Để dễ dàng quan sát kết quả, nên sử dụng thuộc tính outline để tạo các đường viền xung quanh
các vùng. Khác với border, thuộc tính outline
không được tính vào kích thước của một phần tử, do vậy không làm ảnh hưởng đến
bố cục.
Phần này đề cập tới các mẫu và các kĩ thuật sau,
– Tạo bố cục hai và ba cột bằng kĩ thuật float
– Tạo bố cục không phụ thuộc vào mã HTML bằng kĩ thuật float
và margin
– Tạo bố cục nhiều cột bằng kĩ thuật position
– Một số kĩ thuật
khác: Column, Flexbox, Grid layout system, Regions và Exclusions
2.6.3 Tạo bố cục nhiều cột
bằng kĩ thuật float
Ưu điểm của kĩ thuật float so với việc thiết lập vị trí cố định
(tuyệt đối) là ngăn chặn tình trạng chồng lấn giữa các vùng nội dung, và dễ dàng
thiết lập footer ở cuối trang.
Hạn chế của kĩ thuật float là nó phụ thuộc vào thứ tự xuất
hiện của các phần tử trong mã nguồn. Tuy nhiên, có thể khắc phục hạn chế này bằng
kĩ thuật margin với giá trị âm.
Tạo hai cột, kiểu fluid
Trong bài Lab2.5c, đã thực hành tạo bố cục hai cột, bằng
cách float cột (phần tử) đầu tiên về phía trái, thiết lập margin cho cột (phần
tử) thứ hai để nó hiển thị ở phía phải.
Trong ví dụ sau, sẽ thực hiện float tất cả các cột (phần tử)
về cùng một phía. Có thể float về phía trái, hoặc phía phải, tùy theo thứ tự của
chúng trong mã nguồn và yêu cầu thực tế.
Cách làm: thiết lập độ rộng cho các cột, float tất cả về
phía trái, thiết lập thuộc tính clear cho footer để nó luôn nằm ở cuối trang.
[HTML]
<div id="header">Phần đầu trang (menu, logo,
quảng cáo, tiêu đề)</div>
<div id="main">Phần nội dung chính của
trang</div>
<div id="extras">Các liên kết, các mục
tin</div>
<div id="footer">Thông tin bản quyền</div>
[CSS]
* {
outline: 1px
dashed red;
}
#main {
width: 60%;
margin: 0 5%;
float: left;
}
#extras {
width: 25%;
margin: 0 5% 0
0;
float: left;
}
#footer {
clear: left;
}
Xem hình minh họa,
Một số thông tin thêm,
– Để đơn giản, trong phần mã CSS đã lược bỏ đi rất nhiều đoạn
mã định dạng, ví dụ về màu nền, padding, định dạng văn bản; bạn có thể tự thêm
vào các định dạng này, để có được giao diện theo ý muốn
– Bố cục của trang gồm bốn phần (header, main, extras,
footer), mỗi phần nằm trong một phần tử div,
thứ tự của các phần này được thể hiện trong mã HTML
– Cả phần main và extras đều được float sang trái, tuy
nhiên, cũng có thể cho một cái float sang trái, cái còn lại float sang phải
cũng được kết quả tương tự. Để float, cần thiết lập độ rộng cho chúng
– Thiết lập margin phía phải và trái 5% cho phần main, phần
extras chỉ cần thiết lập margin phía phải; margin phía trên của main và extras
đều được thiết lập là 0 để căn đều phía trên
– Thiết lập thuộc tính clear cho vùng footer để nó không còn
bị ảnh hưởng bởi thuộc tính float, và sẽ luôn nằm ở cuối trang
– Có thể sử dụng hai thuộc tính max-width và min-width để
khống chế các cột, không bị quá rộng hoặc quá hẹp
Tạo hai cột, kiểu fixed
Cách làm: bọc nội dung mỗi vùng bằng một div; thiết lập độ rộng cho từng cột, thực
hiện float các cột. Bọc toàn bộ nội dung của trang bằng một div khác (#wrapper), xác định độ rộng cho div này. Độ rộng được thiết lập bằng đơn
vị pixel. Clear phần footer để nó luôn nằm ở cuối trang.
[HTML]
<div id="wrapper">
<div
id="header">Phần đầu trang (menu, logo, quảng cáo, tiêu
đề)</div>
<div id="main">Phần
nội dung chính của trang</div>
<div
id="extras">Các liên kết, các mục tin</div>
<div
id="footer">Thông tin bản quyền</div>
</div>
[CSS]
#wrapper {
width: 960px;
}
#main {
width: 650px;
margin: 0 20px;
float: left;
}
#extras {
width: 250px;
margin: 0 20px 0
0;
float: left;
}
#footer {
clear: left;
}
Xem hình minh họa,
Một số thông tin thêm,
– Toàn bộ nội dung của trang được bọc trong div #wrapper, độ rộng của #wrapper thường là 960px
– Không để chiều rộng của các cột (tính cả margin, border và
padding của mỗi cột) vượt quá chiều rộng của wrapper, nếu vượt quá, sẽ có cột bị
rơi xuống phía dưới. Đối với mỗi cột, khi tăng border và padding thì nhớ trừ
vào độ rộng của vùng nội dung, để tổng kích thước của cột vẫn giữ nguyên
Tạo hai cột, kiểu fixed, căn giữa
Cách làm: tương tự như tạo hai cột, kiểu fixed, chỉ thực hiện
thêm việc căn giữa div #wrapper. Để
căn giữa, thiết lập margin trái/phải là auto.
[CSS]
#wrapper {
width: 960px;
margin: 0 auto;
}
Xem hình minh họa,
Thông tin thêm,
– Nếu muốn phần header và footer trải rộng hết cửa sổ trình
duyệt, cần bỏ div #header và div #footer nằm ra ngoài div #wrapper
[HTML]
<div id="header">Phần
đầu trang (menu, logo, quảng cáo, tiêu đề)</div>
<div
id="wrapper">
<div
id="main">Phần nội dung chính của trang</div>
<div
id="extras">Các liên kết, các mục tin</div>
</div>
<div
id="footer">Thông tin bản quyền</div>
-----------
Cập nhật [03/12/2019]
-----------
Xem thêm: Học làm web (49) - CSS căn bản (25)