Mô hình hộp (Box Model) và cơ chế tính toán kích thước
Phần tử CSS được cấu tạo từ bốn lớp chồng lấn lên nhau: vùng nội dung (content), đệm (padding), viền (border) và lề (margin). Trình duyệt có hai cách tính toán giá trị thuộc tính width:
- Khung chuẩn (content-box): Giá trị
widthchỉ áp dụng riêng cho vùngcontent. - Kháng tương thích (border-box): Giá trị
widthbao gồm toàn bộ phần đệm và viền.
.card-wrapper {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid rgba(0,0,0,0.1);
}Căn chỉnh khối hiển thị theo chiều ngang
Với thành phần block tiêu chuẩn, trình duyệt sẽ tự động phân bổ khoảng trắng còn lại sang hai bên khi đặt giá trị tự động cho cạnh trái/phải. Kỹ thuật này đòi hỏi phải khai báo rõ chiều rộng tối đa để hệ thống bố cục nhận biết phạm vi điều chỉnh.
.fixed-panel {
max-width: 42rem;
margin-inline: auto;
}Kiểm soát căn giữa nhóm ký tự inline
Thuộc tính căn lề ngang chỉ ảnh hưởng trực tiếp đến các thành phần inline hoặc inline-block nằm cùng cấp. Để căn giữa chúng, cần áp dụng lệnh canh giữa văn bản lên phần tử chứa.
.message-toolbar {
text-align: center;
}
<span><p class="inline-link">Xem hướng dẫn chi tiết</p></span>Giải phóng dòng chảy khi sử dụng float
Khi phần tử con bị nổi, phần tử mẹ thường mất chiều cao thực tế. Cơ chế sạch sẽ nhất là kích hoạt khối định dạng block thông qua pseudoelement ở cuối danh sách children, đảm bảo không làm thay đổi markup gốc.
.flow-container::after {
content: "";
display: table;
clear: both;
}So sánh ẩn rendering và ẩn hiển thị
display: none: Xóa hoàn toàn phần tử khỏi DOM tree render, giải phóng tài nguyên layout và sự kiện.visibility: hidden: Tắt khả năng quan sát nhưng vẫn giữ nguyên vị trí, kích thước và chiếm slot trong quá trình tính toán bố cục.
Tính toán khung tham chiếu của absolute positioning
Thành phần đặt position: absolute sẽ tìm kiếm tổ tiên gần nhất có trạng thái định vị khác mặc định (không phải static). Nếu không tìm thấy, khung tham chiếu sẽ tự động chuyển xuống <html>.
.relative-stage {
position: relative;
top: 10px;
}
.floating-tag {
position: absolute;
inset-inline-end: 0;
}Bố cục cạnh nhau hiện đại
Thay vì phụ thuộc vào float, flexbox cung cấp công cụ sắp xếp trục linh hoạt hơn. Thuộc tính gap giúp kiểm soát khoảng trống giữa các cột mà không cần tính toán margin phức tạp.
.dual-column {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.panel {
flex: 1 1 0;
}Block Formatting Context (BFC) và vai trò cô lập
BFC là môi trường layout độc lập ngăn chặn tương tác chéo giữa các thành phần bình thường và phần tử floating/absolutely positioned. Kích hoạt BFC giúp tránh hiện tượng lề chồng lấn (margin collapse) và tự động bao bọc chiều cao của con nổi.
.isolated-region {
overflow: clip;
}Đơn vị tỷ lệ em và rem
em kế thừa giá trị font-size của cha liền kề, gây ra hiệu ứng nhân đôi khi lồng nhiều tầng. rem luôn trỏ về font-size gốc của root element (<html>), đảm bảo độ ổn định trên toàn trang.
Thiết lập tỷ lệ khung hình cố định
Cách tiếp cận hiện đại nhất là dùng thuộc tính aspect-ratio tích hợp sẵn. Với trình duyệt cũ, kỹ thuậtPadding Trick dựa trên % của chiều cao giả lập vẫn hoạt động hiệu quả.
.media-frame {
width: 100%;
aspect-ratio: 16 / 9;
background: #f0f0f0;
}Cắt ngang chuỗi ký tự dài
Để hiện biểu tượng ba chấm khi nội dung vượt khung, kết hợp ba thuộc tính nhằm khóa dòng đơn, cắt tràn và kích hoạt ký tự thay thế.
.single-line-cut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Lớp xếp chồng (Stacking Context) và z-index
Giá trị z-index chỉ phát huy tác dụng khi thành phần rời khỏi trạng thái static. Mỗi bối cảnh xếp chồng hoạt động như một đơn vị độc lập, nên việc quản lý thứ tự lớp cần ưu tiên giảm thiểu nesting quá sâu.
Gỡ bỏ hành vi chọn nội dung
Ngăn người dùng bôi đen văn bản bằng cách tắt chế độ chọn lựa. Một số nền tảng webkit yêu cầu tiền tố riêng để đảm bảo tương đồng trải nghiệm.
.non-selectable {
user-select: none;
-webkit-user-select: none;
cursor: default;
}Xác định trục chính và trục chéo trong flexbox
Hướng của các trục phụ thuộc vào flex-direction. Khi cấu hình row, trục chính chạy ngang, trục chéo đứng ngược lại. Đảo ngược thành column sẽ hoán chuyển hoàn toàn vai trò phân bổ không gian của hai trục.
Vẽ hình học tam giác纯CSS
Sử dụng kỹ thuật gộp viền tam giác với phần rỗng zero dimension. Chỉ tô màu mặt dưới, các cạnh bên giữ trong suốt để tạo điểm nhọn.
.pointer-indicator {
border-color: transparent transparent currentColor transparent;
border-style: solid;
border-width: 0 10px 10px;
height: 0;
width: 0;
}Phân biệt pseudoclass và pseudoelement
Pseudoclass đánh dấu trạng thái đặc biệt của node thực tế (ví dụ: :hover, :focus). Pseudoelement tạo ra các node ảo nằm ngoài DOM gốc dùng để trang trí (ví dụ: ::before, ::after). Quy tắc viết chuẩn khuyến nghị dùng hai chấm kép cho pseudoelement.
Kể nhiều tệp hình nền
Cho phép chồng lớp đồ họa bằng cách liệt kê URL cách nhau bởi dấu phẩy. Trình duyệt sẽ đọc từ trái sang phải để vẽ lớp trên xuống dưới, mỗi lớp hỗ trợ thuộc tính vị trí và scale riêng.
.layered-backdrop {
background-image: url('overlay.svg'), url('main.jpg');
background-size: cover, contain;
background-position: center, bottom right;
}Chênh lệch transition và animation
transition phản ứng kích hoạt khi có thay đổi thuộc tính (hover, focus). animation vận hành độc lập nhờ bảng thời gian @keyframes, hỗ trợ bước nhảy trung gian, lặp vô hạn và điều khiển thời lượng phức tạp hơn.
Căn chỉnh trọn vẹn theo cả hai chiều
Flexbox xử lý tốt nhưng CSS Grid cung cấp cú pháp ngắn gọn hơn để dồn mọi thứ vào trung tâm. Thuộc tính place-items gộp đồng thời căn trục chính và trục chéo về giá trị center.
.universal-center {
display: grid;
place-items: center;
}Truy vấn phương tiện thích ứng thiết bị
Kết hợp điều kiện max-width với hướng màn hình để tải lại style khi layout vỡ hoặc xoay thiết bị. Ưu tiên mobile-first giúp giảm lượng rule CSS nhúng chung.
@media (max-width: 48em) and (orientation: landscape) {
.adaptive-card {
flex-direction: row;
}
}