Top 30+ câu hỏi phỏng vấn CSS từ cơ bản đến nâng cao

Nội dung chính

Câu hỏi phỏng vấn CSS cơ bản cho Junior Frontend Developer
Câu hỏi phỏng vấn CSS trung cấp phù hợp cho Middle Frontend Developer
Câu hỏi phỏng vấn CSS nâng cao cho Senior Frontend Developer
Tổng kết câu hỏi phỏng vấn CSS

Trong bài viết này, ITviec đã tổng hợp 40 câu hỏi phỏng vấn CSS, từ cơ bản đến nâng cao, dành cho các Frontend Developer, từ cấp độ đầu vào (Junior) đến cấp cao (Senior). Hãy đọc từng câu hỏi và thử trả lời trước khi xem đáp án để kiểm tra kiến thức trước buổi phỏng vấn nhé!

Đọc bài viết này để hiểu rõ hơn về các câu hỏi phỏng vấn CSS theo từng cấp độ:

Câu hỏi phỏng vấn CSS cơ bản cho Junior Frontend Developer
Câu hỏi phỏng vấn CSS trung cấp cho Middle Frontend Developer
Câu hỏi phỏng vấn CSS nâng cao cho Senior Frontend Developer

Câu hỏi phỏng vấn CSS cơ bản cho Junior Frontend Developer

CSS là gì?

CSS là viết tắt của Cascading Style Sheets. Đây là ngôn ngữ định kiểu dùng để mô tả giao diện và định dạng của tài liệu được viết bằng HTML (Ngôn ngữ Đánh dấu Siêu văn bản) hoặc XML (Ngôn ngữ Đánh dấu Mở rộng).

Mục đích chính của CSS là tách biệt phần trình bày và thiết kế của một trang web khỏi nội dung, giúp việc duy trì, cập nhật và sửa đổi giao diện trực quan của trang web trở nên dễ dàng hơn.

Đọc thêm: CSS là gì? Hướng dẫn sử dụng hiệu quả CSS để thiết kế web

Những ưu điểm khi sử dụng CSS trong lập trình Frontend là gì?

Tính nhất quán: Bằng cách sử dụng một tệp CSS duy nhất để kiểm soát các kiểu cho nhiều trang, bạn có thể tạo ra giao diện đồng nhất cho toàn bộ trang web.
Hiệu quả: CSS giảm thiểu việc sao chép mã và giúp quản lý cũng như cập nhật các kiểu dễ dàng hơn. Điều này dẫn đến thời gian tải trang nhanh hơn và giảm mức sử dụng băng thông, đặc biệt khi sử dụng các kỹ thuật tối ưu hóa CSS như minify và combine.
Tính mô-đun: Với CSS, bạn có thể chia nhỏ các khoá học thành các mô-đun có thể tái sử dụng, kết hợp và cập nhật một cách độc lập với nhau.
Tính truy cập: CSS giúp tạo ra các trang web có thể truy cập được bằng cách cho phép các nhà phát triển áp dụng các kiểu cụ thể cho các loại thiết bị khác nhau (responsive design) hoặc theo sở thích của người dùng.
Tính linh hoạt: CSS cung cấp nhiều thuộc tính và kỹ thuật định kiểu khác nhau có thể được sử dụng để đạt được các hiệu ứng khác nhau, phục vụ cho các yêu cầu thiết kế đa dạng.

Overflow CSS là gì?

CSS overflow kiểm soát nội dung, cho biết liệu có nên cắt nội dung hay thêm thanh cuộn hay không. Overflow chứa các thuộc tính sau:

visible: Nội dung không bị cắt và hiển thị bên ngoài hộp phần tử.
hidden: Nội dung dư thừa bị cắt và phần còn lại của nội dung sẽ không hiển thị.
scroll: Nội dung dư thừa bị cắt nhưng một thanh cuộn được thêm vào để xem phần còn lại của nội dung. Thanh cuộn có thể là ngang hoặc dọc.
auto: Tự động thêm thanh cuộn khi cần thiết.
overflow-x và overflow-y: Các thuộc tính này chỉ định cách thay đổi overflow của các phần tử. x xử lý các cạnh ngang và y xử lý các cạnh dọc.

Đọc thêm: Overflow CSS là gì? Cách ứng dụng thuộc tính Overflow

Cách liên kết file CSS với file HTML như thế nào?

Cascading Style Sheet (CSS) được sử dụng để thiết lập kiểu dáng cho các trang web chứa các phần tử HTML. Nó thiết lập các thuộc tính như màu nền, kích thước font chữ, kiểu font chữ, màu sắc, … v.v. cho các phần tử trên một trang web.

Có ba loại CSS như sau:

CSS nội tuyến (Inline CSS)

CSS nội tuyến chứa thuộc tính CSS trong phần thân, được gắn với phần tử được gọi là CSS nội tuyến. Loại kiểu này được chỉ định bên trong một thẻ HTML bằng thuộc tính style.

Ví dụ:

<p style="color: blue; font-size: 16px;">Đây là một đoạn văn có kiểu nội tuyến.</p>

CSS nội bộ hoặc nhúng (Internal or Embedded CSS)

Loại này có thể được sử dụng khi một tài liệu HTML duy nhất cần được định dạng theo cách độc đáo. Tập hợp quy tắc CSS nên nằm trong tệp HTML ở phần đầu, nghĩa là CSS được nhúng bên trong tệp HTML.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>Đây là một đoạn văn có kiểu nội bộ.</p>
</body>
</html>

CSS ngoại bộ (External CSS)

CSS ngoại bộ chứa một tệp CSS riêng biệt chỉ chứa các thuộc tính kiểu với sự trợ giúp của các thuộc tính thẻ (ví dụ: class, id, heading, … v.v.). Thuộc tính CSS được viết trong một tệp riêng biệt với phần mở rộng .css và nên được liên kết với tài liệu HTML bằng thẻ link. Điều này có nghĩa là đối với mỗi phần tử, kiểu chỉ có thể được thiết lập một lần và sẽ được áp dụng trên toàn bộ các trang web.

Ví dụ ta có file styles.css:

p {
    color: green;
    font-size: 20px;
}
Tệp index.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Đây là một đoạn văn có kiểu ngoại bộ.</p>
</body>
</html>

Đọc thêm: HTML CSS là gì? 3 cách link CSS vào HTML khi lập trình website

Bộ chọn trong CSS là gì?

