Giới thiệu thuộc tính display trong CSS

Nếu bạn đang khởi đầu học CSS, thì display là thuộc tính căn bản cần phải nắm được vì bạn có thể sẽ mất rất là nhiều thời gian để fix lỗi CSS nếu như không thấu hiểu cách hoạt động của thuộc này. Tin tôi đi – Tôi đã viết rất là nhiều CSS mà không biết đúng đắn mình đang làm gì & tôi đã học được rằng tốt hơn cả là hãy hiểu các nguyên tắc hoạt động của CSS thay vì chỉ sửa đổi nó. Trong nội dung này, tôi sẽ giải thích cách hoạt động của thuộc tính display trong CSS, trình bày những cách dùng thông dụng nhất của thuộc tính này cùng với các chẳng hạn trực quan.

Thuộc tính display là gì?

Thuộc tính hiển thị cho phép bạn xác nhận sự hiện ra của các phần tử trang một cách khác đi đối với seting mặc định của chúng. Đây là một khả năng khỏe mạnh & chủ yếu các website hiện đại – bao gồm cả những website được xây dựng bằng Bootstrap CSS – tận dụng nó ở một mức độ nào đó.

Mọi phần tử HTML được đại diện bởi một box chứa bài viết & xác nhận khoảng cách xoay quang bài viết. Thuộc tính display trong CSS chỉ định cách hộp này hiện ra trên website đối với các phần tử khác, cũng như hành vi của các phần tử con của nó (tức là các phần tử bên trong nó).

Trong CSS có hai “cấp độ” mà box này có thể ứng dụng: block & inline:

  • Các phần tử cấp block tồn tại trên dòng riêng của chúng & kéo dài toàn thể chiều rộng của trang (hoặc chiều rộng được chỉ định của block đó). <divvàgt; & <ρvàgt; là các chẳng hạn về các phần tử cấp block.
  • Các phần tử cấp inline thì trái lại, chúng có thể tồn tại trên cùng một dòng. <spanvàgt;, <bvàgt; & <avàgt; là các phần tử cấp inline.

Hiện tại tất cả chúng ta sẽ cùng cân nhắc các giá trị thông dụng nhất của thuộc tính display.

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

Theo mặc định, các trình duyệt hiển thị các phần tử khẳng định ở các cấp độ khác nhau. Chẳng hạn: các phần tử <divvàgt; được hiển thị dưới dạng block trong khi các phần tử <spanvàgt; hiện ra hiển thị dưới dạng inline, như được minh họa bên dưới:

<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

type

=

"

text/css

"

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

padding

:

10px

;

border-radius

:

5px

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

</

style

>

Xem Thêm  Cách viết mã một trang web - xây dựng một trang web bằng html

Ở giai đoạn này, ba phần tử <divvàgt; trước hết là các block – mỗi block kéo dài theo chiều rộng của trang & khởi đầu trên một dòng mới. Trái lại, ba phần tử <spanvàgt; tồn tại trên cùng một dòng & chiều rộng & chiều cao của chúng được xác nhận bởi văn bản bên trong chúng (& một số padding mà tôi đã thêm).

Thuộc tính display có thể ghi đè các kiểu hiển thị mặc định này. Chính vì như vậy, hãy xem có gì biến đổi khi tất cả chúng ta ứng dụng các nguyên tắc display khác nhau.

CSS display: inline

Giá trị inline của thuộc tính display sẽ biến bất kỳ phần tử nào thành phần tử inline. Các phần tử này sẽ hiện ra trên cùng một dòng mà không có dấu ngắt, giống như cách hoạt động của các phần tử <spanvàgt;.

<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

type

=

"

text/css

"

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

border-radius

:

5px

;

display

:

inline

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

</

style

>

Chú ý: tôi đã bỏ qua các padding để minh họa rõ hơn công dụng của inline. Không những thế, chiều rộng & chiều cao của các phần tử inline được xác nhận bởi bài viết chúng chứa. Bạn chẳng thể đặt chiều rộng & chiều cao của chúng bằng CSS:

