Display Property

• August 24, 2009
• 21 comments

Ở bài trước bạn đã biết rằng tất cả các thành phần xhtml đều có Position Property. Cũng tương tự như vậy tất cả các thành phần xhtml đều có Display Property. Thực tế có khá nhiều giá trị Display Property, nhưng những thành phần hay được sử dụng nhất thường có một giá trị Display Property mặc định là Inline hoặc Block. Video sau đây sẽ minh hoạ cho 2 ví dụ vế sử dụng Display Property kết hợp với Position Property để tạo ra pop up và tool tip

Xem Demo: Display Property
Link Download với định dạng .mp4 chất lượng cao hơn: Megaupload, Mediafire

Sự khác biệt giữa thành phần Inline và Block như sau

• Block Elements như là: đoạn văn bản, heading, danh sách được xếp chồng lên nhau khi hiển thị trên trình duyệt.
• Inline Elements là những thành phần như <a>, <span> và <img> được xếp cạnh nhau khi hiển thị trên trình duyệt. Và nó chỉ xuống dòng khi không còn đủ chỗ trống.


Nhưng cái hay của CSS là chúng ta có thể biến Block Element thành Inline Element và ngược lại, ví dụ:

p {display:inline;}
a {display:block}

Đây là một tính năng rất mạnh cho phép bạn bắt một thành phần Inline phải lấp đầy hộp chứa nó, và rất hữu dụng khi bạn tạo menu drop với CSS.

Một giá trị nữa của Display cũng được sử dụng phổ biến là none. Khi một thành phần nào đó được gán giá trị none, thì thành phần đó và bất cứ cái gì nằm trong nó sẽ bị biến mất khỏi trình duyệt, kể cả khoảng không mà nó lẽ ra phải chiếm nếu được hiển thị cũng bị biến mất như chưa bao giờ từng tồn tại. Tính năng này có điểm khác với Visibility Property với hai giá trị là visible và hidden. Khi một thành phần được gán giá trị là hidden, nó chỉ bị ẩn đi và không hiện ra trên trình duyệt. Nhưng khoảng không nó chiếm vẫn còn đó và không bị mất.