Các bộ chọn (selectors) là các mẫu được sử dụng để chọn phần tử hoặc các phần tử mà bạn muốn định kiểu. Chúng có thể được sử dụng để tìm các phần tử dựa trên tên, ID, lớp, thuộc tính và nhiều yếu tố khác. Ví dụ:

p là bộ chọn kiểu (type selector) chọn tất cả các phần tử <p>.
.navigation là bộ chọn lớp (class selector) chọn tất cả các phần tử có lớp là navigation.
#header là bộ chọn ID (ID selector) chọn phần tử có ID là header.

Đọc thêm: CSS selector là gì? Top 10 CSS selector phổ biến nhất hiện nay

Liệt kê các bộ chọn khác nhau trong CSS

Bộ chọn CSS là một chuỗi ký tự xác định các phần tử mà thuộc tính CSS cụ thể sẽ được áp dụng. Các loại bộ chọn khác nhau bao gồm:

Bộ chọn toàn cầu (Universal Selector): Chọn tất cả các phần tử và áp dụng các thuộc tính CSS cho chúng.
Bộ chọn theo loại phần tử (Element Type Selector): Khớp với một hoặc nhiều phần tử HTML cùng loại.
Bộ chọn ID (ID Selector): Khớp với phần tử HTML có thuộc tính ID trùng với giá trị của bộ chọn.
Bộ chọn lớp (Class Selector): Khớp với tất cả các phần tử trong trang có thuộc tính lớp trùng với giá trị của bộ chọn.
Tổ hợp hậu duệ (Descendant Combinator): Kết hợp hai hoặc nhiều bộ chọn để chọn các phần tử cụ thể hơn. Chọn tất cả các phần tử HTML là con, cháu, chắt, v.v.
Tổ hợp con (Child Combinator): Nhắm đến các phần tử con trực tiếp của một phần tử cha.
Tổ hợp anh chị em tổng quát (General Sibling Combinator): Khớp các phần tử dựa trên mối quan hệ anh chị em, chọn các phần tử đứng cạnh nhau trong tài liệu HTML.
Tổ hợp anh chị em liền kề (Adjacent Sibling Combinator): Nhắm đến phần tử phải là anh chị em liền kề ngay sau.
Bộ chọn thuộc tính (Attribute Selector): Nhắm đến các phần tử dựa trên sự tồn tại và/hoặc giá trị của thuộc tính HTML.
Pseudo-class: Sử dụng ký tự hai chấm để xác định trạng thái giả mà một phần tử có thể có, ví dụ: trạng thái khi được di chuột qua (hover).

Ví dụ:

câu hỏi phỏng vấn css - itviec blog

Style code:

<style>
    /* universal selector */
    * {
  color: blue;
    }
    /* element type selector */
    p {
  font-weight: 900;
    }
    /* id selector */
    #idElement {
  color: green;
    }
    /* class selector */
    .classElement {
  padding: 20px;
  width: 120px;
  height: 50px;
  background-color: green;
  text-align: center;
  border: 2px solid blue;
  margin: 10px;
  color: white;
  align-items: center;
  display: flex;
    }
    /* descendant combinator */
    #container > .classElement {
   background-color: yellow;
   color: black;
    }
    /* child combinator */
    div > p {
   font-size: 1.2rem;
    }
    /* general sibling combinator */
    h1 ~ p {
  text-align: center;
    }
    /* adjacent sibling combinator */
    p + p {
  text-indent: 2.4em;
  margin-bottom: 0;
    }
    /* attribute selector */
    input[type="text"] {
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 1.4rem;
  width: 200px;
    }
    /* Pseudo-class */
    h1:hover {
  background-color: red;
    }
  </style>

Body code:

<body>
  <h1>CSS Selector</h1>
  <p>Element type Selector</p>
  <p id = "idElement">ID Selector</p>
  <div class="classElement">Class Element 1</div>
  <div class="classElement"><p>Class Element 2</p></div>
  <div class="classElement">Class Element 3</div>
  <div id = "container">
   <div class="classElement">Class Element 4</div>
   <div class="classElement"><p>Class Element 5</p></div> 
  </div>
  <p>Adjacent sibling combinator</p>
  <p>Adjacent sibling combinator</p>
  <input type="text" placeholder = "Attribute Selector"/>
</body>

Class selector và ID selector khác nhau như thế nào?

Bộ chọn ID chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một ID luôn duy nhất trong một trang, vì vậy nó được chọn để chọn một phần tử duy nhất. Nó được viết với ký tự thăng (#), theo sau là ID của phần tử.

Cú pháp:

#element_id_name{
   // CSS properties
}

Bộ chọn lớp chọn các phần tử HTML có thuộc tính lớp cụ thể. Nó được sử dụng với ký tự chấm “.” (dấu chấm) theo sau là tên lớp.

Cú pháp:

.element_class_name{
   // CSS properties
}

