CSS - Đối chiếu: Khắc Phục Nghệ Thuật Định Vị Các Element

Xin chào các pháp sư thiết kế web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị qua thế giới của CSS alignment. Là người bạn hàng xóm thân thiện của bạn trong lĩnh vực máy tính, tôi ở đây để hướng dẫn bạn qua từng bước nhỏ để các element web của bạn nằm đúng vị trí. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ định vị các element như một chuyên gia!

CSS - Align

CSS Align - Thuộc tính position

Hãy bắt đầu với nền tảng của việc đối chiếu: thuộc tính position. Chiếc明珠 nhỏ này giống như GPS của các element web của bạn, chỉ cho chúng biết chính xác nơi chúng cần đi trên trang.

Định vị cơ bản

.element {
position: static | relative | absolute | fixed | sticky;
}

Dưới đây là giải thích của từng giá trị:

static: Đây là mặc định. Nó giống như nói với element của bạn, "Chỉ cần đi theo dòng chảy, bạn nhé!"
relative: Định vị element so với vị trí bình thường của nó. Nó giống như nói, "Di chuyển một chút, nhưng nhớ vị trí bạn đã đến."
absolute: Định vị element so với tổ tiên đã được định vị gần nhất của nó. Nó giống như, "Bạn tự do! Đi bất kỳ đâu bạn muốn... trong một giới hạn hợp lý."
fixed: Định vị element so với cửa sổ trình duyệt. Nó giống như dán một note post-it lên màn hình của bạn.
sticky: Là sự kết hợp giữa relative và fixed. Nó giống như một con báo chameleon, thay đổi hành vi khi bạn cuộn.

Hãy xem một ví dụ:

<div class="container">
<div class="box absolute">Tôi là absolute!</div>
<div class="box relative">Tôi là relative!</div>
</div>

.container {
position: relative;
height: 200px;
border: 2px solid black;
}

.box {
width: 100px;
height: 100px;
background-color: lightblue;
}

.absolute {
position: absolute;
top: 50px;
left: 50px;
}

.relative {
position: relative;
top: 20px;
left: 20px;
}

Trong ví dụ này, khung absolute được định vị 50px từ trên và trái của tổ tiên đã được định vị của nó (container), trong khi khung relative được dịch chuyển 20px từ vị trí bình thường của nó.

CSS Align - Thuộc tính float

Tiếp theo, chúng ta có thuộc tính float. Hãy nghĩ về nó như việc cấp cho các element của bạn những áo phao nhỏ và để chúng nổi lên bên trái hoặc bên phải của container của chúng.

.element {
float: left | right | none;
}

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

<div class="container">
<img src="cute-puppy.jpg" class="float-left">
<p>Hãy nhìn chú chó dễ thương này nổi lên bên trái!</p>
</div>

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

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

CSS Align - Thuộc tính text-align

Bây giờ, hãy nói về việc đối chiếu văn bản. Thuộc tính text-align giống như một người chăn cừu nhỏ, dẫn dắt các từ của bạn đến nơi bạn muốn chúng đến.

.element {
text-align: left | right | center | justify;
}

Dưới đây là cách bạn có thể sử dụng nó:

<p class="center-text">Tôi được đối chiếu ở giữa và tôi tự hào về điều đó!</p>
<p class="right-text">Tôi thích ở bên phải.</p>
<p class="justify-text">Tôi được căn chỉnh, trải đều từ mép này sang mép khác. Thật sự rất thoải mái, phải không?</p>

.center-text { text-align: center; }
.right-text { text-align: right; }
.justify-text { text-align: justify; }

CSS Align - Thuộc tính padding

Padding giống như việc cấp cho các element của bạn một không gian cá nhân. Nó là khoảng cách giữa nội dung và viền.

.element {
padding: 10px; /* Tất cả các bên */
/* hoặc */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}

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

<div class="card">
<h2>Xin chào!</h2>
<p>Thẻ này có một chút không gian thở.</p>
</div>

.card {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}

Điều này tạo ra một thẻ có không gian rộng rãi với các góc bo tròn. Nó giống như việc cấp cho nội dung của bạn một cái gối��適 để nghỉ ngơi!

CSS Align - Đối chiếu văn bản

Đối chiếu văn bản là một nhiệm vụ phổ biến, và có nhiều cách để đạt được điều đó. Hãy xem xét một vài cách:

<div class="center-me">
<p>Tôi được đối chiếu horizontially!</p>
</div>

.center-me {
text-align: center; /* Cho các element inline */
}

/* Cho các element block-level */
.center-me {
width: 300px;
margin: 0 auto;
}

Nhớ rằng, text-align: center hoạt động cho nội dung inline, trong khi margin: 0 auto rất tốt cho việc đối chiếu các element block-level với chiều rộng được xác định.

CSS Align - Thuộc tính justify-content

Thuộc tính justify-content là một ngôi sao trong flexbox. Nó giống như một nhà tổ chức master cho các item flex của bạn.

.container {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Hãy xem nó trong hành động:

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

.flex-container {
display: flex;
justify-content: space-around;
background-color: #f0f0f0;
padding: 10px;
}

.flex-item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 5px;
}

Điều này tạo ra một container flex với các item cách đều với khoảng cách bằng nhau xung quanh chúng. Nó giống như việc cấp cho mỗi item của bạn một sân khấu nhỏ để tỏa sáng!

CSS Align - Các thuộc tính liên quan

Dưới đây là bảng handy của các thuộc tính liên quan đến đối chiếu:

Thuộc tính	Mô tả	Ví dụ
`position`	Chỉ định loại định vị cho một element	`position: relative;`
`float`	Chỉ định cách một element nên nổi	`float: left;`
`text-align`	Chỉ định đối chiếu horizontial của văn bản	`text-align: center;`
`padding`	Chỉ định padding bên trong một element	`padding: 10px 20px;`
`margin`	Chỉ định margin bên ngoài một element	`margin: 0 auto;`
`justify-content`	Đối chiếu các item flex horizontially	`justify-content: space-between;`
`align-items`	Đối chiếu các item flex verticually	`align-items: center;`
`vertical-align`	Chỉ định đối chiếu verticual của một element inline hoặc table-cell	`vertical-align: middle;`

Và đó là tất cả, các bạn! Bạn đã nâng cấp kỹ năng đối chiếu CSS của mình. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngại thử nghiệm với các thuộc tính này. Trước khi bạn biết điều gì, bạn sẽ tạo ra các trang web hoàn hảo, đẹp mắt làm cho các nhà phát triển khác ghen tị.

Chúc mừng coding, và mong rằng các element của bạn luôn được đối chiếu hoàn hảo!

Credits: Image by storyset