CSS Display – Serie CSS – Phần 9

Serie Css

Thuộc tính display

Định nghĩa: xác định thuộc tính hiển thị của phần tử ( loại render) .

"The display property specifies the display behavior (the type of rendering box) of an element"

Trong HTML, giá trị thuộc tính hiển thị mặc định được lấy từ các đặc thù của HTML hoặc từ biểu định kiểu mặc định của trình duyệt / người dùng. Giá trị mặc định trong XML là inline, bao gồm các phần tử SVG.
Thuộc tính display khá nhiều, mình sẽ liệt kê các kiểu hay dùng nhất, bao gồm :

– block : phần tử là 1 khối
– inline : phần tử trên 1 hàng
– table (table-cell / table-column / table-row) : phần tử theo cột hàng
– grid : phần tử dạng lưới
– flex : phần tử linh hoạt
– none : ẩn phần tử ( tương đồng với opacity: 0 / visibility: hidden , nhưng cách áp dụng khác nhau )

Nghe có vẻ khá khó hiểu hen.

Nói chung thì với display, chúng ta có thể dễ dàng thiết kế một layout responsive tương thích với mọi thiết bị dựa vào display:none hoặc display:block/flex .v.v..

Cùng ví dụ để dễ hiểu hơn về khái niệm cũng như các thuộc tính:

Nhìn chung thì chúng có vẻ khá giống nhau nhưng cách áp dụng vào project thì nó lại khác nhau. Như inline-block, thường dùng khi chúng ta muốn các phần tử nằm trên 1 hàng. block để cố định phần tử ko bị chồng chéo vs các phần tử khác. Ngoài ra trường hợp đặc biệt là flex và grid sẽ tìm hiểu ở một bài khác vì nó có khá nhiều thuộc tính đi kèm để xây dựng layout website.

By admin

Tôi là Mai Văn Truyền, đang hướng tới một lập trình viên website chuyên nghiệp. Đây là blog để chia sẻ những kinh nghiệm, kiến thức của tôi. Chúc các bạn thành công.