Sự khác biệt giữa bộ chọn class (“.”) và bộ chọn id (“#”):

Bộ chọn class	Bộ chọn id
Được sử dụng để đại diện cho class=”tên_lớp” trong phần tử HTML.	Được sử dụng để đại diện cho id=”tên_id” trong phần tử HTML.
Mỗi phần tử có thể chứa nhiều selector “.” nghĩa là phần tử có thể chứa nhiều lớp, được phân cách bằng khoảng trắng. Chúng sẽ được chọn bằng nhiều dấu chấm như .lớp1 .lớp2 … và tương tự.	Mỗi phần tử chỉ có thể chứa một selector “#”, không thể nhiều hơn một, không giống như selector lớp.
Các selector “.” không phải là duy nhất: Cùng một selector có thể áp dụng cho nhiều phần tử, nếu các phần tử HTML có cùng thuộc tính lớp, giống như một danh sách các phần tử có thể chứa cùng một lớp.

Box Model trong CSS là gì?

Box model trong CSS là một khái niệm tổ chức và cấu trúc các phần tử HTML trên một trang web dưới dạng các hộp chữ nhật. Mỗi phần tử trên một trang bao gồm một hộp chữ nhật, bao gồm nội dung, khoảng cách lề trong (padding), viền (border) và khoảng cách lề ngoài (margin). Các thành phần này cùng nhau đóng góp vào kích thước và vị trí của phần tử.

Nội dung (Content): Văn bản hoặc hình ảnh thực tế bên trong phần tử.
Khoảng cách lề trong (Padding): Khoảng trống giữa nội dung và viền, hoạt động như một lớp đệm xung quanh nội dung.
Viền (Border): Đường viền bao quanh khoảng cách lề trong và nội dung, xác định trực quan ranh giới của phần tử.
Khoảng cách lề ngoài (Margin): Khoảng trống xung quanh viền, giúp cách các phần tử ra khỏi nhau và các phần khác của trang.

Ví dụ:

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Pseudo-class là gì?

Pseudo-class là một kiểu lựa chọn đặc biệt trong CSS cho phép áp dụng kiểu (style) cho các phần tử trong những trạng thái nhất định mà không tồn tại trong cấu trúc HTML thông thường. Chúng thường được dùng để tạo hiệu ứng khi người dùng tương tác, chẳng hạn khi di chuột qua liên kết.

Các pseudo-class phổ biến của thẻ liên kết (<a>) gồm: :link, :visited, :hover, :active, :focus.

Ví dụ:

/* Thay đổi màu khi di chuột qua liên kết */
a:hover {
    color: #FF00FF;
}

CSS Combinator là gì?

Combinator CSS giải thích mối quan hệ giữa hai selector. Selector CSS là các mẫu được sử dụng để chọn các phần tử cho mục đích kiểu dáng. Một selector CSS có thể là một selector đơn giản hoặc một selector phức tạp bao gồm nhiều selector được kết nối bằng combinator.

Có bốn loại combinator có sẵn trong CSS được thảo luận dưới đây:

General Sibling selector (~): Selector anh chị em chung được sử dụng để chọn phần tử theo sau phần tử selector đầu tiên và cũng chia sẻ cùng cha mẹ với phần tử selector đầu tiên. Điều này có thể được sử dụng để chọn một nhóm các phần tử chia sẻ cùng một phần tử cha.
Adjacent Sibling selector (+): Selector anh chị em liền kề được sử dụng để chọn phần tử liền kề hoặc phần tử kế tiếp với thẻ selector được chỉ định. Combinator này chỉ chọn một thẻ ngay bên cạnh thẻ được chỉ định.
Child Selector (>): Selector con được sử dụng để chọn phần tử là con trực tiếp của thẻ được chỉ định. Combinator này nghiêm ngặt hơn selector con cháu vì nó chỉ chọn selector thứ hai nếu nó có phần tử selector đầu tiên làm cha.
Descendant selector (khoảng trắng): Selector con cháu được sử dụng để chọn tất cả các phần tử con của thẻ được chỉ định. Các thẻ có thể là con trực tiếp của thẻ được chỉ định hoặc có thể rất sâu trong thẻ được chỉ định. Combinator này kết hợp hai selector sao cho các phần tử được chọn có tổ tiên giống như phần tử selector đầu tiên.

Ví dụ:

/* Chọn tất cả các thẻ <p> sau thẻ <div> (không nhất thiết phải là con trực tiếp) */
div ~ p {
    color: blue;
}
/* Chọn thẻ <span> ngay sau thẻ <h1> */
h1 + span {
    font-weight: bold;
}
/* Chọn tất cả các thẻ <li> bên trong thẻ <ul> */
ul > li {
    list-style: none;
}

Float trong CSS hoạt động như thế nào?

Float (căn lề) là một thuộc tính trong CSS được sử dụng để điều chỉnh cách các phần tử hiển thị trên trang web, cho phép chúng “trôi” sang bên trái hoặc bên phải trong bố cục, cho phép các phần tử khác quấn xung quanh chúng.

Thuộc tính float hoạt động như sau:

Khi một phần tử được đặt thuộc tính float, nó sẽ được di chuyển sang bên trái hoặc bên phải và các phần tử khác sẽ quấn quanh nó.
Các phần tử đứng sau phần tử đã được căn sẽ chảy xung quanh nó, trong khi các phần tử đứng trước sẽ không bị ảnh hưởng.
Float không làm thay đổi chiều cao của phần tử cha; nếu không có phần tử con nào không bị float, chiều cao của phần tử cha sẽ không được tính đúng.

Border box khác gì với content box?

Border-box và content-box là hai mô hình hộp (box model) khác nhau trong CSS, được sử dụng để xác định cách tính toán chiều cao và chiều rộng của một phần tử. Sự khác biệt chính giữa hai mô hình này nằm ở cách tính toán các thuộc tính như padding (khoảng cách lề trong) và border (viền).

Trong mô hình border-box, chiều cao và chiều rộng mà bạn gán cho một phần tử bao gồm tất cả mọi thứ: nội dung, padding và border. Điều này có nghĩa là nếu bạn đặt width: 200px cho một phần tử, thì tổng chiều rộng của phần tử (bao gồm cả padding và border) sẽ là 200px.

Trong mô hình content-box, chiều cao và chiều rộng mà bạn gán cho một phần tử chỉ bao gồm nội dung (content) bên trong phần tử đó. Các thuộc tính padding và border sẽ được thêm vào bên ngoài, làm tăng tổng chiều cao và chiều rộng của phần tử.

Công dụng của ruleset là gì?

Ruleset trong CSS được sử dụng để áp dụng các kiểu dáng (style) cho các phần tử HTML cụ thể. Mỗi ruleset giúp xác định các thuộc tính và giá trị sẽ được áp dụng cho một hoặc nhiều phần tử trên trang bằng cách:

Cung cấp kiểu dáng cho các phần tử: Định nghĩa các thuộc tính như màu sắc, kích thước, căn lề, khoảng cách và nhiều thuộc tính khác cho các phần tử HTML.
Tăng tính nhất quán: Cho phép áp dụng cùng một kiểu dáng cho nhiều phần tử, giúp giao diện trang web đồng bộ và dễ quản lý.
Tổ chức mã hiệu quả: Ruleset chia mã CSS thành các phần rõ ràng (selector và declaration block), giúp dễ đọc, bảo trì và sửa đổi khi cần thiết.
Hỗ trợ tùy chỉnh giao diện linh hoạt: Ruleset có thể kết hợp nhiều bộ chọn với nhau, áp dụng các kiểu dáng phức tạp và tạo sự linh hoạt trong việc thiết kế giao diện trang web.

Câu hỏi phỏng vấn CSS trung cấp phù hợp cho Middle Frontend Developer

Media queries trong CSS là gì?

Media queries được sử dụng để tạo ra thiết kế web đáp ứng (responsive design). Điều này có nghĩa là giao diện của một trang web khác nhau tùy thuộc vào hệ thống, dựa trên kích thước màn hình hoặc loại media.

Media queries có thể được sử dụng để kiểm tra nhiều thứ:

Chiều rộng và chiều cao của viewport
Chiều rộng và chiều cao của thiết bị
Định hướng
Độ phân giải

Một media queries bao gồm một loại media có thể chứa một hoặc nhiều biểu thức có thể đúng hoặc sai. Kết quả của query là đúng nếu media được chỉ định khớp với loại thiết bị mà tài liệu được hiển thị. Nếu media queries là đúng, thì các thuộc tính CSS sẽ được áp dụng.

Cú pháp:

@media not | only mediatype and (expression) {
   // Code content
}

Flexbox trong CSS là gì?

Flexbox, hay còn gọi là Flexible Box Layout, là một mô hình bố cục trong CSS cho phép tạo ra các bố cục linh hoạt và hiệu quả trên trang web. Flexbox giúp định dạng các phần tử trong một container theo chiều ngang hoặc chiều dọc, dễ dàng căn chỉnh, phân phối không gian và thay đổi kích thước các phần tử theo kích thước màn hình. Flexbox hỗ trợ việc căn chỉnh các phần tử con một cách đồng đều và dễ dàng trong các bố cục phức tạp.

Cú pháp:

.main-container {
   display: flex;
}

Các thuộc tính flex: flex-direction flex-wrap flex-flow justify-content align-items align-content,…

Đọc thêm: Flex CSS là gì? Giải đáp chi tiết 13 thuộc tính trong Flexbox CSS

Sự khác biệt giữa thuộc tính absolute, relative, fixed và sticky positioning là gì?

Thuộc tính static, relative, absolute, fixed, sticky, initial và inherit là các loại vị trí trong CSS. Cụ thể:

Static: là giá trị mặc định, tất cả các phần tử xuất hiện theo thứ tự trong tài liệu.
Relative: phần tử được định vị tương đối với vị trí bình thường của nó.
Absolute: phần tử được định vị tuyệt đối với phần tử cha đầu tiên đã được định vị.
Fixed: phần tử được định vị liên quan đến cửa sổ trình duyệt.
Sticky: phần tử được định vị dựa trên vị trí cuộn của người dùng.

CSS Grid khác gì so với Flexbox?

	Flexbox	Grid
Chiều không gian và tính linh hoạt	Cung cấp khả năng kiểm soát tốt hơn về căn chỉnh và phân bố khoảng cách giữa các phần tử. Với cấu trúc một chiều, Flexbox chỉ hoạt động với hàng ngang hoặc cột dọc.	Có khả năng bố trí hai chiều, cho phép điều chỉnh chiều rộng linh hoạt như một đơn vị chiều dài, giúp khắc phục các hạn chế của Flexbox.
Khả năng căn chỉnh	Thuộc tính Flex Direction cho phép lập trình viên căn chỉnh các phần tử theo chiều dọc hoặc ngang, thường được sử dụng khi tạo hoặc đảo ngược hàng và cột.	Sử dụng các đơn vị đo lường phân đoạn và tính năng tự động để tự động điều chỉnh các cột hoặc hàng.
Quản lý phần tử	Flex Container là phần tử cha trong khi Flex Item là phần tử con. Flex Container có thể đảm bảo sự cân bằng bằng cách điều chỉnh kích thước của các phần tử con, giúp thiết kế phù hợp với các kích thước màn hình thay đổi.	Hỗ trợ cả bố trí nội dung ngầm và hiển thị. Tính năng tự động tích hợp của Grid cho phép mở rộng tự động các dòng và sao chép các giá trị từ phần tử trước đó vào phần tử mới tạo.

Đọc thêm: Grid CSS: Cẩm nang sử dụng Grid CSS cơ bản

Transition CSS là gì?

Transition trong CSS cho phép kiểm soát cách thức diễn ra quá trình chuyển đổi giữa hai trạng thái của phần tử. Có bốn thuộc tính transition CSS:

transition-property

Thuộc tính này cho phép bạn chọn các thuộc tính CSS mà bạn muốn hoạt hình hóa trong quá trình chuyển đổi (thay đổi).

Cú pháp:

transition-property: none | all | property | property1, property2, ..., propertyN;

transition-duration

Thuộc tính này cho phép bạn xác định thời gian cần thiết để hoàn thành quá trình chuyển đổi từ thuộc tính CSS này sang thuộc tính khác. Ở đây, thời gian có thể tính bằng giây (s) hoặc mili giây (ms), bạn nên sử dụng ‘s’ hoặc ‘ms’ sau số (không có dấu ngoặc kép).

Cú pháp:

transition-duration: time;

Thời gian có thể tính bằng giây hoặc mili giây (ms), bạn nên sử dụng ‘s’ hoặc ‘ms’ sau số (không có dấu ngoặc kép).

transition-timing-function

Thuộc tính này cho phép bạn xác định tốc độ thay đổi và cách thức thay đổi trong quá trình chuyển đổi. Ví dụ, sự thay đổi có thể nhanh ở đầu và chậm ở cuối,…

Cú pháp:

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end;

transition-delay

Thuộc tính này cho phép bạn xác định khoảng thời gian chờ trước khi quá trình chuyển đổi thực sự bắt đầu diễn ra. Ở đây, một lần nữa, thời gian có thể tính bằng giây (s) hoặc mili giây (ms), và bạn nên sử dụng ‘s’ hoặc ‘ms’ sau số (không có dấu ngoặc kép).

Cú pháp:

transition-delay: time;

Đọc thêm: Transition CSS là gì? Phân biệt transition CSS và animation CSS

Biến CSS là gì và sử dụng chúng như thế nào?

Biến CSS là một phương pháp giúp tái sử dụng các giá trị CSS bằng cách định nghĩa các giá trị này thành biến. Thay vì phải viết lại cùng một giá trị nhiều lần, bạn chỉ cần khai báo giá trị đó một lần dưới dạng biến và sử dụng lại ở nhiều nơi.

Cách khai báo biến: Biến CSS thường được khai báo trong phần :root để có thể sử dụng trên toàn bộ tài liệu.

Ví dụ:

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

Cách sử dụng biến: Để sử dụng biến CSS đã khai báo, dùng cú pháp var(–ten-bien) trong các thuộc tính CSS.

Ví dụ:

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  color: #fff;
}

