HTML & CSS

Semantic HTML là dùng thẻ mô tả đúng ý nghĩa nội dung như <header>, <nav>, <main>, <article>, <section>, <footer> thay vì <div> chung chung. Lợi ích: accessibility tốt hơn (screen reader hiểu cấu trúc), SEO tốt hơn (bot đọc được ngữ cảnh), và code dễ đọc, dễ bảo trì hơn.

Block (div, p, h1) chiếm toàn bộ chiều rộng, luôn xuống dòng, nhận width/height. Inline (span, a, strong) chỉ chiếm bề rộng nội dung, nằm cùng dòng, bỏ qua width/height và margin/padding trên–dưới không đẩy layout. Inline-block nằm cùng dòng như inline nhưng nhận đầy đủ width/height/margin/padding như block.

Mỗi phần tử là một hộp gồm content → padding → border → margin từ trong ra ngoài. Mặc định width chỉ tính phần content (box-sizing: content-box); đặt box-sizing: border-box để width bao gồm cả padding và border, giúp tính toán layout dễ hơn.

*, *::before, *::after { box-sizing: border-box; }

Các giá trị hay dùng: block, inline, inline-block, none (ẩn hoàn toàn, không chiếm chỗ), flex và grid (kích hoạt layout context cho con), contents (ẩn hộp nhưng giữ lại con). Khác với visibility: hidden — display: none loại phần tử khỏi luồng render còn visibility vẫn giữ chỗ.

static (mặc định, trong luồng). relative dịch theo vị trí gốc, tạo tham chiếu cho con absolute. absolute thoát luồng, định vị theo ancestor được position gần nhất. fixed định vị theo viewport, không cuộn theo trang. sticky lai giữa relative và fixed — dính lại khi cuộn tới ngưỡng top/bottom.

Flexbox có main axis (theo flex-direction) và cross axis (vuông góc). Trên container: justify-content căn theo main axis, align-items căn theo cross axis, flex-wrap cho phép xuống dòng. Trên item: flex-grow, flex-shrink, flex-basis (viết gọn flex: 1).

.row { display: flex; justify-content: space-between; align-items: center; }

Grid tạo lưới 2 chiều qua grid-template-columns/grid-template-rows. Đơn vị fr chia phần không gian còn lại; grid-template-areas đặt tên vùng để bố cục trực quan. Kết hợp repeat(), minmax(), auto-fit/auto-fill cho responsive.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Flexbox cho layout một chiều (một hàng hoặc một cột) — thanh nav, toolbar, căn giữa item. Grid cho layout hai chiều (hàng và cột đồng thời) — bố cục trang, dashboard, gallery. Thực tế thường kết hợp: Grid dựng khung tổng thể, Flexbox căn chỉnh nội dung bên trong từng ô.

Specificity xếp theo bộ ba (inline, id, class/attribute/pseudo-class, element/pseudo-element). Inline style cao nhất, rồi #id (0,1,0,0), rồi .class/[attr]/:hover (0,0,1,0), rồi thẻ/pseudo-element (0,0,0,1). Selector nào có bộ số lớn hơn (so từ trái sang) sẽ thắng; nếu bằng nhau thì rule khai báo sau thắng.

Cascade là cơ chế chọn rule cuối cùng khi nhiều rule cùng nhắm một phần tử, dựa theo origin/importance → specificity → thứ tự khai báo. Inheritance là việc con tự thừa hưởng một số thuộc tính từ cha (như color, font, line-height) nhưng không phải tất cả (margin, border không kế thừa). Dùng inherit/initial/unset để điều khiển thủ công.

!important nâng một khai báo lên trên mọi rule thường bất kể specificity. Nên hạn chế vì nó phá vỡ dòng chảy tự nhiên của cascade, khó ghi đè (chỉ !important khác specificity cao hơn mới thắng), dẫn tới "đua !important" khó bảo trì. Ưu tiên tăng specificity hợp lý hoặc tổ chức thứ tự CSS thay vì lạm dụng nó.

z-index quyết định thứ tự chồng lớp, nhưng chỉ có tác dụng khi phần tử được position (khác static) hoặc nằm trong flex/grid với z-index. Điều quan trọng: z-index chỉ so sánh trong cùng một stacking context. Nhiều thuộc tính tạo context mới (opacity < 1, transform, filter, will-change), nên một z-index: 9999 bên trong context thấp vẫn có thể bị đè.

BFC là một vùng render độc lập nơi các block box được sắp xếp và margin không "rò" ra ngoài. Tạo BFC bằng overflow: hidden/auto, display: flow-root, position: absolute, flex/grid. Công dụng: chứa float (element cha ôm được con float), ngăn margin collapse, và tránh nội dung bị bao quanh float.

Margin collapse là hiện tượng margin dọc (trên/dưới) của hai block liền kề gộp lại thành margin lớn hơn thay vì cộng dồn — ví dụ 20px và 30px thành 30px chứ không phải 50px. Xảy ra giữa các sibling, giữa cha–con, hoặc block rỗng. Ngăn bằng cách tạo BFC (display: flow-root), thêm padding/border, hoặc dùng flex/grid (không collapse).

px cố định tuyệt đối. em tương đối với font-size của chính phần tử (dễ nhân chồng). rem tương đối với font-size của root (html) — ổn định, dễ scale toàn cục. % tương đối với phần tử cha. vw/vh là 1% chiều rộng/cao viewport. Dùng rem cho typography/spacing và vw/vh cho kích thước theo màn hình.

Responsive design là bố cục tự thích ứng nhiều kích thước màn hình bằng layout linh hoạt, ảnh co giãn và media/container queries. Mobile-first là viết CSS mặc định cho màn hình nhỏ trước, rồi dùng min-width media query để bổ sung cho màn hình lớn hơn — code nhẹ, ưu tiên nội dung cốt lõi và tăng dần độ phức tạp.

Media query áp dụng CSS theo điều kiện thiết bị/viewport như chiều rộng, hướng màn hình, hoặc tùy chọn người dùng. Với mobile-first ưu tiên min-width.

@media (min-width: 768px) {
  .container { display: grid; grid-template-columns: 1fr 1fr; }
}

Còn có media features như prefers-color-scheme, prefers-reduced-motion, orientation.

Container query cho phép component phản ứng theo kích thước của phần tử cha chứa nó thay vì viewport, giúp component thật sự tái sử dụng ở nhiều vị trí. Cần khai báo container-type trên phần tử cha rồi truy vấn bằng @container.

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; } }

Pseudo-class (một dấu hai chấm :) nhắm tới trạng thái của phần tử như :hover, :focus, :first-child, :nth-child(). Pseudo-element (hai dấu hai chấm ::) nhắm tới một phần ảo của phần tử như ::before, ::after, ::first-line, ::placeholder. Nói ngắn: pseudo-class = trạng thái, pseudo-element = phần con được tạo ra.

:has() là "parent selector" — cho phép chọn phần tử dựa trên con/anh em của nó, điều trước đây phải nhờ JavaScript. Ví dụ style thẻ cha khi bên trong có ảnh, hoặc form có input lỗi.

.card:has(img) { padding: 0; }
label:has(+ input:invalid) { color: red; }

Hiện đã được hỗ trợ rộng trên trình duyệt hiện đại.