The CSS Podcasts – 001: The Box Model
Giả sử bạn có đoạn HTML này:
<p>I am a paragraph of text that has a few words in it.</p>
Sau đó, bạn viết CSS này cho nó:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Nội dung kết thúc với chiều rộng 142px, thay vì 100px mà bạn chỉ định và nó sẽ tách ra khỏi phần tử của bạn. Tại sao lại như vậy?
Mô hình hộp là nền tảng cốt lõi của CSS. Việc hiểu rõ cách hoạt động của mô hình hộp, mức độ ảnh hưởng của mô hình này bởi các khía cạnh khác của CSS và quan trọng là cách bạn có thể kiểm soát nó có thể giúp bạn viết CSS dễ dự đoán hơn.
Điều quan trọng bạn cần nhớ là mọi nội dung mà CSS hiển thị đều là một hộp, ngay cả khi
chỉ là một số văn bản hay có border-radius khiến CSS trông giống như một vòng tròn.
Nội dung và kích thước
Các hộp có hành vi khác nhau dựa trên giá trị display, kích thước đã đặt và nội dung trong đó. Nội dung này có thể là văn bản thuần tuý hoặc nhiều hộp hơn do các phần tử con tạo ra. Dù bằng cách nào thì theo mặc định, nội dung cũng sẽ ảnh hưởng đến kích thước của hộp.
Bạn có thể kiểm soát việc này bằng cách sử dụng tính năng kích thước bên ngoài hoặc có thể sử dụng tính năng kích thước nội tại để cho phép trình duyệt đưa ra quyết định cho bạn dựa trên kích thước nội dung.
Dưới đây là bản minh hoạ cơ bản giải thích sự khác biệt:
Bản minh hoạ có dòng chữ "CSS thật tuyệt vời" trong một hộp có kích thước cố định và đường viền dày. Vì có chiều rộng đã chỉ định nên hộp có kích thước bên ngoài.
Điều này có nghĩa là chế độ này kiểm soát việc đặt kích thước của nội dung con. Tuy nhiên, từ "awesome" quá lớn đối với hộp, nên sẽ tràn ra ngoài hộp đường viền của hộp mẹ (tìm hiểu thêm về điều này ở phần sau). Một cách để ngăn chặn tình trạng tràn này là đặt kích thước nội tại hộp bằng cách không đặt chiều rộng, hoặc trong trường hợp này, hãy đặt width thành min-content. Từ khoá min-content yêu cầu hộp chỉ rộng bằng chiều rộng tối thiểu nội tại của nội dung (từ "tuyệt vời"). Điều này giúp hộp vừa khít với văn bản.
Sau đây là một ví dụ phức tạp hơn về ảnh hưởng của việc định kích thước khác nhau đối với nội dung thực:
Bật và tắt kích thước hàm nội tại để xem mức độ kiểm soát kích thước bên ngoài giúp bạn kiểm soát tốt hơn nhờ kích thước bên ngoài và kích thước hàm nội tại giúp bạn kiểm soát nội dung nhiều hơn. Để xem các hiệu ứng, hãy thêm một vài câu văn bản vào thẻ. Khi phần tử này có kích thước ngoại lai, sẽ có giới hạn về lượng nội dung bạn có thể thêm trước khi bị tràn, nhưng điều đó không xảy ra khi bật tuỳ chọn kích thước nội tại.
Theo mặc định, phần tử này có một tập hợp width và height là 400px.
Những kích thước này đặt ra giới hạn nghiêm ngặt cho mọi nội dung bên trong phần tử. Điều này được thực hiện trừ phi nội dung quá lớn so với hộp. Bạn có thể xem ví dụ thực tế bằng cách thay đổi chú thích bên dưới hình ảnh bông hoa thành chú thích vượt quá chiều cao của hộp.
Từ khoá: Tình trạng tràn xảy ra khi nội dung quá lớn so với hộp chứa. Bạn có thể quản lý cách một phần tử xử lý nội dung bị tràn bằng thuộc tính overflow.
Việc chuyển sang định kích thước nội tại cho phép trình duyệt đưa ra quyết định cho bạn dựa trên kích thước nội dung của hộp. Điều này giúp giảm khả năng tràn màn hình vì hộp đổi kích thước theo nội dung.
Điều quan trọng cần nhớ là kích thước nội tại là hành vi mặc định của trình duyệt và thường mang lại tính linh hoạt cao hơn nhiều so với kích thước bên ngoài.
Các diện tích của mô hình hộp
Hộp được tạo thành từ các khu vực mô hình hộp riêng biệt nhằm thực hiện một công việc cụ thể.
Hộp nội dung là vùng chứa nội dung. Nội dung có thể kiểm soát kích thước của thành phần mẹ, vì vậy đây thường là khu vực có kích thước thay đổi nhất.
Hộp khoảng đệm bao quanh hộp nội dung và là không gian do thuộc tính padding tạo.
Vì khoảng đệm nằm bên trong hộp, nên nền của hộp hiển thị trong không gian được tạo.
Nếu hộp đã đặt các quy tắc tràn, chẳng hạn như overflow: auto hoặc overflow: scroll, thì thanh cuộn cũng sẽ chiếm không gian này.
Hộp đường viền bao quanh hộp khoảng đệm và không gian của hộp được xác định bằng giá trị border sẽ tạo khung hình ảnh cho phần tử. Đường viền của phần tử là giới hạn về nội dung bạn có thể nhìn thấy.
Vùng cuối cùng, hộp lề, là khoảng trống xung quanh hộp, được xác định theo quy tắc margin của hộp. Các thuộc tính như outline và box-shadow cũng chiếm không gian này vì được vẽ lên trên phần tử và không ảnh hưởng đến kích thước của hộp. Việc thay đổi outline-width của 200px trên hộp sẽ không làm thay đổi bất kỳ điều gì bên trong cạnh viền.
Một hình ảnh tương tự hữu ích
Mô hình hộp rất phức tạp, vì vậy, sau đây là một ví dụ tương tự với những gì bạn đã học được cho đến nay.
Trong sơ đồ này, bạn có 3 khung ảnh được gắn cạnh nhau trên tường. Các thành phần của hình ảnh tạo khung tương ứng với mô hình hộp như sau:
- Hộp nội dung là hình minh hoạ.
- Hộp đệm là giá gắn màu trắng, nằm giữa khung và hình minh hoạ.
- Hộp đường viền là khung, cung cấp đường viền cố định cho hình minh hoạ.
- Hộp lề là khoảng trống giữa các khung.
- Bóng chiếm cùng không gian với ô lề.
Gỡ lỗi mô hình hộp
Công cụ của trình duyệt cung cấp hình ảnh trực quan về các phép tính mô hình hộp đã chọn, có thể giúp bạn hiểu cách hoạt động của mô hình hộp và cách mô hình đó ảnh hưởng đến trang web bạn đang xử lý.
Hãy thử cách này trong trình duyệt của bạn:
- Mở Công cụ cho nhà phát triển.
- Chọn một phần tử.
- Hiện trình gỡ lỗi mô hình hộp.
Điều khiển mô hình hộp
Để hiểu cách kiểm soát mô hình hộp, trước tiên bạn cần hiểu điều gì sẽ xảy ra trong trình duyệt của mình.
Mỗi trình duyệt đều áp dụng bảng định kiểu tác nhân người dùng cho các tài liệu HTML xác định giao diện và cách hoạt động của các phần tử nếu chúng không có CSS được xác định. CSS trong biểu định kiểu tác nhân người dùng khác nhau giữa các trình duyệt, nhưng chúng cung cấp các giá trị mặc định hợp lý để giúp nội dung dễ đọc hơn.
Một thuộc tính mà biểu định kiểu tác nhân người dùng đặt display mặc định của hộp. Ví dụ: trong một luồng thông thường, giá trị display mặc định của phần tử <div> là block, <li> có giá trị display mặc định là list-item và <span> có giá trị display mặc định là inline.
Một phần tử inline có lề khối, nhưng các phần tử khác không tuân theo lề này.
Với inline-block, các phần tử khác tuân theo lề khối, nhưng phần tử đầu tiên
vẫn giữ lại hầu hết hành vi từng có như phần tử inline.
Theo mặc định, một mục block sẽ lấp đầy không gian nội tuyến có sẵn, trong khi các phần tử inline và inline-block chỉ lớn bằng nội dung của chúng.
Bảng định kiểu tác nhân người dùng cũng thiết lập box-sizing. Mã này cho biết cách tính toán kích thước hộp. Theo mặc định, tất cả các phần tử đều có kiểu tác nhân người dùng sau: box-sizing: content-box;. Điều này có nghĩa là khi bạn đặt các phương diện như width và height, thì những phương diện đó sẽ áp dụng cho hộp nội dung. Sau đó, nếu bạn đặt padding và border, các giá trị này sẽ được thêm vào kích thước của hộp nội dung.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về kích thước mô hình hộp ảnh hưởng đến các thuộc tính.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Bạn nghĩ .my-box sẽ rộng bao nhiêu?
200px sẽ chính xác nếu hộp có box-sizing: border-box.
Chiều rộng thực tế của hộp này là 260 px.
Vì CSS sử dụng box-sizing: content-box mặc định, nên chiều rộng áp dụng là chiều rộng của nội dung, sau đó, padding và border ở cả hai bên sẽ được thêm vào. 200px cho nội dung + 40px khoảng đệm + 20px của đường viền tạo ra tổng chiều rộng hiển thị là 260px.
Bạn có thể thay đổi điều này bằng cách chỉ định kích thước border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Mô hình hộp thay thế này yêu cầu CSS áp dụng width cho ô đường viền thay vì hộp nội dung. Tức là border và padding sẽ được đẩy vào. Vì vậy, khi đặt .my-box thành 200px rộng, thành phần này sẽ hiển thị ở chiều rộng 200px.
Hãy xem cách hoạt động của tính năng này trong bản minh hoạ có tính tương tác sau đây. Khi bạn bật/tắt giá trị box-sizing, vùng màu xanh dương cho biết CSS nào đang được áp dụng bên trong hộp.
*,
*::before,
*::after {
box-sizing: border-box;
}
Quy tắc CSS này chọn mọi phần tử trong tài liệu cũng như mọi phần tử giả ::before và ::after, đồng thời áp dụng box-sizing: border-box.
Tức là mọi phần tử hiện đều sử dụng mô hình hộp thay thế này.
Vì mô hình hộp thay thế có thể dễ dự đoán hơn, nên các nhà phát triển thường thêm quy tắc này vào các trình đặt lại và chuẩn hoá, như ví dụ này.