Tính năng nâng cao: CSS Variables còn hỗ trợ việc sử dụng trong các phép tính với calc() hoặc tạo các trạng thái khác nhau khi kết hợp với :hover, @media.

Ví dụ:

.card {
  padding: calc(var(--font-size) * 1.5);
}

.card:hover {
  background-color: var(--secondary-color);
}

Thuộc tính box-sizing của CSS có tác dụng gì?

Thuộc tính box-sizing trong CSS định nghĩa cách trình duyệt tính toán tổng chiều rộng và chiều cao của một phần tử, bao gồm cả padding và border hay không.

Cú pháp:

box-sizing: content-box|border-box;

Giá trị thuộc tính:

content-box: Đây là giá trị mặc định của thuộc tính box-sizing. Trong chế độ này, các thuộc tính width và height chỉ bao gồm nội dung. Border và padding không được tính vào đó, tức là nếu chúng ta đặt chiều rộng của một phần tử là 200 pixel, thì hộp nội dung của phần tử sẽ rộng 200 pixel, và chiều rộng của bất kỳ border hoặc padding nào sẽ được thêm vào chiều rộng cuối cùng được hiển thị.
border-box: Trong chế độ này, các thuộc tính width và height bao gồm nội dung, padding và border, tức là nếu chúng ta đặt chiều rộng của một phần tử là 200 pixel, thì 200 pixel đó sẽ bao gồm bất kỳ border hoặc padding nào chúng ta thêm vào, và hộp nội dung sẽ thu nhỏ để hấp thụ chiều rộng bổ sung đó. Điều này thường làm cho việc định cỡ các phần tử dễ dàng hơn nhiều.

