Lập trình

Chia sẻ các mẹo và kinh nghiệm lập trình.

Giải pháp

[Lập trình Front-end] Bài 7 - Thuộc tính Display và cách hiển thị một phần tử HTML trong mô hình hộp

Trong HTML có 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 là bởi vì cách thức hiển thị của chúng
Trong HTML có 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 là bởi vì cách thức hiển thị của chúng (ví dụ như các phần tử div, p, h1, h2, h3, … đượ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ư span, i, u, … đượ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). 
 
Trong CSS, ban đầu mỗi phần tử đều được thiết lập thuộc tính display 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 với các phần tử như div, p, h1, … thì mặc định chúng được thiết lập thuộc tính display với giá trị block, cho nên chúng sẽ hiển thị dưới dạng khối.
 
Đối với các phần tử như span, i, u, … thì mặc định chúng được thiết lập thuộc tính display với giá trị inline, 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ị cho thuộc tính display 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ử đó.
 
Ví dụ:
- Cách thức hiển thị của phần tử span được chuyển sang dạng khối.
- Cách thức hiển thị của phần tử div được chuyển sang dạng nội tuyến.
 
span{
display:block;
}
div{
display:inline;
}

 

Bài viết liên quan:

Gọi điện
Gọi điện
Zalo
Zalo
Nhấn để Dùng thử