Login

Phỏng vấn HTML và CSS: box model, flexbox, specificity và responsive

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Dù framework đổi liên tục, HTML và CSS vẫn là nền móng của mọi giao diện web. Rất nhiều ứng viên frontend vấp ở những câu CSS tưởng đơn giản. Hãy ôn lại các chủ đề được hỏi nhiều nhất cùng cách giải thích gọn gàng.

Box model là gì?

Mỗi phần tử HTML là một hình hộp gồm bốn lớp từ trong ra ngoài: nội dung (content), đệm (padding), viền (border) và lề (margin). Mặc định width chỉ tính phần nội dung, nên thêm padding và border sẽ làm hộp rộng hơn. Dùng box-sizing: border-box để width bao gồm cả padding và border, giúp tính toán bố cục dễ đoán hơn.

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

Specificity: CSS nào thắng?

Khi nhiều quy tắc cùng áp vào một phần tử, trình duyệt chọn theo độ ưu tiên (specificity), sau đó theo thứ tự xuất hiện. Thứ tự từ thấp đến cao:

  1. Bộ chọn phần tử như p, div.
  2. Bộ chọn class, thuộc tính, pseudo-class như .card, :hover.
  3. Bộ chọn id như #header.
  4. Style nội tuyến trong thuộc tính style.
  5. !important vượt trên tất cả, nên hạn chế dùng.

Lời khuyên thực tế: ưu tiên class, giữ độ cụ thể thấp và đồng đều để dễ ghi đè.

Flexbox hoạt động thế nào?

Flexbox bố trí phần tử theo một chiều (hàng hoặc cột). Container khai báo display: flex, trục chính được điều khiển bởi justify-content, trục phụ bởi align-items.

.toolbar {  display: flex;  justify-content: space-between;  align-items: center;  gap: 12px;}.toolbar .grow {  flex: 1;}

Câu hỏi bổ sung hay gặp: căn giữa một phần tử theo cả hai chiều. Với flexbox: display: flex; justify-content: center; align-items: center; trên phần tử cha. Với grid: display: grid; place-items: center;.

Flexbox và Grid khác nhau thế nào?

Flexbox phù hợp bố cục một chiều như thanh điều hướng, hàng nút. CSS Grid xử lý bố cục hai chiều, nên hợp với khung trang tổng thể hay lưới thẻ. Hai cái thường được dùng kết hợp.

Responsive design

Thiết kế đáp ứng nghĩa là giao diện thích nghi với nhiều kích thước màn hình. Các nền tảng gồm thẻ meta viewport, đơn vị tương đối (%, rem, vw), bố cục linh hoạt và media query.

<meta name="viewport" content="width=device-width, initial-scale=1">.container { padding: 16px; }@media (min-width: 768px) {  .container { max-width: 720px; margin: 0 auto; }}

Cách tiếp cận mobile-first nghĩa là viết CSS cho màn hình nhỏ trước, rồi dùng min-width để bổ sung cho màn hình lớn.

HTML ngữ nghĩa và khả năng truy cập

Dùng thẻ đúng mục đích như header, nav, main, article, button thay vì div khắp nơi giúp công cụ tìm kiếm và trình đọc màn hình hiểu cấu trúc trang. Ảnh cần thuộc tính alt mô tả, biểu mẫu cần label gắn với ô nhập, và các thành phần tương tác phải dùng được bằng bàn phím.

Một số câu hỏi ngắn

  • display: none và visibility: hidden: loại bỏ hẳn khỏi bố cục so với ẩn nhưng vẫn chiếm chỗ.
  • position: static, relative, absolute, fixed, sticky; absolute định vị theo tổ tiên gần nhất có position khác static.
  • margin collapsing: lề dọc của hai khối liền kề có thể gộp lại thành lề lớn hơn.
  • rem và em: rem theo cỡ chữ gốc, em theo cỡ chữ của phần tử cha.

Bài tập thực hành: thẻ sản phẩm đáp ứng

Một bài live coding hay gặp là dựng một lưới thẻ sản phẩm: một cột trên điện thoại, hai cột trên máy tính bảng, bốn cột trên màn hình rộng. Với CSS Grid bạn có thể làm rất gọn:

.grid {  display: grid;  gap: 16px;  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}.card {  border: 1px solid #ddd;  border-radius: 8px;  padding: 12px;}

Dòng repeat(auto-fill, minmax(220px, 1fr)) tự tính số cột phù hợp theo độ rộng màn hình mà không cần media query. Khi trình bày, hãy giải thích bạn chọn Grid vì đây là bố cục hai chiều và nó đơn giản hơn so với việc tính phần trăm thủ công. Nếu có thời gian, bổ sung trạng thái :hover, :focus-visible cho thẻ để cho thấy bạn quan tâm đến người dùng bàn phím.

Kết luận

Thay vì học thuộc, hãy tự dựng một trang nhỏ với thanh điều hướng, lưới thẻ và biểu mẫu rồi thử đổi từng thuộc tính để thấy hiệu ứng. Kinh nghiệm tay làm sẽ giúp bạn trả lời tự nhiên hơn mọi bài học thuộc lòng.

Nếu bạn muốn nắm vững nền tảng web, có thể bắt đầu với các khóa HTML, CSS tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment