Câu 1:Trong CSS, thứ tự ưu tiên (specificity) nào sau đây là đúng khi sắp xếp từ cao xuống thấp?
💡 Lời giải chi tiết:
Theo quy tắc tính độ ưu tiên trong CSS, Inline styles luôn có trọng số cao nhất, tiếp theo lần lượt là ID, Class (bao gồm cả thuộc tính và giả lớp) và cuối cùng là Element. Kết luận Lý giải: Inline styles, ID, Class, Element
Câu 2:Thuộc tính 'box-sizing: border-box' có tác dụng gì đối với kích thước của một phần tử?
💡 Lời giải chi tiết:
Khi thiết lập 'border-box', giá trị chiều rộng và chiều cao được xác định sẽ bao gồm cả phần đệm (padding) và đường viền (border) thay vì cộng thêm chúng vào bên ngoài. Kết luận Lý giải: Bao gồm cả padding và border vào kích thước tổng thể của phần tử
Câu 3:Trong mô hình Flexbox, thuộc tính nào dùng để căn chỉnh các mục dọc theo trục chính (main axis)?
💡 Lời giải chi tiết:
Thuộc tính 'justify-content' được sử dụng trong Flexbox để xác định cách phân phối không gian giữa và xung quanh các mục linh hoạt dọc theo trục chính của vùng chứa. Kết luận Lý giải: justify-content
Câu 4:Để khai báo một biến CSS (Custom Property) có phạm vi sử dụng trên toàn bộ tài liệu, ta nên đặt nó ở đâu?
💡 Lời giải chi tiết:
Giả lớp ':root' đại diện cho phần tử gốc của tài liệu (thường là html) và là nơi tiêu chuẩn để khai báo các biến CSS toàn cục nhằm đảm bảo tính kế thừa cao nhất. Kết luận Lý giải: Trong giả lớp :root
Câu 5:Đơn vị 'rem' trong CSS tính toán kích thước dựa trên yếu tố nào?
💡 Lời giải chi tiết:
Đơn vị 'rem' (root em) là một đơn vị tương đối có giá trị được tính toán dựa trên cỡ chữ (font-size) của phần tử gốc trong trang web. Kết luận Lý giải: Cỡ chữ của phần tử gốc (html)
Câu 6:Thuộc tính 'position: sticky' sẽ hoạt động như thế nào khi người dùng cuộn trang?
💡 Lời giải chi tiết:
Một phần tử 'sticky' được coi là nằm trong luồng tài liệu bình thường (relative) cho đến khi vị trí cuộn đạt tới điểm ngưỡng thì nó sẽ 'dính' lại như một phần tử 'fixed'. Kết luận Lý giải: Hoạt động như 'relative' cho đến khi đạt tới một ngưỡng cuộn xác định
Câu 7:Để thuộc tính 'z-index' có hiệu lực trên một phần tử, điều kiện cần thiết về thuộc tính 'position' là gì?
💡 Lời giải chi tiết:
Thuộc tính 'z-index' chỉ có tác dụng đối với các phần tử đã được thiết lập định vị (positioned elements), nghĩa là giá trị 'position' phải là relative, absolute, fixed hoặc sticky. Kết luận Lý giải: Phải có giá trị khác 'static'
Câu 8:Sự khác biệt cơ bản nhất giữa 'display: none' và 'visibility: hidden' là gì?
💡 Lời giải chi tiết:
Trong khi 'display: none' ẩn phần tử và giải phóng hoàn toàn không gian mà nó chiếm giữ, 'visibility: hidden' chỉ làm phần tử vô hình nhưng vẫn giữ nguyên diện tích của nó trong bố cục. Kết luận Lý giải: 'display: none' loại bỏ phần tử khỏi bố cục, còn 'visibility: hidden' thì không
Câu 9:Giá trị mặc định của thuộc tính 'flex-grow' trong một mục flex là bao nhiêu?
💡 Lời giải chi tiết:
Mặc định các mục flex có giá trị 'flex-grow' là 0, điều này ngăn cản chúng tự động mở rộng để lấp đầy không gian trống còn lại trong vùng chứa. Kết luận Lý giải: 0
Câu 10:Ký hiệu nào sau đây được dùng để chọn tất cả các phần tử con trực tiếp của một phần tử cha?
💡 Lời giải chi tiết:
Bộ chọn con trực tiếp (child combinator) sử dụng ký hiệu dấu lớn hơn (>) để chỉ nhắm mục tiêu vào các phần tử là con cấp một của phần tử cha được chỉ định. Kết luận Lý giải: Dấu lớn hơn (>)
Câu 11:Trong thuộc tính 'background-size', giá trị 'cover' có ý nghĩa gì?
💡 Lời giải chi tiết:
Giá trị 'cover' sẽ điều chỉnh kích thước hình nền sao cho nó bao phủ toàn bộ diện tích của phần tử, có thể dẫn đến việc một phần hình ảnh bị cắt bớt để duy trì tỷ lệ. Kết luận Lý giải: Phóng to hình ảnh để che phủ toàn bộ vùng chứa
Câu 12:Đơn vị 'fr' (fractional unit) trong CSS Grid đại diện cho giá trị nào?
💡 Lời giải chi tiết:
Đơn vị 'fr' được thiết kế riêng cho CSS Grid để phân chia không gian còn trống trong vùng chứa lưới thành các phần bằng nhau hoặc theo tỷ lệ quy định. Kết luận Lý giải: Một phần không gian trống trong grid container
Câu 13:Cú pháp viết tắt đúng của thuộc tính 'transition' theo thứ tự chuẩn là gì?
💡 Lời giải chi tiết:
Khi sử dụng thuộc tính viết tắt 'transition', thứ tự các giá trị nên là tên thuộc tính, thời gian thực hiện, hàm tốc độ và cuối cùng là thời gian trễ. Kết luận Lý giải: property duration timing-function delay
Câu 14:Khi sử dụng phần tử giả '::before' hoặc '::after', thuộc tính nào sau đây là bắt buộc phải khai báo?
💡 Lời giải chi tiết:
Các phần tử giả như '::before' và '::after' sẽ không được trình duyệt tạo ra và hiển thị nếu thiếu thuộc tính 'content', ngay cả khi giá trị của nó là một chuỗi rỗng. Kết luận Lý giải: content
Câu 15:Quy tắc bắt buộc về khoảng trắng khi sử dụng phép toán cộng (+) hoặc trừ (-) trong hàm 'calc()' là gì?
💡 Lời giải chi tiết:
Trong hàm 'calc()', các toán tử '+' và '-' phải được bao quanh bởi khoảng trắng để trình duyệt không nhầm lẫn chúng với dấu âm hoặc dương của các giá trị số. Kết luận Lý giải: Phải có khoảng trắng ở hai bên toán tử
Câu 16:Thuộc tính 'flex-basis' trong Flexbox có vai trò gì?
💡 Lời giải chi tiết:
Thuộc tính 'flex-basis' dùng để thiết lập kích thước ban đầu của một mục flex trước khi trình duyệt thực hiện việc phân bổ không gian trống theo các hệ số co giãn. Kết luận Lý giải: Xác định kích thước khởi điểm của phần tử flex
Câu 17:Giá trị nào của thuộc tính 'overflow' sẽ luôn hiển thị thanh cuộn bất kể nội dung có tràn hay không?
💡 Lời giải chi tiết:
Khi giá trị 'scroll' được sử dụng, các thanh cuộn sẽ luôn xuất hiện trên phần tử để giữ cho giao diện ổn định, ngay cả khi nội dung hoàn toàn nằm gọn bên trong. Kết luận Lý giải: scroll
Câu 18:Mục đích chính của thuộc tính 'aspect-ratio' trong CSS hiện đại là gì?
💡 Lời giải chi tiết:
Thuộc tính 'aspect-ratio' cho phép các nhà phát triển dễ dàng thiết lập và duy trì một tỷ lệ giữa chiều rộng và chiều cao cho phần tử mà không cần các kỹ thuật đệm (padding) phức tạp. Kết luận Lý giải: Duy trì tỷ lệ khung hình cố định cho phần tử
Câu 19:Bộ chọn thuộc tính '[href^="https"]' sẽ nhắm đến các liên kết có đặc điểm nào?
💡 Lời giải chi tiết:
Ký hiệu dấu mũ (^) trong bộ chọn thuộc tính CSS được sử dụng để lọc các phần tử có giá trị thuộc tính bắt đầu bằng một chuỗi văn bản cụ thể. Kết luận Lý giải: Các liên kết có giá trị thuộc tính href bắt đầu bằng 'https'
Câu 20:Sự khác biệt về kế thừa giữa 'opacity: 0.5' và màu nền 'rgba(0,0,0,0.5)' là gì?
💡 Lời giải chi tiết:
Thuộc tính 'opacity' áp dụng độ trong suốt cho toàn bộ phần tử bao gồm cả các phần tử con, trong khi 'rgba' chỉ áp dụng độ trong suốt cho màu sắc cụ thể của chính phần tử đó. Kết luận Lý giải: Opacity ảnh hưởng đến toàn bộ phần tử và các phần tử con, còn RGBA chỉ ảnh hưởng đến màu được chỉ định
Câu 21:Trong thuộc tính 'font-weight', giá trị số nào tương đương với từ khóa 'bold'?
💡 Lời giải chi tiết:
Theo quy ước chuẩn của CSS, từ khóa 'bold' được ánh xạ tới giá trị trọng số font là 700, trong khi 'normal' tương ứng với 400. Kết luận Lý giải: 700
Câu 22:Trong thuộc tính 'box-shadow: 10px 5px 5px black', giá trị '10px' xác định thành phần nào của bóng?
💡 Lời giải chi tiết:
Theo cú pháp của 'box-shadow', tham số bắt buộc đầu tiên luôn xác định khoảng cách mà bóng sẽ lệch theo phương ngang so với phần tử. Kết luận Lý giải: Độ lệch ngang của bóng
Câu 23:Để đảo ngược thứ tự hiển thị của các mục trong một vùng chứa flex theo chiều ngang, ta sử dụng giá trị nào?
💡 Lời giải chi tiết:
Thuộc tính 'flex-direction' với giá trị 'row-reverse' sẽ sắp xếp các mục flex theo hàng ngang nhưng theo thứ tự ngược lại so với luồng văn bản thông thường. Kết luận Lý giải: row-reverse
Câu 24:Bộ chọn 'li:nth-child(3n)' sẽ áp dụng kiểu dáng cho những phần tử nào trong danh sách?
💡 Lời giải chi tiết:
Công thức '3n' trong giả lớp ':nth-child' nhắm mục tiêu vào mọi phần tử có thứ tự là bội số của 3 trong danh sách các phần tử anh em. Kết luận Lý giải: Các phần tử ở vị trí thứ 3, 6, 9...
Câu 25:Thuộc tính nào giúp thiết lập khoảng cách giữa các hàng và các cột trong CSS Grid một cách đồng thời?
💡 Lời giải chi tiết:
Thuộc tính 'gap' (trước đây là grid-gap) là cách viết tắt hiệu quả để tạo ra khoảng không gian trống giữa các ô lưới mà không cần dùng đến margin cho từng phần tử con. Kết luận Lý giải: gap