Trong bài viết này, Kiyoshi sẽ nói về cách căn chỉnh các phần tử bằng CSS một cách dễ hiểu đối với người mới học.
Dưới đây là các phương pháp căn chỉnh các phần tử vào vị trí mà bạn muốn trong CSS.
● Cách 1: Thuộc tính FLOAT
Thuộc tính float cho phép bạn căn chỉnh các phần tử sang bên trái hoặc bên phải.
Sử dụng thuộc tính này để đặt các phần tử cận kề.
<style>
.box1 {
float: left;
}
.box2 {
float: left;
}
</style>
<div class="box1">Box1</div>
<div class="box2">Box2</div>Ví dụ này cho thấy box1 và box2 nằm sát nhau ở phía bên trái.
● Cách 2: Hiển thị: inline-block
Bằng cách thiết lập thuộc tính display thành inline-block, bạn có thể xếp các phần tử theo chiều ngang như các phần tử inline.
<style>
.box1, .box2 {
display: inline-block;
}
</style>
<div class="box1">Box1</div>
<div class "box2">Box2</div>Ví dụ này cho thấy box1 và box2 nằm sát nhau ở phía bên trái.
● Cách 3: Hiển thị: flex
Bằng cách sử dụng flexbox, bạn có thể sắp xếp các phần tử một cách linh hoạt.
Bằng cách thiết lập thuộc tính display thành flex, bạn có thể xếp các phần tử con cận kề.
<style>
.container {
display: flex;
}
</style>
<div class="container">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>Ví dụ này cho thấy box1 và box2 trong container nằm sát nhau ở phía bên trái.
● Cách 4: Thuộc tính POSITION
Bằng cách sử dụng thuộc tính position, bạn có thể điều chỉnh vị trí của các phần tử dựa trên vị trí tương đối hoặc tuyệt đối.
Để đặt các phần tử gần nhau, hãy thiết lập position: relative cho phần tử cha và position: absolute cho các phần tử con.
<style>
.container {
position: relative;
}
.box1 {
position: absolute;
left: 0;
}
.box2 {
position: absolute;
left: 100px;
}
</style>
<div class="container">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>Ví dụ này cho thấy box1 và box2 trong container nằm sát nhau ở phía bên trái.
● Cách 5: Bố cục lưới (Grid Layout)
Bằng cách sử dụng Bố cục lưới CSS, bạn có thể dễ dàng sắp xếp các phần tử cận kề.
Đặt thuộc tính display thành grid cho phần tử cha và sử dụng thuộc tính grid-template-columns để xác định chiều rộng của các cột.
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
}
</style>
<div class="container">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>Ví dụ này cho thấy box1 và box2 trong container nằm sát nhau ở phía bên trái.
Tiếp theo, hãy xem các ví dụ ứng dụng thực tế dựa trên những phương pháp này.
● Ví dụ ứng dụng 1: Menu điều hướng
Chúng ta sử dụng thuộc tính float để tạo menu điều hướng.
<style>
.nav {
list-style-type: none;
padding: 0;
}
.nav li {
float: left;
margin-right: 10px;
}
</style>
<ul class="nav">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Về Chúng ta</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>Ví dụ này cho thấy menu điều hướng nằm ngang.
● Ví dụ ứng dụng 2: Bố cục thẻ
Chúng ta sử dụng flexbox để tạo bố cục thẻ.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 200px;
height: 300px;
margin: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
<div class="container">
<div class="card">Thẻ 1</div>
<div class="card">Thẻ 2</div>
<div class="card">Thẻ 3</div>
</div>Ví dụ này cho thấy các thẻ nằm sát nhau theo hàng ngang và tự động xuống dưới khi chiều rộng cửa sổ thay đổi.
● Ví dụ ứng dụng 3: Vùng sidebar và nội dung
Chúng ta sử dụng thuộc tính position để xác định vị trí của vùng sidebar và nội dung.
<style>
.container {
position: relative;
}
.sidebar {
position: absolute;
left: 0;
width: 200px;
height: 100%;
background-color: #f0f0f0;
}
.content {
position: absolute;
left: 200px;
width: calc(100% - 200px);
height: 100%;
}
</style>
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Nội dung</div>
</div>Ví dụ này cho thấy vùng sidebar và nội dung nằm sát nhau.
● Ví dụ ứng dụng 4: Thư viện hình ảnh
Chúng ta sử dụng Bố cục lưới CSS để tạo một thư viện hình ảnh.
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.image {
width: 100%;
height: auto;
}
</style>
<div class="container">
<img class="image" src="image1.jpg" alt="Hình ảnh 1">
<img class="image" src="image2.jpg" alt="Hình ảnh 2">
<img class="image" src="image3.jpg" alt "Hình ảnh 3">
</div>Ví dụ này cho thấy một thư viện hình ảnh ba cột nằm sát nhau.
Kết luận
Trong bài viết này, Chúng ta đã giải thích cách sắp xếp các phần tử bằng CSS một cách chi tiết và dễ hiểu. Mong rằng bài viết sẽ hữu ích cho các bạn.
Bình luận