CSS - Bố cục: Hướng dẫn chi tiết cho người mới bắt đầu

Yêu cầu trước

Trước khi chúng ta nhảy vào thế giới thú vị của các bố cục CSS, hãy chắc chắn rằng chúng ta đang cùng trên một trang. Để nhận được nhiều lợi ích nhất từ hướng dẫn này, bạn nên có một kiến thức cơ bản về HTML và CSS. Đừng lo lắng nếu bạn không phải là chuyên gia - chúng ta sẽ học từng bước!

Bố cục CSS - Lưu thông bình thường

Hãy bắt đầu từ những điều cơ bản. Trong CSS, lưu thông bình thường là như chế độ mặc định cho cách các yếu tố xuất hiện trên trang web. Nó giống như cách từ ngữ chảy trong một cuốn sách - từ trái sang phải, từ trên xuống dưới.

Dưới đây là một ví dụ đơn giản:

<div>
<p>Đây là một đoạn văn.</p>
<p>Đây là đoạn văn khác.</p>
</div>

div {
width: 300px;
border: 1px solid đen;
}

Trong ví dụ này, các đoạn văn sẽ được堆叠 dọc trong div, một sau một. Đó chính là lưu thông bình thường trong hành động!

Bố cục CSS - Flexbox

Bây giờ, hãy thử sức với Flexbox! Flexbox giống như một cây c这支魔法 cho việc tạo các bố cục linh hoạt. Nó đặc biệt hữu ích cho việc căn chỉnh các mục trong một containner.

Dưới đây là một chút về Flexbox:

<div class="container">
<div class="item">Mục 1</div>
<div class="item">Mục 2</div>
<div class="item">Mục 3</div>
</div>

.container {
display: flex;
justify-content: space-between;
}

.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: trắng;
display: flex;
align-items: center;
justify-content: center;
}

Trong ví dụ này, chúng ta đã tạo một containner flex với ba mục flex. Thuộc tính justify-content: space-between; phân bố các mục đều nhau trong containner. Đ酷, phải không?

Bố cục CSS - Lưới

Bố cục lưới giống như người cousin có cấu trúc hơn của Flexbox. Nó hoàn hảo cho việc tạo các bố cục hai chiều phức tạp.

Hãy lưới hóa nó:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.grid-item {
background-color: #2ecc71;
color: trắng;
padding: 20px;
text-align: center;
}

Điều này tạo ra một lưới 3 cột với các cột có độ rộng bằng nhau và một khe cách 10px giữa các mục. Nó giống như phép thuật, phải không?

Bố cục CSS - Floats

Floats giống như những người bạn cool của thời học cũ trong bố cục CSS. Mặc dù chúng không còn流行 như trước, nhưng chúng vẫn hữu ích trong một số tình huống.

Dưới đây là một ví dụ về float:

<div class="container">
<img src="cat.jpg" alt="Một chú mèo cute" class="float-left">
<p>Đây là một đoạn văn sẽ quấn quanh hình ảnh nổi.</p>
</div>

.float-left {
float: left;
margin-right: 10px;
}

Điều này sẽ làm cho hình ảnh nổi sang bên trái, với đoạn văn quấn quanh nó. Nó giống như hình ảnh đang bơi trong một biển từ!

Bố cục CSS - Định vị

Định vị trong CSS giống như chơi một trò chơi坐标. Bạn có thể đặt các yếu tố chính xác nơi bạn muốn chúng trên trang.

Hãy định vị cái gì đó:

<div class="container">
<div class="box">Tôi đã được định vị!</div>
</div>

.container {
position: relative;
height: 200px;
border: 1px solid đen;
}

.box {
position: absolute;
top: 50px;
left: 50px;
background-color: #e74c3c;
color: trắng;
padding: 10px;
}

Điều này định vị hộp 50 pixel từ trên và bên trái của tổ tiên được định vị gần nhất (trong trường hợp này, containner).

Bố cục CSS - Bố cục nhiều cột

Bố cục nhiều cột giống như chia nội dung của bạn thành các cột theo phong cách báo chí. Nó rất tốt cho việc cải thiện khả năng đọc trên màn hình rộng.

Dưới đây là cách nó hoạt động:

<div class="multi-column">
<p>Đây là một đoạn văn dài của văn bản sẽ bị chia thành nhiều cột...</p>
</div>

.multi-column {
column-count: 3;
column-gap: 20px;
}

Điều này chia nội dung thành ba cột với một khe cách 20px giữa chúng. Nó giống như bố cục báo chí tức thì!

Bố cục CSS - Thiết kế响应式

Thiết kế响应式 là về việc làm cho trang web của bạn trông đẹp trên bất kỳ thiết bị nào, từ điện thoại di động nhỏ đến màn hình desktop lớn.

Dưới đây là một ví dụ về thiết kế响应式 đơn giản:

<div class="container">
<div class="box">Hộp响应式</div>
</div>

.container {
width: 80%;
margin: 0 tự động;
}

.box {
width: 100%;
padding: 20px;
background-color: #9b59b6;
color: trắng;
}

@media (min-width: 600px) {
.box {
width: 50%;
}
}

Điều này làm cho hộp full-width trên màn hình nhỏ, nhưng nửa-width trên màn hình rộng hơn 600px. Nó giống như bố cục của bạn đang làm yoga, co giãn và thích ứng với các kích thước màn hình khác nhau!

Bố cục CSS - Truy vấn媒体

Truy vấn媒体 là thành phần bí mật của thiết kế响应式. Chúng cho phép bạn áp dụng các phong cách khác nhau dựa trên các đặc điểm của thiết bị.

Dưới đây là một ví dụ:

body {
background-color: #3498db;
color: trắng;
}

@media (max-width: 600px) {
body {
background-color: #e74c3c;
}
}

@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: #2ecc71;
}
}

Điều này thay đổi màu nền dựa trên chiều rộng màn hình. Nó giống như trang web của bạn đang chơi dress-up, thay đổi trang phục để phù hợp với các dịp khác nhau!

Dưới đây là bảng tóm tắt các phương pháp bố cục chúng ta đã xem xét:

Phương pháp Bố cục	Tốt nhất cho trường hợp sử dụng	Các thuộc tính chính
Lưu thông bình thường	Bố cục mặc định	Không có
Flexbox	Bố cục một chiều	display: flex, justify-content, align-items
Lưới	Bố cục hai chiều	display: grid, grid-template-columns, grid-template-rows
Floats	Quấn văn bản xung quanh hình ảnh	float, clear
Định vị	Đặt chính xác các yếu tố	position, top, right, bottom, left
Bố cục nhiều cột	Văn bản trong các cột báo chí	column-count, column-gap
Thiết kế响应式	Thích ứng với các kích thước màn hình khác nhau	@media queries, width百分比
Truy vấn媒体	Áp dụng phong cách dựa trên đặc điểm thiết bị	@media

Nhớ rằng, bố cục CSS giống như nấu ăn - nó cần thực hành để thành thạo, nhưng một khi bạn đã làm chủ, bạn có thể tạo ra những điều kỳ diệu. Vậy đừng ngại thử nghiệm và vui vẻ với nó!

Credits: Image by storyset