bài 5 bố cục trang cơ bản - giáo trình fpt
DESCRIPTION
Tìm hiểu về một số Layout phổ biến Layout nổi (float) & Layout tuyệt đối (absolute) Ngăn tràn bố cục Một số vấn đề khi căn chỉnh cột Layout Tìm hiểu về một số Layout phổ biến Layout nổi (float) & Layout tuyệt đối (absolute) Ngăn tràn bố cục Một số vấn đề khi căn chỉnh cột LayoutTRANSCRIPT
![Page 1: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/1.jpg)
Bài 5Bố cục trang cơ bản
![Page 2: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/2.jpg)
NHẮC LẠI BÀI TRƯỚC
Tìm hiểu về box (hộp), cấu trúc box trên một trangcủa trang website:
Tầm quan trọngKích thướcVị trí
Thuộc tính của box:Thuộc tính về nội dungThuộc tính về vị tríThuộc tính về hiển thị
Tìm hiểu về box (hộp), cấu trúc box trên một trangcủa trang website:
Tầm quan trọngKích thướcVị trí
Thuộc tính của box:Thuộc tính về nội dungThuộc tính về vị tríThuộc tính về hiển thị
Bài 5 - Bố cục trang cơ bản 2
![Page 3: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/3.jpg)
MỤC TIÊU BÀI HỌC
Tìm hiểu về một số Layout phổ biếnLayout nổi (float) & Layout tuyệt đối (absolute)Ngăn tràn bố cụcMột số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biếnLayout nổi (float) & Layout tuyệt đối (absolute)Ngăn tràn bố cụcMột số vấn đề khi căn chỉnh cột Layout
Bài 5 - Bố cục trang cơ bản 3
![Page 4: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/4.jpg)
MỘT SỐ BỐ CỤC
![Page 5: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/5.jpg)
BỐ CỤC TRANG (LAYOUT)
Layout thường được chia thành nhiều cộtRõ ràng trong việc thiết kế CSSÁp dụng được tính kế thừaĐảm bảo nội dung được lấp đầyKhông bị xô lệch giữa các box trong layout
Bài 5 - Bố cục trang cơ bản
Layout thường được chia thành nhiều cộtRõ ràng trong việc thiết kế CSSÁp dụng được tính kế thừaĐảm bảo nội dung được lấp đầyKhông bị xô lệch giữa các box trong layout
5
![Page 6: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/6.jpg)
MỘT SỐ DẠNG BỐ CỤC
layout
2 cột
3 cột…
Bài 5 - Bố cục trang cơ bản
layout 3 cột
4 cột
…
6
![Page 7: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/7.jpg)
BỐ CỤC 2 CỘT
http://blog.jingproject.com/
Bài 5 - Bố cục trang cơ bản 7
![Page 10: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/10.jpg)
BỐ CỤC 2 CỘT CHIỀU RỘNG CỐ ĐỊNH
Demo ví dụ trong các file:2_col.html -> cấu trúc và nội dung trang2_col.css -> đặt css để tạo layouttext_n_colors.css -> định style và màu cho text
Demo ví dụ trong các file:2_col.html -> cấu trúc và nội dung trang2_col.css -> đặt css để tạo layouttext_n_colors.css -> định style và màu cho text
Bài 5 - Bố cục trang cơ bản 10
![Page 11: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/11.jpg)
BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị widthSử dụng ràng buộc:
max-width:…;min-width:…;
<body><div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>-->
<div id="header"><!--<địnhnghĩa phần header của trang web>--><div id="header_inner">…</div>
</div><div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-->
<div id="nav_inner">…</div></div><div id="content">
<div id=“content_inner“>…</div></div><div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>-->
<div id="footer_inner“>…</div></div>
</div></body>
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị widthSử dụng ràng buộc:
max-width:…;min-width:…;
11
<body><div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>-->
<div id="header"><!--<địnhnghĩa phần header của trang web>--><div id="header_inner">…</div>
</div><div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-->
<div id="nav_inner">…</div></div><div id="content">
<div id=“content_inner“>…</div></div><div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>-->
<div id="footer_inner“>…</div></div>
</div></body>
![Page 12: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/12.jpg)
TỔ CHỨC BOX
main_wrapper
nav
header
Bài 5 - Bố cục trang cơ bản 12
nav
footer
content
![Page 13: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/13.jpg)
CSS THIẾT LẬP BỐ CỤC 2 CỘT
body {text-align:center;}
#main_wrapper {width:840px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:22%;float:left;}
#content {width:78%;float:left;top:0px;}
#footer {clear:both;}
Bài 5 - Bố cục trang cơ bản 13
body {text-align:center;}
#main_wrapper {width:840px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:22%;float:left;}
#content {width:78%;float:left;top:0px;}
#footer {clear:both;}
![Page 14: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/14.jpg)
BỐ CỤC 2 CỘT LINH HOẠT
Không khai báo giá trị widthSử dụng ràng buộc thiết lập giới hạn kích thước thayđổi của thẻ:
max-width: thiết lập kích thước lớn nhấtmin-width: thiết lập kích thước nhỏ nhất
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị widthSử dụng ràng buộc thiết lập giới hạn kích thước thayđổi của thẻ:
max-width: thiết lập kích thước lớn nhấtmin-width: thiết lập kích thước nhỏ nhất
14
![Page 15: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/15.jpg)
BỐ CỤC LINH HOẠT 2 CỘT
Bài 5 - Bố cục trang cơ bản 15
Nội dung co giãntheo chiều rộng
![Page 16: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/16.jpg)
THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT
body {text-align:center;}
#main_wrapper {width:840px;max-width:960px;min-width:720px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:22%;width:140px;float:left;}
#content {width:78%;float:left;margin-left:140px;top:0px;}
#footer {clear:both;}
Bài 5 - Bố cục trang cơ bản 16
body {text-align:center;}
#main_wrapper {width:840px;max-width:960px;min-width:720px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:22%;width:140px;float:left;}
#content {width:78%;float:left;margin-left:140px;top:0px;}
#footer {clear:both;}
![Page 17: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/17.jpg)
BỐ CỤC 3 CỘT THƯỜNG
Bố cục ba cột có chiều rộng cố định làm việc giốngnhư phiên bản có hai cột.Chia 100% chiều rộng cho ba cột theo tỷ lệ mongmuốn.
Bài 5 - Bố cục trang cơ bản 17
![Page 18: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/18.jpg)
BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị widthSử dụng ràng buộc:
max-width:…;min-width:…;
<body><div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>-->
<div id="header"><!--<địnhnghĩa phần header của trang web>--><div id="header_inner">…</div>
</div><div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-->
<div id="nav_inner">…</div></div><div id="content">
<div id=“content_inner“>…</div></div><div id=“promo"> <!--<địnhnghĩa vùng quảng cáo của trang web>-->
<div id=“promo_inner“>…</div></div><div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>-->
<div id="footer_inner“>…</div></div>
</div></body>
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị widthSử dụng ràng buộc:
max-width:…;min-width:…;
18
<body><div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>-->
<div id="header"><!--<địnhnghĩa phần header của trang web>--><div id="header_inner">…</div>
</div><div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-->
<div id="nav_inner">…</div></div><div id="content">
<div id=“content_inner“>…</div></div><div id=“promo"> <!--<địnhnghĩa vùng quảng cáo của trang web>-->
<div id=“promo_inner“>…</div></div><div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>-->
<div id="footer_inner“>…</div></div>
</div></body>
![Page 19: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/19.jpg)
BỐ CỤC 3 CỘT THƯỜNG
promo
Bài 5 - Bố cục trang cơ bản 19
![Page 20: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/20.jpg)
CSS THIẾT LẬP BỐ CỤC 3 CỘT
body {text-align:center;}
#main_wrapper {width:840px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:18%;float:left;}
#content {width:60%;float:left;}
#promo {width:22%;float:left;}
#footer {clear:both;}
Bài 5 - Bố cục trang cơ bản 20
body {text-align:center;}
#main_wrapper {width:840px;margin-left:auto;margin-right:auto;text-align:left;
}#header {}
#nav {width:18%;float:left;}
#content {width:60%;float:left;}
#promo {width:22%;float:left;}
#footer {clear:both;}
![Page 21: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/21.jpg)
BỐ CỤC 3 CỘT LINH HOẠT
Mọi thứ trở nên phức tạp hơn nếu ta muốn thêmtính linh hoạt và căn giữa cho bố cục ba cột, trongđó vùng nội dung thay đổi chiều rộng khi cửa sổtrình duyệt thay đổi kích thước, nhưng các cột haibên vẫn giữ nguyên kích thước cũChuyên gia CSS Ryan Brill nhanh chóng tìm ra câutrả lời - sử dụng lề âm - và giải pháp của ông trởthành giải pháp CSS cổ điển, hiện được dùng trongvô số trang web có bố cục linh hoạt.
Bài 5 - Bố cục trang cơ bản 21
Mọi thứ trở nên phức tạp hơn nếu ta muốn thêmtính linh hoạt và căn giữa cho bố cục ba cột, trongđó vùng nội dung thay đổi chiều rộng khi cửa sổtrình duyệt thay đổi kích thước, nhưng các cột haibên vẫn giữ nguyên kích thước cũChuyên gia CSS Ryan Brill nhanh chóng tìm ra câutrả lời - sử dụng lề âm - và giải pháp của ông trởthành giải pháp CSS cổ điển, hiện được dùng trongvô số trang web có bố cục linh hoạt.
![Page 22: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/22.jpg)
BỐ CỤC 3 CỘT LINH HOẠT
Bài 5 - Bố cục trang cơ bản 22
![Page 23: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/23.jpg)
CHIỀU NGANG CỦA TRANG
Điều khiển được chiều ngang của những bố cục nàylà chìa khóa xử lý cách chúng hoạt động.Người dùng rất ghét phải cuộn trang sang ngangBạn muốn tạo bố cục mở rộng theo chiều dọc để cóđủ không gian chứa nội dung mà không cần thayđổi chiều ngangTổng kích thước chiều ngang của tất cả các boxtrong trang web không nên vượt quá kích thướcchiều ngang của toàn trang
Điều khiển được chiều ngang của những bố cục nàylà chìa khóa xử lý cách chúng hoạt động.Người dùng rất ghét phải cuộn trang sang ngangBạn muốn tạo bố cục mở rộng theo chiều dọc để cóđủ không gian chứa nội dung mà không cần thayđổi chiều ngangTổng kích thước chiều ngang của tất cả các boxtrong trang web không nên vượt quá kích thướcchiều ngang của toàn trang
Bài 5 - Bố cục trang cơ bản 23
![Page 24: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/24.jpg)
BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI
![Page 25: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/25.jpg)
BỐ CỤC NỔI (FLOAT LAYOUT)
Dễ dàng trong việc căn chỉnhTránh được hiện tượng xô lệch cộtSử dụng thẻ overflow để tránh hiện tượng xô lệchcác cộtOverflow: điều khiển cách tác động của thẻ lên nộidung bên trongSử dụng kèm clear
Dễ dàng trong việc căn chỉnhTránh được hiện tượng xô lệch cộtSử dụng thẻ overflow để tránh hiện tượng xô lệchcác cộtOverflow: điều khiển cách tác động của thẻ lên nộidung bên trongSử dụng kèm clear
Bài 5 - Bố cục trang cơ bản 25
![Page 26: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/26.jpg)
BỐ CỤC NỔI (FLOAT LAYOUT)
overflow
auto
hidden
inherit
Bài 5 - Bố cục trang cơ bản
overflow inherit
scroll
visible
26
![Page 27: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/27.jpg)
BỐ CỤC NỔI (FLOAT LAYOUT)
#nav { width:22%; float:left; }#content { width:78%; float:left; top:0px; }#footer { clear:both; }
Bài 5 - Bố cục trang cơ bản 27
![Page 28: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/28.jpg)
BỐ CỤC TUYỆT ĐỐI (ABSOLUTE LAYOUT)
Các cột được quy định vị trí chính xác trong mọitrường hợp (web browser, độ phân giải …)Các cột hoàn toàn độc lập, không tương tác vớinhau các cột phía dưới không được đẩy xuốngKhắc phục vấn đề này bằng Javascript
Bài 5 - Bố cục trang cơ bản 28
![Page 29: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/29.jpg)
NGĂN TRÀN BỐ CỤC
Thuộc tính overflow của CSS điều khiển cách các thẻlàm việc với nội dung bên trong chúng.Giá trị:
visible: làm cho thẻ mở rộng để bao bọc nội dungbên tronghidden: cột sẽ giữ nguyên chiều rộng của nó và hiểnthị phần ảnh vừa trong nó - không thay đổi kíchthước.
Thuộc tính overflow của CSS điều khiển cách các thẻlàm việc với nội dung bên trong chúng.Giá trị:
visible: làm cho thẻ mở rộng để bao bọc nội dungbên tronghidden: cột sẽ giữ nguyên chiều rộng của nó và hiểnthị phần ảnh vừa trong nó - không thay đổi kíchthước.
Bài 5 - Bố cục trang cơ bản 29
![Page 30: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/30.jpg)
CĂN CHỈNH LAYOUT
![Page 31: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/31.jpg)
CĂN CHỈNH LAYOUT
Không giống như layout xây dựng trên nền bảng(table), layout xây dựng trên nền tảng div khônglàm cho các cột có cùng độ dài.Có thể sửa chiều cao của div, nhưng không nênChiều cao của div (cả trang web) phụ thuộc vào nộidung được đưa raChúng ta cần chỉnh để có ảo giác rằng tất cả các cộtcó cùng chiều cao, bằng cách
Đặt kiểu cột FauxLập trình mở rộng div
Không giống như layout xây dựng trên nền bảng(table), layout xây dựng trên nền tảng div khônglàm cho các cột có cùng độ dài.Có thể sửa chiều cao của div, nhưng không nênChiều cao của div (cả trang web) phụ thuộc vào nộidung được đưa raChúng ta cần chỉnh để có ảo giác rằng tất cả các cộtcó cùng chiều cao, bằng cách
Đặt kiểu cột FauxLập trình mở rộng div
Bài 5 - Bố cục trang cơ bản 31
![Page 32: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/32.jpg)
CỘT FAUX
Phương thức này liên quan tới việc thêm hình nềncho thẻ div wrapper của trangLặp lại hình nền để lấp đầy không gian trống
Bài 5 - Bố cục trang cơ bản 32
![Page 33: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/33.jpg)
CỘT FAUX
#main_wrapper { max-width:960px; min-width:720px; margin-left:auto; margin-right:auto; text-align:left;background:url(../../../chapter_5/code/images/2_col_faux_art.gif)repeat-y;}
#main_wrapper { max-width:960px; min-width:720px; margin-left:auto; margin-right:auto; text-align:left;background:url(../../../chapter_5/code/images/2_col_faux_art.gif)repeat-y;}
Bài 5 - Bố cục trang cơ bản 33
![Page 34: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/34.jpg)
LẬP TRÌNH MỞ RỘNG DIV
Sử dụng Javascript để xác định cột dài nhất và điềuchỉnh cho phù hợp với những cột khácCSS sử dụng DOM để thiết lập thuộc tính thẻ.JavaScript là một ngôn ngữ kịch bản mạnh mẽ cũngcó thể lấy (và thiết lập) tất cả thuộc tính của mọithẻ trong DOM (ví dụ như chiều cao của div) vàthực hiện mọi loại xử lý trên chúng
Sử dụng Javascript để xác định cột dài nhất và điềuchỉnh cho phù hợp với những cột khácCSS sử dụng DOM để thiết lập thuộc tính thẻ.JavaScript là một ngôn ngữ kịch bản mạnh mẽ cũngcó thể lấy (và thiết lập) tất cả thuộc tính của mọithẻ trong DOM (ví dụ như chiều cao của div) vàthực hiện mọi loại xử lý trên chúng
Bài 5 - Bố cục trang cơ bản 34
![Page 35: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/35.jpg)
LẬP TRÌNH MỞ RỘNG DIV
<script type="text/javascript"> window.onload=function(){Nifty("div#nav,div#content,div#promo","medium same-height");Nifty("div#header,div#footer","medium");
AddCss ("../../lib/nifty_corners/css/niftyCorners.css");} </script>
<script type="text/javascript"> window.onload=function(){Nifty("div#nav,div#content,div#promo","medium same-height");Nifty("div#header,div#footer","medium");
AddCss ("../../lib/nifty_corners/css/niftyCorners.css");} </script>
Bài 5 - Bố cục trang cơ bản 35
![Page 36: Bài 5 Bố cục trang cơ bản - Giáo trình FPT](https://reader030.vdocuments.site/reader030/viewer/2022020110/555f0a7fd8b42ae8288b513b/html5/thumbnails/36.jpg)
TỔNG KẾT
Sử dụng loại bố cục layout tùy thuộc vào từng dựán, khối lượng nội dung đưa ra của dự ánSử dụng bố cục nổi có ưu điểm:
Dễ căn chỉnhHạn chế được hiện tượng xô lệch layout
Ngăn tràn bố cục bằng cách sử dụng thuộc tínhoverflowKhông nên đặt chiều cao cho div trong CSSCăn chỉnh chiều cao cột: thường sử dụng phươngpháp cột Faux
Sử dụng loại bố cục layout tùy thuộc vào từng dựán, khối lượng nội dung đưa ra của dự ánSử dụng bố cục nổi có ưu điểm:
Dễ căn chỉnhHạn chế được hiện tượng xô lệch layout
Ngăn tràn bố cục bằng cách sử dụng thuộc tínhoverflowKhông nên đặt chiều cao cho div trong CSSCăn chỉnh chiều cao cột: thường sử dụng phươngpháp cột Faux
Bài 5 - Bố cục trang cơ bản 36