Z-index trong CSS hoạt động như thế nào?

Thuộc tính z-index xác định thứ tự xếp chồng của các phần tử theo trục z (chiều sâu). Phần tử có giá trị z-index cao hơn sẽ nằm trên các phần tử có giá trị thấp hơn. Thuộc tính này áp dụng cho các phần tử được định vị (có position khác static).

Rem và em là gì và chúng khác nhau như thế nào?

Trong CSS, các đơn vị đo lường khác nhau được sử dụng để định nghĩa độ dài, kích thước và kích cỡ. Một số đơn vị thường được sử dụng là px, %, em và rem. Mỗi đơn vị có đặc điểm riêng:

em: Đơn vị em là tương đối với kích thước font của chính phần tử đó hoặc phần tử cha gần nhất có kích thước font được chỉ định. 1em bằng với kích thước font hiện tại, vì vậy nếu kích thước font của tài liệu là 16px, thì 1em sẽ bằng 16px.

rem: Tương tự như em, đơn vị rem là tương đối với kích thước font. Tuy nhiên, rem luôn tương đối với kích thước font gốc (root) của tài liệu, thường được định nghĩa trên phần tử . Đơn vị này cung cấp một cách nhất quán để quy mô các phần tử dựa trên kích thước font tổng thể của trang, mà không bị ảnh hưởng bởi kích thước font của các phần tử cha.

Giải thích sự khác nhau giữa padding và margin?

Trong CSS, padding và margin là các thuộc tính điều khiển khoảng trống xung quanh một phần tử, nhưng chúng phục vụ cho các mục đích khác nhau:

Padding: Thuộc tính này định nghĩa khoảng trống giữa nội dung của một phần tử và đường viền của nó. Nó thường được sử dụng để tạo thêm khoảng trống xung quanh nội dung bên trong một phần tử. Padding được bao gồm trong màu nền hoặc hình nền của phần tử và giữ đường viền bên ngoài nội dung thực tế.

Margin: Thuộc tính này định nghĩa khoảng trống xung quanh bên ngoài của một phần tử, giữa phần tử và các phần tử xung quanh nó. Nó được sử dụng để tạo khoảng trống giữa các phần tử và nó là trong suốt. Margin nằm bên ngoài đường viền, vì vậy nếu một phần tử có màu nền hoặc hình ảnh, nó sẽ không ảnh hưởng đến margin.

câu hỏi phỏng vấn css - itviec blog

Bộ tiền xử lý CSS là gì? Kể tên một số loại phổ biến

Bộ tiền xử lý CSS (CSS Preprocessor) là công cụ cho phép các lập trình viên viết CSS với cú pháp mở rộng và có thể sử dụng các tính năng nâng cao như biến, hàm, mixins,… giúp cải thiện quy trình phát triển CSS. Bộ tiền xử lý sẽ biên dịch code bằng cú pháp mở rộng thành mã CSS tiêu chuẩn mà trình duyệt có thể hiểu.

Một số bộ tiền xử lý CSS phổ biến bao gồm:

Sass (Syntactically Awesome Stylesheets): Cú pháp linh hoạt, hỗ trợ biến, mixins và nesting. Có hai dạng là SCSS (Sassy CSS) và Sass (cú pháp lược bỏ).
LESS: Hỗ trợ biến, mixins và toán tử. Các cú pháp rất đơn giản và dễ học.
Stylus: Cú pháp linh hoạt với khả năng lược bỏ dấu ngoặc và dấu chấm phẩy. Hỗ trợ nhiều tính năng như mixins, điều kiện và vòng lặp.
PostCSS: Không phải là một tiền xử lý truyền thống mà là một công cụ xử lý CSS, cho phép sử dụng các plugin để thêm tính năng, như CSS Modules hoặc Autoprefixer.

Nêu điểm khác nhau giữa Inline, Inline-Block và Block

Inline: Phần tử chỉ chiếm không gian vừa với nội dung, không bắt đầu dòng mới, không thể đặt chiều rộng và chiều cao cố định cho phần tử và có thể nằm cạnh nội dung khác Các phần tử inline phổ biến gồm <a>, <span>, <strong>, <img>, <cite>, <button>.
Inline-Block: Giống inline nhưng có thể đặt padding, margin, chiều cao và chiều rộng. Vẫn nằm trong dòng hiện tại mà không xuống dòng mới.
Block: Phần tử chiếm toàn bộ chiều rộng của container và bắt đầu trên dòng mới, đẩy các phần tử khác xuống dưới. Có thể đặt chiều rộng và chiều cao. Ví dụ: <div>, <p>.

Pseudo-elements và Pseudo-class là gì?

Các pseudo-element (phần tử giả) được sử dụng để định dạng các phần cụ thể của một phần tử. Ví dụ, bạn có thể viết hoa chữ cái đầu tiên của một phần tử hoặc chèn nội dung trước hoặc sau một phần tử được chỉ định. Trong khi đó, một pseudo-class (lớp giả) định nghĩa một trạng thái đặc biệt của một phần tử.

