Một trong những thứ quan trọng nhất của Lập trình Front end đó chính là xây dựng bố cục, căn chỉnh các phần tử để tạo ra một bố cục thống nhất, mạch lạc, thân thiện với người dùng.
Để làm được điều đó, CSS có một số thuộc tính có thể được sử dụng để căn chỉnh các phần tử trên trang web.
1. Căn chỉnh Text
Văn bản bên trong các phần tử cấp khối (Block – element) có thể được căn chỉnh bằng cách thiết lập thuộc tính text-align đúng cách.
HTML:
<h1>Tiêu đề: Căn chỉnh văn bản</h1>
<p>Đây là một đoạn văn bản sẽ được căn chỉnh đều 2 bên (như trong tài liệu word). Để làm như thế, chúng ta sử dụng thuộc tính text-align trong CSS và thiết lập giá trị justify cho nó (Ngoài ra còn có các giá trị khác như: left, right, center)</p>CSS:
h1 {
text-align: center;
}
p {
width: 300px;
text-align: justify;
}Kết quả chúng ta được như hình dưới đây:
Để hiểu rõ hơn về việc căn chỉnh text, vui lòng đọc lại bài viết CSS Text bạn nhé.
2. Căn giữa với thuộc tính margin
Căn giữa của phần tử cấp khối (block-level) là một trong những kỹ thuật có ý nghĩa quan trọng nhất của thuộc tính margin trong CSS.
Ví dụ: Bạn có thể căn chỉnh thẻ div (theo chiều ngang) ở giữa bằng cách thiết lập thuộc tính margin thành auto.
HTML:
<div>Thẻ DIV này sẽ được căn giữa theo chiều ngang</div>CSS:
div {
width: 50%;
margin: 0 auto;
padding: 15px;
background: yellow;
}Kết quả ta được như hình:
Lưu ý: Giá trị tự auto của thuộc tính margin sẽ không hoạt động trong IE 8 và các phiên bản cũ hơn, trừ khi <!DOCTYPE> được chỉ định.
3. Căn chỉnh sử dụng thuộc tính position
Thuộc tính postion trong CSS kết hợp với thuộc tính left, right, top và bottom có thể được sử dụng để căn chỉnh các phần tử theo khung nhìn của tài liệu hoặc phần tử cha chứa nó.
HTML:
<p class="up">Đoạn văn bản này được căn ở ngoài cùng bên trái</p>
<p class="down">Đoạn văn bản này được căn ở ngoài cùng bên phải</p>CSS:
p {
width: 200px;
padding: 10px;
}
.up {
background: red;
position: absolute;
left: 0;
}
.down {
background: yellow;
position: absolute;
right: 0;
}Kết quả ta được như hình:
Để tìm hiểu thêm về cách định vị với thuộc tính position, hãy xem bài viết Position trong CSS
4. Căn chỉnh với thuộc tính float
Như bạn đã được học trong bài thuộc tính Float trong CSS:
- Thuộc tính float CSS có thể được sử dụng để căn chỉnh một phần tử ở bên trái (left) hoặc bên phải (right) của khối chứa nó.
Do đó, nếu một phần tử được chuyển sang bên trái, nội dung sẽ chảy dọc theo bên phải của nó.
Ngược lại, nếu phần tử được đẩy sang bên phải, nội dung sẽ chảy dọc theo bên trái của nó.
HTML:
<div class="red">Khối được đẩy sang bên trái</div>
<div class="yellow">Khối được đẩy sang bên phải</div>CSS:
div {
width: 200px;
padding: 10px;
}
div.red {
float: left;
background: red;
}
div.yellow{
float: right;
background: yellow;
}Ta được kết quả như hình:
5. Clear float
Một trong những điều khó hiểu nhất khi làm việc với các bố cục dựa trên float là phần tử cha tự động bị thu gọn.
Phần tử cha không tự động lớn lên để chứa các phần tử nổi.
Mặc dù, điều này không phải lúc nào cũng rõ ràng nếu phần tử cha không chứa bất kỳ hình nền hoặc đường viền trực quan nào, nhưng điều quan trọng là phải biết và phải xử lý để ngăn chặn vấn đề bố cục bị phá vỡ.
Hãy xem hình minh họa bên dưới:
Bạn có thể thấy phần tử div không tự động lớn lên để chứa các ảnh được float. Sự cố này có thể được khắc phục bằng cách clear float sau các phần tử float trong vùng chứa nhưng trước thẻ đóng của phần tử vùng chứa.
Để làm được điều này, chúng ta có 3 giải pháp:
Giải pháp #1: Float container
Cách dễ nhất để khắc phục sự cố này là áp dụng thuộc tính float cho phần tử cha chứa các phần tử float.
HTML:
<div class="container">
<p class="red">Đẩy phần tử sang trái</p>
<p class="yellow">Đẩy phần tử sang phải</p>
</div>CSS:
.container{
float: left;
background: grey;
border: 1px solid black;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
}
.red {
float: left;
background: red;
}
.yellow {
float: right;
background: yellow;
}Kết quả ta được như hình:
Cảnh báo: Giải pháp này sẽ chỉ hoạt động trong một số trường hợp hạn chế, vì việc áp dụng float cho phần tử cha có thể tạo ra kết quả không mong muốn.
Giải pháp #2: Sử dụng phần tử DIV trống
Đây là một cách cũ nhưng là một giải pháp dễ dàng và hoạt động trên mọi trình duyệt.
HTML:
<div class="container">
<p class="red">Đẩy phần tử sang trái.</p>
<p class="yellow">Đẩy phần tử sang phải</p>
<div class="clearfix"> </div>
</div>CSS:
.container{
background: grey;
border: 1px solid black;
}
.clearfix {
clear: both;
visibility: hidden;
height: 0;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
}
.red {
float: left;
background: red;
}
.yellow {
float: right;
background: yellow;
}Kết quả ta được như hình:
Giải pháp #3: Sử dụng phần tử giả :after
Phần tử giả :after kết hợp với thuộc tính content đã được sử dụng rất rộng rãi để giải quyết các vấn đề về float.
Đây là giải pháp:
HTML:
<div class="container clearfix">
<div class="red">Floated to left.</div>
<div class="yellow">Floated to right.</div>
</div>
<p><strong>Chú ý:</strong> IE 7 trở về trước không hỗ trợ phần tử :after, IE 8 có hỗ trợ nhưng phải khai báo <code>!DOCTYPE</code> rõ ràng </p>CSS:
.container{
background: grey;
border: 1px solid black;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container div {
width: 200px;
margin: 10px;
padding: 10px;
}
div.red {
float: left;
background: red;
}
div.yellow {
float: right;
background: yellow;
}Kết quả ta được như hình:
Như vậy, qua bài viết này, bạn đã biết cách căn chỉnh các phần tử với CSS, các sắp xếp bố cục với những thuộc tính cốt lõi của CSS.
Ngoài ra, bạn còn học được 3 giải pháp để giải quyết vấn đề phần tử bị tràn với clear float. Đây chắc chắn là những phương pháp cực kỳ hữu ích giúp bạn kiểm soát bố cục tốt như một lập trình viên Front end thực thụ.
Chúc bạn sớm trở thành một lập trình viên giỏi.
Học tiếp: Pesudo class
Đọc thêm: Float trong CSS