Xem Thêm  Cách sử dụng biểu tượng phông chữ tuyệt vời trong HTML - cách sử dụng các biểu tượng fa

Nếu http://phptravels.vn/ thêm văn bản vào giữa các phần tử <divvàgt; của mình, http://phptravels.vn/ sẽ thấy rõ ràng và cụ thể cách chúng thích hợp trong một dòng:

CSS Display: block

Giá trị block của thuộc tính display khiến cho một phần tử trở thành một phần tử block. Các phần tử block khởi đầu một dòng mới & kéo dài toàn thể chiều rộng của màn hình, giống như cách các phần tử <divvàgt; hoạt động. Không những thế còn tồn tại các dấu ngắt dòng trước & sau các phần tử này.

<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

padding

:

10px

;

border-radius

:

5px

;

display

:

block

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

</

style

>

CSS Display: inline-block

Giá trị inline-block của thuộc tính display là sự phối hợp của inline & block. Kiểu display: inline-block sẽ được xếp đặt giống với kiểu display: inline, nghĩa là các items sẽ được xếp bên cạnh nhau trên một dòng. Ngoài ra, các phần tử này cũng giống với các phần tử block ở chỗ bạn có thể biến đổi chiều rộng & chiều cao của chúng bằng CSS.


<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

padding

:

10px

;

border-radius

:

5px

;

display

:

inline-block

;

width

:

200px

;

height

:

50px

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

</

style

>

CSS Display: list-item

Phần tử display: list-item hoạt động giống như phần tử <livàgt;. Toàn thể phần tử trở thành phần tử cấp block, văn bản bên trong trở thành phần tử inline & một dấu đầu dòng được thêm vào bên trái:

<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

padding

:

10px

;

border-radius

:

5px

;

display

:

list-item

;

margin-left

:

30px

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

</

style

>

Xem Thêm  Adobe CC 2017 Crack Full Version Download

Thêm list-style-position: inside; để đặt các dấu đầu dòng bên trong phần tử list-item:

CSS Display: none

display: none xóa phần tử & toàn bộ các con của nó khỏi trang. Trong chẳng hạn này, display: none được ứng dụng cho phần tử <divvàgt; & <spanvàgt; thứ hai:


<

body

>

<

div

id

=

"

div-0

"

>

This is my first div.

</

div

>

<

div

id

=

"

div-1

"

>

This is my second div.

</

div

>

<

div

id

=

"

div-2

"

>

This is my third div.

</

div

>

<

br

>

<

span

id

=

"

span-0

"

>

This is my first span.

</

span

>

<

span

id

=

"

span-1

"

>

This is my second span.

</

span

>

<

span

id

=

"

span-2

"

>

This is my third span.

</

span

>

</

body

>

<

style

>

body

{

font-family

:

"Avenir Heavy"

;

}

div, span

{

background-color

:

#2e3f50

;

padding

:

10px

;

border-radius

:

5px

;

}

div

{

color

:

#fd8f59

;

}

span

{

color

:

#1ebda5

;

}

#div-1, #span-1

{

display

:

none

;

}

</

style

>

Để ẩn một phần tử mà không tác động đến bố cục trang, hãy sử dụng thuộc tính visibility CSS:

 

visibility

:

hidden

;

CSS Display: grid

Giá trị display: grid khiến cho phần tử được chỉ định trở thành vùng chứa grid & các phần tử con của nó hoạt động như các mục grid. Tìm hiểu thêm về grid trong CSS tại đây.

CSS Display: flex

Cuối cùng, giá trị display: flex đặt một phần tử làm vùng chứa flex, một cách khác để tạo trang các phần tử động & responsive. Bạn đọc thêm về mô-đun CSS này trong bài đăng trên blog này.

Nguồn xem qua: tại đây

Viết một bình luận