Cú pháp pseudo-element:

selector::pseudo-element {
   property:value;
}

Cú pháp pseudo-class:

selector:pseudo-class {
  property: value;
}

Một số pseudo-element được định nghĩa trong CSS bao gồm:

::after: Chèn nội dung sau nội dung của phần tử.
::backdrop: Áp dụng kiểu cho phần nền đằng sau một phần tử.
::before: Chèn nội dung trước nội dung của phần tử.
::first-letter: Áp dụng kiểu cho chữ cái đầu tiên của phần tử.
::first-line: Áp dụng kiểu cho dòng đầu tiên của phần tử.
::file-selector-button: Áp dụng kiểu cho nút chọn tệp.

Một số ví dụ về pseudo-class bao gồm:

:fullscreen: Áp dụng kiểu cho phần tử khi nó ở chế độ toàn màn hình.
:modal: Áp dụng kiểu cho phần tử khi nó ở chế độ modal (hộp thoại).
:picture-in-picture: Áp dụng kiểu cho phần tử khi nó ở chế độ hình trong hình.
:autofill: Áp dụng kiểu cho phần tử khi nó được tự động điền.
:hover: Áp dụng kiểu khi con trỏ chuột di chuyển qua phần tử.
:active: Áp dụng kiểu khi phần tử đang được kích hoạt (ví dụ: khi click vào một nút).
:focus: Áp dụng kiểu khi phần tử đang được focus.
:link, :visited: Áp dụng kiểu cho các liên kết chưa được truy cập và đã được truy cập.
:first-child, :last-child, :nth-child: Áp dụng kiểu cho phần tử con đầu tiên, cuối cùng hoặc phần tử con thứ n của một phần tử cha.

Câu hỏi phỏng vấn CSS nâng cao cho Senior Frontend Developer

Sự khác nhau giữa ::before và :before là gì?

::before là ký hiệu chính xác và hiện đại cho các pseudo-element trong CSS3 và :before được sử dụng trong CSS2.

Cú pháp hai dấu hai chấm (::) phân biệt các pseudo-element với các pseudo-class như :hover.

Keyframe là gì? Cách dùng chúng trong CSS animation

@keyframes định nghĩa chuỗi các kiểu hoặc hoạt ảnh mà một phần tử nên trải qua tại các điểm cụ thể.

Ví dụ:

@keyframes slideIn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

div {
  animation: slideIn 2s ease-in-out;
}

Sự khác biệt giữa translate(), position và margin trong việc di chuyển phần tử

Sự khác biệt giữa translate(), position, và margin trong việc di chuyển phần tử như sau:

translate(): Di chuyển một phần tử khỏi vị trí ban đầu của nó theo các trục X, Y hoặc Z. Sử dụng transform, không ảnh hưởng đến không gian xung quanh.
position: Xác định cách phần tử được định vị trong tài liệu. Các giá trị như absolute, relative, fixed cho phép thay đổi vị trí và có thể làm cho phần tử thoát khỏi dòng tài liệu.
margin: Tạo khoảng cách giữa phần tử và các phần tử khác. Thay đổi giá trị margin sẽ thay đổi vị trí phần tử và ảnh hưởng đến layout của phần tử xung quanh.

Dùng CSS như thế nào để trang tải nhanh hơn?

Để cải thiện tốc độ tải trang web với CSS, các nhà phát triển có thể:

Loại bỏ các kiểu không cần thiết, chú thích và khoảng trắng.
Kết hợp và nén các tệp CSS để giảm số lượng yêu cầu HTTP và kích thước tệp.
Sử dụng ký hiệu ngắn gọn để giảm kích thước mã CSS.
Sử dụng CSS Sprites để kết hợp nhiều hình ảnh nhỏ thành một tệp duy nhất nhằm giảm số lượng yêu cầu HTTP.
Ưu tiên nội dung trên màn hình chính bằng cách sử dụng media queries để tải CSS quan trọng trước.
Sử dụng các thuộc tính CSS hiện đại như transform thay vì các thuộc tính cũ như top và left cho các hoạt động hoạt hình.

Mô tả các thuộc tính CSS Box Alignment và cách sử dụng chúng trong Flexbox và Grid

Các thuộc tính CSS Box Alignment kiểm soát việc căn chỉnh và phân bố khoảng trống giữa và xung quanh các phần tử nội dung trong một container flex hoặc grid. Các thuộc tính chính bao gồm:

justify-content: Căn chỉnh các phần tử dọc theo trục chính.
align-items: Căn chỉnh các phần tử dọc theo trục phụ.
align-self: Cho phép căn chỉnh từng phần tử riêng lẻ theo cách khác nhau.
align-content: Căn chỉnh các dòng flex hoặc track grid.

Làm thế nào để tạo ra thiết kế đáp ứng bằng cách sử dụng media queries CSS?

Các truy vấn media trong CSS cho phép bạn áp dụng các kiểu khác nhau dựa trên đặc điểm của thiết bị hoặc kích thước viewport. Bằng cách định nghĩa các điểm ngắt (breakpoints), bạn có thể tạo một thiết kế đáp ứng (responsive design) thích ứng với các kích thước màn hình khác nhau.

Ví dụ:

