Inline trong css

- Trong loạt tài liệu hướng dẫn học HTML thì tôi đã từng giới thiệu sơ qua với các bạn về hai loại phần tử, đó chính là phần tử khối và phần tử nội tuyến, lý do mà các phần tử này được phân loại như vậy

,

,

,

, . . . . được liệt vào nhóm phần tử khối là do khi hiển thị thì chúng luôn bắt đầu trên một hàng mới và trải dài từ trái sang phải chiếm toàn bộ chiều rộng phần content của cha chúng, còn các phần tử như , , , . . . . được liệt vào nhóm phần tử nội tuyến là do khi hiển thị thì chúng sẽ tiếp nối trên hàng hiện tại và chiều rộng phụ thuộc vào kích cỡ của nội dung nằm ở bên trong chúng)

- Do đó . tại sao tất cả đều là phần tử, mà phần tử này thì lại có cách hiển thị như thế này, phần tử kia thì lại có cách hiển thị như thế kia. ?

❏ TRẢ LỜI. Trong CSS, ban đầu mỗi phần tử đều được thiết lập thuộc tính hiển thị với một giá trị mặc định, giá trị này sẽ quyết định cách thức hiển thị của phần tử, ví dụ:

• Đối chiếu với các phần tử như

  ,

  ,

  ,. . . thì mặc định chúng được thiết lập thuộc tính hiển thị với khối giá trị, vì vậy chúng sẽ hiển thị dưới dạng khối

• Đối với các phần tử như , , ,. . . thì mặc định chúng được thiết lập thuộc tính hiển thị với giá trị nội tuyến, cho nên chúng sẽ hiển thị dưới dạng nội tuyến.

⛔ Chỉ cần thiết lập lại giá trị hiển thị thuộc tính của phần tử thì đồng nghĩa với việc chúng ta có thể thay đổi cách thức hiển thị của phần tử đó

- Cách thức hiển thị của phần tử được chuyển sang định dạng khối.

- Cách hiển thị của phần tử

được chuyển sang định dạng nội tuyến

---

Xem ví dụ

- Tuy nhiên, cách thức hiển thị của phần tử không chỉ dừng lại ở hai định dạng khối & nội tuyến, mà thực ra nó còn có rất nhiều định dạng khác nữa, dưới đây hiển thị là danh sách các giá trị (cũng chính là cách thức . Các bạn vui lòng bấm vào hình để tìm hiểu chi tiết khi chúng ta sử dụng giá trị đó thì cách thức hiển thị của các phần tử sẽ trông như thế nào nhé

nội tuyến

- Phần tử sẽ hiển thị dưới dạng nội tuyến

chặn

- Phần tử sẽ hiển thị dưới dạng khối

chặn Nội tuyến

- Phần tử sẽ hiển thị dưới dạng khối nội tuyến

không ai

- Phần tử sẽ bị ẩn đi

uốn cong

- Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng khối

lưới

- Phần tử sẽ hiển thị dưới dạng một cái thùng chứa lưới dạng khối

inline-flex

- Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng nội tuyến

lưới nội tuyến

- Phần tử sẽ hiển thị dưới dạng một cái thùng chứa lưới dạng nội tuyến

mục danh sách

- Cách hiển thị của phần tử sẽ giống với phần tử

cái bàn

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng chú thích

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng-cột-nhóm

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng-tiêu đề-nhóm

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng-chân-nhóm

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng-hàng-nhóm

- Cách hiển thị của phần tử sẽ giống với phần tử

ô bảng

- Cách hiển thị của phần tử sẽ giống với phần tử

bảng-cột

- Cách hiển thị của phần tử sẽ giống với phần tử

hàng trong bảng

- Cách hiển thị của phần tử sẽ giống với phần tử

- Khi chúng ta thiết lập thuộc tính hiển thị với giá trị nội tuyến thì phần tử sẽ hiển thị dưới dạng nội tuyến

- Một phần tử hiển thị dưới dạng nội tuyến sẽ có các đặc điểm như sau

• Phần tử hiển thị kết nối trên hàng hiện tại
• Chiều rộng của phần tử phụ thuộc vào kích thước của nội dung nằm ở bên trong nó
• Chúng ta không thể sử dụng các thuộc tính width & height để thiết lập kích thước cho phần tử

---

    Xem ví dụ
    


    
Tài liệu học 
Lập Trình Web
 miễn phí

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính hiển thị với khối giá trị thì phần tử sẽ hiển thị dưới dạng khối

- Một phần tử hiển thị dưới dạng khối sẽ có các đặc điểm như sau

• Phần tử luôn bắt đầu trên một hàng mới
• Chiều rộng của phần tử sẽ trải dài từ bên trái qua phải ( chiếm toàn bộ chiều rộng của phần nội dung của cha nó)
• Chúng ta có thể sử dụng các thuộc tính width & height để thiết lập lại kích thước cho phần tử

---

    Xem ví dụ
    


    
Tài liệu học Lập Trình Web miễn phí

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính hiển thị với giá trị khối nội tuyến thì phần tử sẽ hiển thị dưới dạng khối nội tuyến

- Một phần tử hiển thị bên dưới dạng khối nội tuyến sẽ có các đặc điểm như sau

• Phần tử hiển thị kết nối trên hàng hiện tại
• Chiều rộng của phần tử phụ thuộc vào kích thước của nội dung nằm ở bên trong nó. Tuy nhiên, chúng ta có thể sử dụng các thuộc tính width & height để thiết lập lại kích thước cho phần tử

---

    Xem ví dụ
    


    
Tài liệu học Lập Trình Web miễn phí

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính hiển thị với value none thì phần tử sẽ bị ẩn đi (giống như không tồn tại)

---

    Xem ví dụ
    


    1) Tài liệu học HTML
    2) Tài liệu học CSS
    3) Tài liệu học JavaScript

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính hiển thị với giá trị flex thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex, nó thường được sử dụng kết hợp với lệnh truy vấn @media để thiết kế giao diện đáp ứng (dạng giao diện)

- Các bạn sẽ được khám phá chi tiết cách sử dụng nhóm thuộc tính grid trong các bài hướng dẫn tiếp theo