CSS - Kích thước hộp

Xin chào các bạn đang học phát triển web! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS box sizing. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua khái niệm quan trọng này sẽ giúp cuộc sống của bạn trở nên dễ dàng hơn khi thiết kế các bố cục web. Tin tôi đi, một khi bạn thành thạo điều này, bạn sẽ tự hỏi làm thế nào bạn từng sống mà không có nó!

Thuộc tính CSS Box Sizing

Hãy bắt đầu từ cơ bản. Thuộc tính box-sizing trong CSS giống như một枝 cành魔法 quyết định cách tính toán tổng chiều rộng và chiều cao của một phần tử. Nó là một bước đột phá trong thiết kế web, và tôi rất vui được chỉ cho bạn lý do tại sao!

Trong mô hình hộp CSS truyền thống, khi bạn đặt chiều rộng và chiều cao cho một phần tử, không gian thực tế mà nó chiếm có thể lớn hơn do padding và border. Điều này có thể dẫn đến những vấn đề không mong muốn trong bố cục, giống như cố gắng fitting một hộp lớn vào một tủ nhỏ - nó просто không hoạt động!

Đây là nơi box-sizing đến để cứu nguy. Nó cho phép chúng ta kiểm soát cách trình duyệt tính toán kích thước tổng thể của một phần tử.

Các giá trị có thể

Thuộc tính box-sizing có thể lấy ba giá trị khả thi. Hãy cùng phân tích chúng:

Giá trị	Mô tả
content-box	Đây là giá trị mặc định. Chiều rộng và chiều cao chỉ áp dụng cho nội dung của phần tử.
border-box	Chiều rộng và chiều cao bao gồm nội dung, padding và border.
inherit	Phần tử kế thừa giá trị box-sizing từ phần tử cha của nó.

Bây giờ, hãy xem chúng trong hành động với một số ví dụ!

Content-Box (Mặc định)

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: content-box;
}

Trong ví dụ này, tổng chiều rộng của phần tử sẽ là 250px (200px + 20px padding mỗi bên + 5px border mỗi bên), và tổng chiều cao sẽ là 150px. Nó giống như đặt hàng một pizza nhỏ và nhận được một pizza lớn - bất ngờ, phải không?

Border-Box

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}

Bây giờ, với border-box, tổng chiều rộng và chiều cao sẽ chính xác là 200px và 100px, tương ứng. Padding và border được bao gồm trong các kích thước này. Nó giống như đặt hàng một pizza và nhận chính xác những gì bạn yêu cầu - không có bất ngờ!

Áp dụng cho

Thuộc tính box-sizing áp dụng cho tất cả các phần tử chấp nhận chiều rộng hoặc chiều cao. Điều này bao gồm:

• Các phần tử cấp block (như <div>, <p>, <h1>, v.v.)
• Các phần tử inline-block
• Các phần tử của bảng và phần tử table-caption

Điều quan trọng cần lưu ý là nó không áp dụng cho các phần tử inline unless bạn thay đổi thuộc tính display của chúng.

Cú pháp DOM

Trong JavaScript, bạn có thể truy cập và thay đổi thuộc tính box-sizing bằng cách sử dụng DOM. Dưới đây là cách làm:

// Lấy giá trị box-sizing
let boxSizing = element.style.boxSizing;

// Đặt giá trị box-sizing
element.style.boxSizing = 'border-box';

Ví dụ

Hãy cùng kết hợp tất cả với một ví dụ thực tế. Hãy tưởng tượng chúng ta đang tạo một bố cục đơn giản với hai cột bên cạnh nhau.

<div class="container">
<div class="column">Cột 1</div>
<div class="column">Cột 2</div>
</div>

.container {
width: 100%;
}

.column {
width: 50%;
padding: 20px;
float: left;
box-sizing: border-box;
}

Trong ví dụ này, chúng ta đặt chiều rộng của mỗi cột là 50% và thêm padding. Bằng cách sử dụng box-sizing: border-box, chúng ta đảm bảo rằng các cột sẽ vừa khít bên cạnh nhau, ngay cả với padding đã thêm. Nếu không có nó, các cột sẽ tràn ra khỏi容器!

Hãy phân tích:

1. Chúng ta đặt container có chiều rộng 100% để chiếm toàn bộ chiều rộng của phần tử cha.
2. Mỗi cột được đặt ở 50% chiều rộng, vì vậy chúng sẽ nằm bên cạnh nhau.
3. Chúng ta thêm 20px padding cho mỗi cột để có một chút không gian.
4. Bằng cách sử dụng box-sizing: border-box, padding được bao gồm trong 50% chiều rộng, ngăn chặn tràn ra.

Đây chỉ là phần nổi của tảng băng khi nói đến sức mạnh của box-sizing. Trong hành trình phát triển web của bạn, bạn sẽ gặp vô số tình huống mà thuộc tính này cứu nguy.

Nhớ rằng, thiết kế web là về việc tạo ra các bố cục hài hòa, và box-sizing là vũ khí bí mật của bạn để đạt được sự hài hòa này. Nó giống như có một tủ quần áo được tổ chức tốt - mọi thứ đều vừa khít, và không có bất ngờ khó chịu!

Trong những năm dạy học của tôi, tôi đã chứng kiến vô số những khoảnh khắc "aha!" khi học sinh nắm bắt được khái niệm box-sizing. Đó là khoảnh khắc kỳ diệu khi các bố cục đột nhiên có ý nghĩa, và sự thất vọng do tràn ra không mong muốn biến mất.

Vậy, hãy tiếp tục luyện tập, thử nghiệm với các bố cục khác nhau, và đừng sợ thử nghiệm với box-sizing. Trước khi bạn biết điều đó, bạn sẽ tạo ra các thiết kế pixel-perfect một cách dễ dàng!

Chúc mừng coding, những pháp sư web tương lai!

Credits: Image by storyset