thuộc tính "display"

display là một trong số những thuộc tính quan trọng bực nhất của CSS'để kiểm soát giao diện (layout). Bất kì phần tử nào trên web cũng có một giá trị display mặc dịnh, tùy thuộc vào loại phần tử. Hầu hết các phần tử HTML trên web có thuộc tính display là block hoặc inline. Một phần tử dạng block (khối) thường được gọi là phần tử khối. Một phần tử cùng dòng (inline) thì đươc gọi là phần tử cùng dòng (inline element), tất nhiên rồi :-)

block

<div>

div là phần tử dạng khối tiêu chuẩn. Cứ khai báo một div là anh em coder lại có một khối không gian HTML dạng block. Một phần tử khối sẽ bắt đầu từ dòng đầu tiên bên trái và kéo dài không gian đến hết bên phải, theo những thuộc tính mà nó được quy định theo. Nói một cách đơn giản, khi có hai phần tử khối, chúng sẽ luôn luôn xếp chồng lên nhau như hai viên gạch. Một số phần tử khối khác gồm có thẻ p, form, một số thẻ mới trong HTML5 như header, footer, section vân vân mây mây... Những thẻ trên là quan trọng nhứt rồi.

</div>

inline

span là phần tử cùng dòng tiêu chuẩn. Một phần tử cùng dòng có thể "gói" text trong một đoạn văn <span> như này</span> mà không ảnh hưởng tới đặc tính về vị trí của đọan văn đó. Thẻ a là một trong số những thẻ cùng dòng thường dùng nhất, khi bạn sẽ dẫn link với thẻ này. Nói một cách nôm na thì các phần tử (thẻ) nào mặc định là inline, khi xếp bên nhau, thay vì như hai viên gạch chồng lên nhau, chúng giống như hai toa tầu của một đoàn tầu ghép vào nhau.

none

Chú ý rằng display còn có thể thiết lập là none. Một số phần tử đặc biệt như script có giá trị mặc định này. Trên thực tế, người ta hay dùng JavaScript để ẩn hoặc hiện một đối tượng nào đó, bằng việc thay đổi giá trị của display, thay vì thực sự xóa hoặc tạo lại một phần tử HTML nào đấy.

Chú ý nữa là thuộc tính display khác với thuộc tính visibility. Thiết lập display thành none sẽ render trang web theo kiểu element HTML không tồn tại. Trong khi đó, khi thiết lập visibility: hidden;, phần tử HTML đó sẽ bị ẩn, nhưng nó vẫn chiếm không gian của trang, như lúc nó hiển thị vậy.

You found me!

Các giá trị khác của thuộc tính display

Có khá nhiều các giá trị khác cho thuộc tính display , chẳng hạn như: list-itemtable. Xem thêm tại đây. Chúng ta sẽ thảo luận về inline-block flex sau này. Hiện nay, xu thế mới nhất là dùng grid.

thêm tí hành tỏi:

Chú ý rằng tất cả các thẻ đều có giá trị display mặc định, nhưng chúng ta luôn luôn ghi đè được. Tất nhiên, sẽ khá là dzô dziên nếu ép kiểu của div sang dạng inline, nhưng trong những tình huống cụ thể, chúng ta có thể linh hoạt thiết lập. Một tình huống khá quen thuộc là chúng ta thiết lập thẻ li thành dạng inline cho các elements của menu dạng thẳng đứng.

2 / 20
  • Creative Commons License