@media (max-width: 600px) {
  .element {
    font-size: 14px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .element {
    font-size: 16px;
  }
}

@media (min-width: 1025px) {
  .element {
    font-size: 18px;
  }
}

Làm thế nào để tối ưu hóa CSS cho ứng dụng SPA (Single Page Application) lớn?

Để tối ưu hóa CSS cho ứng dụng SPA lớn, có thể áp dụng những cách sau:

Chia nhỏ code (Code Splitting)

Đây là kỹ thuật cho phép lập trình viên chia code JavaScript thành các phần nhỏ hơn, chỉ được tải khi cần, thay vì tải toàn bộ bundle cùng một lúc. Có thể chia nhỏ code với các công cụ khác nhau, như Webpack, Rollup hoặc Parcel, dynamic imports, lazy loading, route-based splitting.

Sử dụng bộ nhớ đệm (caching) và service worker

Bộ nhớ đệm lưu trữ các tài nguyên thường dùng, như hình ảnh, font chữ, hoặc stylesheet giúp truy xuất nhanh hơn. Service workers là các script chạy nền, chặn yêu cầu mạng để điều khiển cách SPA phản hồi. Có thể sử dụng chúng để hỗ trợ chức năng ngoại tuyến, thông báo đẩy hoặc đồng bộ nền.

Tối ưu hóa hình ảnh và font chữ

Hình ảnh và font chữ thường là tài nguyên lớn nhất và dễ thấy nhất trong SPA, vì vậy tối ưu hóa chúng có thể ảnh hưởng đáng kể đến hiệu suất và tính thẩm mỹ. Để tối ưu hóa hình ảnh, bạn nên chọn định dạng, kích thước và chất lượng phù hợp, sử dụng công cụ nén như ImageOptim, TinyPNG hoặc WebP. Sử dụng hình ảnh phản hồi cho kích thước màn hình và tải hình ảnh chậm (lazy load) để chỉ tải khi chúng nằm trong viewport. Đối với font chữ, sử dụng font web có thể tùy chỉnh và áp dụng phân nhóm font để giảm số lượng ký tự trong tệp font.”

Rút gọn và nén code

Rút gọn và nén code là hai cách đơn giản nhưng hiệu quả để giảm kích thước SPA và tăng tốc độ tải trang. Rút gọn code có nghĩa là loại bỏ các ký tự không cần thiết, như khoảng trắng, chú thích hoặc dấu chấm phẩy và đổi tên biến, hàm thành các tên ngắn hơn. Nén code sử dụng các thuật toán như Gzip hoặc Brotli để giảm số lượng bit cần thiết. Có thể sử dụng các công cụ như UglifyJS, Terser hoặc Babel để rút gọn code JavaScript và HTMLMinifier, CSSNano hoặc PurgeCSS để rút gọn code HTML và CSS.

Sự khác biệt giữa kỹ thuật BEM (Block Element Modifier) và các cách tiếp cận khác trong việc viết CSS có cấu trúc là gì?

Kiến trúc CSS đề cập đến các nguyên tắc tổ chức, mẫu thiết kế và phương pháp được sử dụng để cấu trúc và duy trì mã CSS một cách hiệu quả. Một kiến trúc CSS có hệ thống và mô-đun đảm bảo rằng mã nguồn được tổ chức, mở rộng và bảo trì dễ dàng, đặc biệt đối với các dự án lớn và phức tạp.

Một số phương pháp kiến trúc CSS phổ biến bao gồm OOCSS (CSS hướng đối tượng), BEM (Block Element Modifier), SMACSS (Kiến trúc mô-đun và có thể mở rộng cho CSS) và Atomic Design.

Kiến trúc CSS có thể cải thiện khả năng bảo trì bằng cách:

Mô-đun hóa: Khuyến khích phương pháp mô-đun bằng cách chia nhỏ các thành phần và kiểu dáng thành các đoạn mã nhỏ, có thể tái sử dụng.
Tính nhất quán: Thúc đẩy các quy tắc đặt tên, cấu trúc thư mục và tiêu chuẩn mã hóa nhất quán, giúp các thành viên trong nhóm dễ dàng hiểu dự án và thực hiện thay đổi mà không gây xung đột.
Phân tách mối quan tâm: Đảm bảo rằng cấu trúc mã nguồn tuân theo một mẫu phân tách bố cục, kiểu chữ và thành phần, cho phép lập trình viên làm việc độc lập mà không ảnh hưởng đến các phần khác.
Giảm tính đặc hiệu: Giảm thiểu sự phụ thuộc vào các bộ chọn quá đặc hiệu, điều này có thể dẫn đến mã phình to, lo ngại về bảo trì và các hiệu ứng phụ không mong muốn khi cập nhật.
Tối ưu hóa hiệu suất: Cải thiện hiệu suất trang web bằng cách loại bỏ mã thừa, thúc đẩy khả năng tái sử dụng và tuân theo các phương pháp tốt nhất nhẹ và hiệu quả.
Dễ dàng hợp tác: Giúp nhiều lập trình viên làm việc cùng nhau trên một dự án mà không gây ra xung đột hoặc tạo ra các vấn đề khó gỡ lỗi.
Dễ dàng mở rộng và mở rộng: Đảm bảo rằng các mẫu thiết kế và thành phần có thể được mở rộng, cập nhật hoặc mở rộng với nỗ lực tối thiểu, giúp dễ dàng thêm, sửa đổi hoặc loại bỏ các phần tử khi cần thiết.

Ví dụ:

<div class="button">
  <span class="button__text">Click me</span>
</div>

Animation CSS hoạt động như thế nào và có những thuộc tính liên quan đến animation nào?

CSS animation cho phép thực hiện hoạt ảnh cho các phần tử mà không cần JavaScript.

Thuộc tính animation chỉ định các keyframe của hoạt ảnh, thời gian, hàm thời gian, độ trễ và số lần lặp lại. Các thuộc tính liên quan đến animation bao gồm @keyframes, animation-timing-function, animation-delay và animation-iteration-count.

Đọc thêm: Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến

Làm thế nào để thêm hiệu ứng chuyển màu (gradient) trong CSS?

Để thêm hiệu ứng chuyển màu (gradient) trong CSS có thể sử dụng gradient tuyến tính (Linear Gradients) hoặc gradient radial.

Gradient tuyến tính (Linear Gradients): Bao gồm các chuyển tiếp màu mượt mà theo hướng lên, xuống, trái, phải và chéo. Cần ít nhất hai màu để tạo ra một gradient tuyến tính. Có thể sử dụng nhiều hơn hai màu trong gradient tuyến tính. Điểm bắt đầu và hướng là cần thiết cho hiệu ứng gradient.

Cú pháp:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Gradient radial khác với gradient tuyến tính. Nó bắt đầu từ một điểm duy nhất và tỏa ra ngoài. Theo mặc định, màu đầu tiên bắt đầu từ vị trí trung tâm của phần tử và sau đó mờ dần đến màu cuối cùng về phía cạnh của phần tử. Sự mờ dần xảy ra ở tốc độ bằng nhau cho đến khi được chỉ định.

Cú pháp:

background-image: radial-gradient(shape size at position, start-color, ...);

Làm thế nào để tạo bố cục mansory chỉ sử dụng CSS để hiển thị các thành phần có chiều cao thay đổi?

Bố cục xây dựng (masonry layout) là một kiểu bố cục linh hoạt, thường được sử dụng trong các trang web như Pinterest, Instagram, nơi các phần tử có chiều cao khác nhau xếp chồng lên nhau theo cột, tạo ra một hiệu ứng tự nhiên và hấp dẫn. Loại bố cục này rất phổ biến trong các trang web hiển thị nhiều nội dung có kích thước khác nhau như hình ảnh, bài viết, sản phẩm,…

Để tạo bố cục masonry chỉ sử dụng CSS cho các thành phần có chiều cao thay đổi, lập trình viên có thể sử dụng CSS Grid hoặc flexbox.

Tạo lập hộp kiểm tùy chỉnh chỉ bằng CSS như thế nào?

Dưới đây là cách tạo một checkbox tùy chỉnh bằng CSS:

HTML:

<label class="custom-checkbox"> 
  <input type="checkbox" hidden/> 
  <span class="checkmark"></span> 
</label>

CSS:

.custom-checkbox input[type="checkbox"] { 
  visibility: hidden; 
}

.custom-checkbox .checkmark { 
  height: 20px; 
  width: 20px; 
  background-color: #eee; 
  display: inline-block; 
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark { 
  background-color: blue; 
}

CSS này ẩn checkbox mặc định và sử dụng một span để tạo dấu kiểm tùy chỉnh. Bộ chọn :checked được sử dụng để thay đổi hình thức của checkbox khi nó được chọn.

Cách tốt nhất để đưa tệp CSS vào HTML là gì? Tại sao nên sử dụng @import?

Tệp kiểu dáng bên ngoài – The External Style Sheet (sử dụng thẻ <link> HTML) là phương pháp tốt nhất được sử dụng để liên kết các yếu tố. Việc duy trì và tái sử dụng tệp CSS trên các trang khác nhau dễ dàng và hiệu quả. Thẻ <link> được đặt trong phần <head> của HTML. Để chỉ định một kiểu phương tiện type=”text/css” cho một Cascading Style Sheet, thuộc tính <type> được sử dụng để bỏ qua các kiểu bảng kiểu không được hỗ trợ trong trình duyệt.

Quy tắc @import: Quy tắc @import được sử dụng để nhập một bảng kiểu vào một bảng kiểu khác. Quy tắc này cũng hỗ trợ các truy vấn media để người dùng có thể nhập bảng kiểu phụ thuộc vào media. Quy tắc @import phải được khai báo ở đầu tài liệu sau bất kỳ khai báo @charset nào.

Đặc điểm của @import:

Quy tắc @import được sử dụng để nhập một bảng kiểu vào một trang HTML hoặc một bảng kiểu khác.
Quy tắc @import cũng được sử dụng để thêm các truy vấn media, do đó việc nhập phụ thuộc vào media.
Nó luôn được khai báo ở đầu tài liệu.

Cú pháp:

@import url|string list-of-mediaqueries;

Tổng kết câu hỏi phỏng vấn CSS

Bạn đã trả lời đúng bao nhiêu câu trong số 40 câu hỏi phỏng vấn CSS được ITviec tổng hợp trong bài viết này? Hy vọng rằng với bộ câu hỏi phỏng vấn CSS này, bạn đã có một cái nhìn tổng quan và sâu sắc hơn về CSS.

Ngoài các câu hỏi phỏng vấn CSS trên, hãy tiếp tục tìm hiểu về các khía cạnh khác của CSS và chuẩn bị một portfolio thật chỉn chu để ghi điểm với nhà tuyển dụng nhé.

Câu hỏi phỏng vấn CSS cơ bản cho Junior Frontend Developer

CSS là gì?

Những ưu điểm khi sử dụng CSS trong lập trình Frontend là gì?

Overflow CSS là gì?

Cách liên kết file CSS với file HTML như thế nào?

CSS nội tuyến (Inline CSS)

CSS nội bộ hoặc nhúng (Internal or Embedded CSS)

CSS ngoại bộ (External CSS)

Bộ chọn trong CSS là gì?

Liệt kê các bộ chọn khác nhau trong CSS

Class selector và ID selector khác nhau như thế nào?

Box Model trong CSS là gì?

Pseudo-class là gì?

CSS Combinator là gì?

Float trong CSS hoạt động như thế nào?

Border box khác gì với content box?

Công dụng của ruleset là gì?

Câu hỏi phỏng vấn CSS trung cấp phù hợp cho Middle Frontend Developer

Media queries trong CSS là gì?

Flexbox trong CSS là gì?

Sự khác biệt giữa thuộc tính absolute, relative, fixed và sticky positioning là gì?

CSS Grid khác gì so với Flexbox?

Transition CSS là gì?

transition-property

transition-duration

transition-timing-function

transition-delay

Biến CSS là gì và sử dụng chúng như thế nào?

Thuộc tính box-sizing của CSS có tác dụng gì?

Z-index trong CSS hoạt động như thế nào?

Rem và em là gì và chúng khác nhau như thế nào?

Giải thích sự khác nhau giữa padding và margin?

Bộ tiền xử lý CSS là gì? Kể tên một số loại phổ biến

Nêu điểm khác nhau giữa Inline, Inline-Block và Block

Pseudo-elements và Pseudo-class là gì?

Câu hỏi phỏng vấn CSS nâng cao cho Senior Frontend Developer

Sự khác nhau giữa ::before và :before là gì?

Keyframe là gì? Cách dùng chúng trong CSS animation

Sự khác biệt giữa translate(), position và margin trong việc di chuyển phần tử

Dùng CSS như thế nào để trang tải nhanh hơn?

Mô tả các thuộc tính CSS Box Alignment và cách sử dụng chúng trong Flexbox và Grid

Làm thế nào để tạo ra thiết kế đáp ứng bằng cách sử dụng media queries CSS?

Làm thế nào để tối ưu hóa CSS cho ứng dụng SPA (Single Page Application) lớn?

Sự khác biệt giữa kỹ thuật BEM (Block Element Modifier) và các cách tiếp cận khác trong việc viết CSS có cấu trúc là gì?

Animation CSS hoạt động như thế nào và có những thuộc tính liên quan đến animation nào?

Làm thế nào để thêm hiệu ứng chuyển màu (gradient) trong CSS?

Làm thế nào để tạo bố cục mansory chỉ sử dụng CSS để hiển thị các thành phần có chiều cao thay đổi?

Tạo lập hộp kiểm tùy chỉnh chỉ bằng CSS như thế nào?

Cách tốt nhất để đưa tệp CSS vào HTML là gì? Tại sao nên sử dụng @import?

Tổng kết câu hỏi phỏng vấn CSS

Chia sẻ bài viết