Font size
WorksheetsBox Model: Khái niệm, Width và Height
Total questions: 72
Worksheet time: 36mins
Trong mô hình hộp CSS, thành phần nào nằm giữa content và border?
Content bên trong
Padding ở giữa
Border bao ngoài
Margin ở ngoài cùng
Phần nào của Box Model tạo khoảng cách với các phần tử khác trên trang?
Content tạo nội dung
Padding tăng đệm
Border tạo đường viền
Margin tạo khoảng cách
Chọn các thành phần cấu tạo Box Model theo thứ tự từ trong ra ngoài.
Content, Padding, Border, Margin
Content, Border, Padding, Margin
Padding, Content, Border, Margin
Content, Padding, Margin, Border
Thuộc tính width xác định điều gì trong phần tử HTML?
Chiều rộng vùng nội dung
Độ dày đường viền
Chiều cao tổng thể
Khoảng cách bên ngoài
Thuộc tính height áp dụng cho vùng nào khi dùng Box Model chuẩn?
Toàn bộ gồm padding
Cả margin và border
Chỉ phần border
Vùng nội dung content
Giả sử khai báo div { width: 200px; height: 200px; }. Kết quả hiển thị đúng nhất là gì khi padding và border bằng 0?
Hình vuông 200px nội dung
Hình chữ nhật 400px tổng
Khối tròn 200px
Ô vuông gồm margin
Điều nào đúng về border trong Box Model?
Nằm giữa padding và margin
Nằm trong content
Tạo khoảng cách bên ngoài
Không ảnh hưởng kích thước
Chọn tất cả phát biểu đúng về padding.
Có thể tăng kích thước hộp tổng
Nằm giữa content và border
Ảnh hưởng khoảng cách nội bộ
Tạo khoảng trống với phần tử khác
Thuộc tính border trong CSS dùng để làm gì cho phần tử HTML?
Căn giữa nội dung theo chiều ngang
Tạo và tùy chỉnh đường viền phần tử
Đổi font chữ mặc định của trang
Tăng kích thước toàn bộ phần tử
Một đường viền cơ bản gồm các thành phần nào?
Vị trí (position)
Màu sắc (color)
Kiểu dáng (style)
Độ dày (thickness)
Chọn cú pháp rút gọn đúng cho border theo thứ tự: độ dày, kiểu dáng, màu sắc.
border: 5px solid blue;
border: blue solid 5px;
border: solid 5px blue;
border: 5px blue solid;
Kiểu viền nào hiển thị liền mạch và thường dùng nhất?
double
dashed
dotted
solid
Với khai báo: div { border: 5px solid blue; }, kết quả đúng là gì?
Viền màu xanh, kiểu gạch, dày 5px
Viền màu xanh, kiểu liền, dày 10px
Viền màu xanh, kiểu chấm, dày 5px
Viền màu xanh, kiểu liền, dày 5px
Giá trị màu nào dưới đây hợp lệ trong CSS border?
black
red
#00ff00
rgb(256,0,0)
Developer Tools trong trình duyệt hỗ trợ gì khi kiểm tra border?
Thay đổi ngẫu nhiên màu viền
Tối ưu hóa mã CSS tự động
Tạo tự động các viền mới
Hiển thị trực quan Box Model
Trong Box Model, border nằm ở vị trí nào so với content, padding, margin?
Giữa padding và margin, bao quanh content
Ngoài margin, bao quanh toàn trang
Giữa content và padding, dưới margin
Bên trong content, dưới margin
Chọn phát biểu đúng về đơn vị độ dày của border trong ví dụ học liệu.
Chỉ dùng phần trăm như 10%
Phải dùng mm như 1mm
Có thể dùng px như 1px, 5px, 10px
Chỉ dùng em như 1em
Thuộc tính nào dùng để bo tròn các góc của đường viền?
border-width
border-color
border-style
border-radius
Trong CSS, thuộc tính nào dùng để bo tròn các góc của phần tử?
border-width
border-style
border-radius
box-shadow
Chọn các đơn vị hợp lệ có thể dùng cho giá trị border-radius.
%
vh
px
em
Một phần tử hình vuông được đặt border-radius: 50%. Hình dạng kết quả là gì?
Giữ nguyên hình vuông
Hình chữ nhật bo nhẹ
Hình tròn hoàn hảo
Hình elip nằm ngang
Trong Box Model, lớp nào nằm giữa content và border?
Background
Margin
Padding
Outline
Phân biệt padding và margin: phát biểu nào đúng?
Padding là khoảng cách bên ngoài border
Padding là khoảng cách giữa nội dung và border
Margin là phần nằm trong nội dung
Margin là khoảng cách giữa nội dung và border
Phần tử 'Border' trong Box Model có đặc điểm nào sau đây?
Có thể tùy chỉnh độ dày
Xác định khoảng cách đến phần tử khác
Bao quanh phần tử
Có thể tùy chỉnh màu sắc
Trong CSS, padding mô tả điều gì trong hộp phần tử?
Khoảng cách từ nội dung đến đường viền
Khoảng cách giữa phần tử và phần tử khác
Độ dày đường viền bao quanh phần tử
Kích thước nội dung bên trong phần tử
Thuộc tính nào thiết lập khoảng cách bên ngoài đường viền của phần tử?
box-sizing
padding
margin
border-width
Khi viết padding: 20px;, kết quả áp dụng như thế nào?
Cả bốn hướng đều 20px
Chỉ left và right là 20px
Top 10px, bottom 30px, left/right 20px
Chỉ top và bottom là 20px
Chọn tất cả các thuộc tính hướng của padding có trong CSS.
padding-bottom
padding-right
padding-top
padding-left
padding-inline
Cho khai báo .box { padding: 15px 30px; }, giá trị áp dụng cho các hướng là gì?
Trên/dưới 30px, trái/phải 15px
Trên/phải 15px, dưới/trái 30px
Trên/dưới 15px, trái/phải 30px
Trên/trái 30px, dưới/phải 15px
Viết tắt padding với ba giá trị: padding: 10px 30px 20px; tương ứng lần lượt với hướng nào?
Trên, trái/phải, dưới
Phải, dưới, trái
Trên, phải, dưới
Trên, phải/trái, dưới
Viết tắt padding với bốn giá trị theo thứ tự chuẩn là gì?
Trên – trái – dưới – phải
Trên – phải – dưới – trái
Phải – trái – dưới – trên
Trái – phải – trên – dưới
Margin là khoảng cách được đo từ đâu đến đâu?
Từ mép viewport đến nội dung
Từ đường viền ra ngoài tới phần tử khác
Từ nội dung đến đường viền
Từ viền đến border-radius
Chọn tất cả các thuộc tính hướng của margin có trong CSS.
margin-left
margin-top
margin-inside
margin-bottom
margin-right
Khai báo margin: 10px 20px 30px 40px; áp dụng lần lượt cho hướng nào?
Phải – dưới – trái – trên
Trên – trái – dưới – phải
Trái – phải – trên – dưới
Trên – phải – dưới – trái
Cho .container { margin: 20px auto; }, kết quả hiển thị là gì?
Căn giữa theo chiều ngang, trên/dưới 20px
Căn giữa theo chiều dọc, trái/phải 20px
Không thay đổi vị trí, chỉ thêm 20px mọi hướng
Chỉ áp dụng 20px cho top, các hướng khác 0
Điểm khác biệt cốt lõi giữa margin và padding là gì?
Cả hai đều bên ngoài viền
Cả hai đều bên trong viền
Padding bên trong viền, margin bên ngoài
Margin bên trong viền, padding bên ngoài
Với thuộc tính shorthand margin: 10px 30px;, giá trị áp dụng cho các hướng nào?
Trên/dưới 10px, trái/phải 30px
Trên/dưới 30px, trái/phải 10px
Trên/trái 30px, dưới/phải 10px
Trên/phải 10px, dưới/trái 30px
Khi cần căn giữa một phần tử khối theo chiều ngang trong bố cục có chiều rộng cố định, lựa chọn hợp lý là gì?
border: auto;
padding: auto auto;
margin-left: auto; margin-right: auto;
padding-left: auto; padding-right: auto;
Trong CSS box model, thứ tự áp dụng khi dùng ba giá trị cho margin là gì?
Trên, phải/trái, dưới
Trái, phải, trên
Phải, dưới, trái
Trên, trái/phải, dưới
Thuộc tính display trong CSS có mục đích chính nào sau đây?
Quyết định cách phần tử hiển thị trên web
Thay đổi phông chữ cho toàn trang
Tối ưu hóa tốc độ tải máy chủ
Tạo dữ liệu động từ API
Phần tử nội tuyến (inline) có đặc điểm nào đúng?
Chỉ chiếm chiều rộng vừa đủ nội dung
Chiếm toàn bộ chiều rộng phần tử cha
Tự động xuống dòng sau khi kết thúc
Luôn có width và height hoạt động đầy đủ
Phần tử khối (block) thường có hành vi nào?
Không thể chứa phần tử khác
Không bao giờ xuống dòng
Chỉ chiếm theo nội dung văn bản
Chiếm toàn bộ chiều rộng có sẵn
Trong Box Model, các thuộc tính nào không tác dụng với phần tử inline?
padding, border
width, height
margin-top, margin-bottom
margin-left, margin-right
Khi nào nên chuyển display của một phần tử từ inline sang block?
Khi cần ẩn phần tử khỏi DOM
Khi muốn hiển thị cùng dòng với văn bản
Khi cần dùng đầy đủ Box Model
Khi muốn bỏ toàn bộ khoảng cách
Giá trị display: inline-block mang lại lợi ích gì?
Kết hợp đặc tính inline và block
Biến phần tử thành bảng dữ liệu
Ẩn phần tử khỏi trình duyệt
Chỉ hiển thị theo chiều dọc
Chọn các thẻ HTML điển hình cho phần tử block.
span, a
strong, em
h1–h6
div, p
Điểm hạn chế của inline khiến việc tùy chỉnh bố cục phức tạp là gì?
Một số thuộc tính Box Model không hoạt động
Không thể thêm text
Luôn có vị trí tuyệt đối
Luôn chiếm toàn bộ chiều rộng
Khi chuyển một phần tử block sang inline, kết quả mong muốn là gì?
Chiếm toàn bộ chiều rộng cha
Hiển thị trên cùng dòng như văn bản
Tự động tạo khối chứa
Kích hoạt width và height
Phần tử inline thường không làm điều gì sau đây?
Xuống dòng sau khi kết thúc
Nằm cùng dòng với văn bản
Chiếm đúng theo nội dung
Chứa text và icon
Trong ví dụ CSS, class .inline-example dùng display nào và đặc điểm của nó là gì?
display flex, tự co giãn dòng
display inline-block, chiếm nửa dòng
display block, chiếm toàn dòng
display inline, chiếm theo nội dung
Trong đoạn mã, .block-example có các thuộc tính nào thể hiện đặc trưng Box Model?
width: 200px;
height: 50px;
margin: 10px 0;
padding: 20px;
Khi dùng inline-block trong ví dụ, ưu điểm thực tế được nêu là gì?
Tối ưu GPU cho chuyển động
Kết hợp ưu điểm của inline và block
Loại bỏ hoàn toàn khoảng trắng
Tự động thay đổi sang flex
Theo phần kết luận, lựa chọn phổ biến để tạo giao diện linh hoạt và đẹp mắt là gì?
flex thay thế mọi display
pure inline cho mọi phần tử
inline-block cho các khối
block cho tất cả tiêu đề
Trong hệ màu RGB của CSS, mỗi kênh nhận giá trị trong khoảng nào?
0–1 cho chuẩn hóa
-255–255 cho biên độ
0–100 cho phần trăm
0–255 cho từng kênh
Đoạn mã minh họa màu rgb(0, 255, 0) biểu thị điều gì?
Màu đỏ thuần
Màu xanh lá thuần
Màu xanh dương nhạt
Màu đen hoàn toàn
RGBA trong CSS bổ sung thành phần nào so với RGB?
Alpha để kiểm soát độ trong suốt
Gamma để cân bằng sáng
Beta để tăng bão hòa
Delta để trộn kênh
Khi muốn tạo nút bấm hoặc menu ngang với các khối linh hoạt nằm trên cùng một dòng, giá trị display nào thường dùng?
none cho ẩn phần tử
inline-block cho từng item
block cho toàn bộ khối
inline cho container
Trong CSS, giá trị alpha trong rgba(…) có nhiệm vụ gì?
Điều chỉnh độ trong suốt của màu cụ thể
Điều chỉnh độ mờ toàn bộ phần tử
Thay đổi chế độ hiển thị block/inline
Ẩn phần tử khỏi cây DOM
Chọn phát biểu đúng về dải giá trị của opacity và alpha channel.
Opacity 0–10, alpha 0–1
Opacity 0–1, alpha 0–1
Opacity 0–1, alpha 0–100
Opacity 0–100, alpha 0–255
Điều gì xảy ra khi đặt opacity: 0 cho một phần tử?
Chỉ màu nền trở nên nhạt đi
Phần tử biến mất khỏi bố cục
Phần tử trong suốt nhưng vẫn chiếm chỗ
Phần tử chuyển sang inline-block
Vì sao opacity khác với display: none?
Opacity xóa phần tử khỏi DOM
Opacity giữ phần tử trong luồng bố cục
Opacity chỉ ảnh hưởng đến margin
Opacity làm phần tử co lại
Chọn tất cả tình huống phù hợp để dùng alpha channel (rgba) thay vì opacity.
Làm nhạt màu nền nhưng giữ chữ rõ
Ẩn phần tử khỏi bố cục trang
Giảm độ đậm của viền cụ thể
Làm mờ toàn bộ thẻ và nội dung bên trong
Trong ví dụ: div { background-color: blue; opacity: 0.5; }, hiệu ứng tổng thể là gì?
Phần tử biến mất khỏi bố cục
Chỉ nền xanh nhạt đi
Chỉ văn bản mờ đi
Cả nền và nội dung mờ đi
Phát biểu nào mô tả đúng phạm vi tác động của opacity so với alpha channel?
Opacity chỉ tác động màu cụ thể, alpha tác động toàn phần tử
Cả hai chỉ tác động nền
Opacity tác động toàn phần tử, alpha chỉ tác động màu cụ thể
Cả hai chỉ tác động văn bản
Khi cần tạo nền xanh trong suốt 30% nhưng chữ đen vẫn rõ ràng, cấu hình phù hợp là gì?
color: rgba(0,0,0,0.3)
background-color: rgba(0,0,255,0.3)
background-color: blue; opacity: 0.3
display: none; background-color: blue
Thuộc tính position trong CSS dùng để làm gì trong thiết kế giao diện web?
Tối ưu hiệu năng tải ảnh trên máy chủ
Tạo hiệu ứng chuyển động bằng JavaScript
Thay đổi phông chữ mặc định của văn bản
Xác định cách phần tử được định vị trên trang
Điều nào mô tả đúng position: static?
Giá trị mặc định, phần tử theo luồng tài liệu
Phần tử thoát khỏi luồng, có thể chồng lớp
Phần tử cố định tại mép màn hình khi cuộn
Phần tử định vị theo phần tử chứa gần nhất
Với position: static, các thuộc tính top, left, right, bottom có tác dụng gì?
Không có tác dụng thay đổi vị trí
Dịch chuyển tương đối vài pixel
Cố định vị trí tại tọa độ tuyệt đối
Chỉ hoạt động khi display: block
Position: relative khác position: static ở điểm nào quan trọng nhất?
Cho phép offset bằng top/left/right/bottom
Tự động căn giữa theo chiều ngang
Luôn nằm phía trên các phần tử khác
Buộc phần tử có chiều rộng cố định
Khi áp dụng position: relative và top: 10px; left: 5px;, điều gì xảy ra?
Phần tử biến mất khỏi luồng bình thường hoàn toàn
Phần tử dịch từ vị trí ban đầu 10px xuống, 5px sang phải
Phần tử dịch đến góc trái trên của trang
Phần tử cố định khi cuộn trang
Chọn tất cả phát biểu đúng về position: relative.
Cho phép dịch chuyển bằng các offset
Vẫn chiếm chỗ trong luồng tài liệu
Là giá trị mặc định của position
Làm các offset bị bỏ qua hoàn toàn
Mục đích chính của thuộc tính position là gì?
Kiểm soát cách định vị và bố trí phần tử
Quản lý sự kiện bàn phím và chuột
Thiết lập kích thước ảnh và viền bo góc
Thay đổi màu nền và độ mờ phần tử
