Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : khối hiển thị trong css là gì

Thuộc tính hiển thị trong CSS xác định cách các thành phần (div, siêu liên kết, tiêu đề , v.v.) sẽ được đặt trên trang web. Như tên cho thấy, thuộc tính này được sử dụng để xác định việc hiển thị các phần khác nhau của trang web.
Cú pháp:

 display: value; 

Giá trị thuộc tính
ValueDescriptioninlineIt được sử dụng để hiển thị một phần tử dưới dạng phần tử nội tuyến. blockI được sử dụng để hiển thị một phần tử dưới dạng nội dung phần tử khối để hiển thị một phần tử dưới dạng bộ chứa lưới cấp khối .inline-blockI được sử dụng để hiển thị một phần tử dưới dạng bộ chứa khối cấp nội tuyến. được sử dụng để hiển thị một phần tử dưới dạng vùng chứa lưới cấp nội tuyến .inline-table Nó được sử dụng để hiển thị tablelist-item cấp nội tuyến Nó được sử dụng để hiển thị tất cả các phần tử trong & lt; li & gt; element.run-inIt được sử dụng để hiển thị một phần tử nội dòng hoặc mức khối, tùy thuộc vào ngữ cảnh.tableIt được sử dụng để đặt hành vi dưới dạng & lt; table & gt; cho tất cả các phần tử.table-caption Nó được sử dụng để đặt hành vi là & lt; caption & gt; cho tất cả các phần tử.table-column-group Nó được sử dụng để đặt hành vi là & lt; column & gt; cho tất cả các phần tử.table-header-group Nó được sử dụng để đặt hành vi là & lt; header & gt; cho tất cả các phần tử.table-footer-group Nó được sử dụng để đặt hành vi là & lt; footer & gt; cho tất cả các phần tử.table-row-groupNó được sử dụng để đặt hành vi là & lt; row & gt; cho tất cả các phần tử.table-cell Nó được sử dụng để đặt hành vi là & lt; td & gt; cho tất cả các phần tử.table-column Nó được sử dụng để đặt hành vi là & lt; col & gt; cho tất cả các phần tử.table-rowNó được sử dụng để đặt hành vi là & lt; tr & gt; cho tất cả các phần tử.noneIt được sử dụng để xóa phần tử.initialIt được sử dụng để đặt giá trị mặc định. > Khối: Thuộc tính này được sử dụng làm thuộc tính mặc định của div. Thuộc tính này đặt div lần lượt theo chiều dọc. Chiều cao và chiều rộng của div có thể được thay đổi bằng cách sử dụng thuộc tính khối nếu chiều rộng không được đề cập, thì thuộc tính div dưới khối sẽ chiếm chiều rộng của vùng chứa.
Ví dụ: < br />

Xem Thêm  Bộ chọn CSS - bộ chọn css trong html

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

< code class = "trơn"> & lt; head & gt;

& lt; title & gt; CSS | Thuộc tính hiển thị & lt; / title & gt;

& lt; style & gt;

# geeks1 {

height: 100px;

width: 200px;

background: teal;

display: block;

}

< code class = "trơn"> # geeks2 {

height: 100px;

width: 200px;

background: cyan;

display: block;

}

# geeks3 {

< p class = "line number19 index18 alt2"> height: 100px;

width: 200px;

background : green;

display: block;

}

. gfg {

margin-left: 20px;

font-size: 42px;

font-weight: bold;

color: # 009900;

< code class = "undefined space"> }

< / code> . geeks {

font-size: 25px;

margin-left: 30px;

}

. main {

margi n: 50px;

text-align: center;

}

< p class = "line number38 index37 alt1"> & lt; / style & gt;

& lt; / head & gt;

& lt ; body & gt;

& lt; div class = "gfg" & gt; GeeksforGeeks & lt; / div & gt;

& lt; div class = " geeks " & gt; display: block; thuộc tính & lt; / div & gt;

< code class = "undefined space"> & lt; div class = "main" & gt;

& lt; div id < / code> = "geeks1" & gt; Khối 1 & lt; / div & gt;

& lt; div id = " geeks2 " & gt; Khối 2 & lt; / div & gt;

& lt; div id = < code class = "string"> "geeks3" & gt; Khối 3 & lt; / div & gt;

& lt ; / div & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

thuộc tính khối hiển thị

Nội tuyến: Thuộc tính này là thuộc tính mặc định của thẻ liên kết. Điều này được sử dụng để đặt div trong dòng, tức là theo cách nằm ngang. Thuộc tính hiển thị nội tuyến bỏ qua chiều cao và chiều rộng do người dùng đặt.
Ví dụ:

HTML




< code class = "trơn"> & lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt; CSS | Thuộc tính hiển thị & lt; / title & gt;

& lt; style & gt;

# main {

height: 200px;

width: 200px;

background: teal;

display: inline;

} < / p>

# main1 {

height: 200px;

width: 200px;

background: cyan;

display: inline;

}

# main2 {

height: 200px;

width : 200px;

background: green;

display: inline;

< p class = "line number25 index24 alt2"> }

. gfg {

margin-left: 20px;

font-size: 42px;

font-weight: bold;

color: # 009900;

}

. geeks {

font-size : 25px;

margin-left: 30px; < / code>

}

. main {

margin: 50px;

}

< p class = "line number39 index38 alt2"> & lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div class = "gfg" & gt; GeeksforGeeks & lt; / div & gt;

& lt; div class = "geeks" & gt; display: inline; thuộc tính & lt; / div & gt;

< code class = "undefined space"> & lt; div class = "main" & gt;

& lt; div < code class = "color1"> id = "main" & gt; KHỐI 1 & lt; / div & gt;

& lt; div id = "main1" & gt; KHỐI 2 & lt; / div & gt;

& lt; div id < / code> = "main2" & gt; KHỐI 3 & lt; / div & gt;

& lt; / div & gt;

& lt; / body < / code> & gt;

& lt; / html & gt;

 
  

Đầu ra:

hiển thị thuộc tính nội tuyến

Inline-block: Tính năng này sử dụng cả hai thuộc tính được đề cập ở trên, khối và nội tuyến. Vì vậy, thuộc tính này căn chỉnh nội dòng div nhưng sự khác biệt là nó có thể chỉnh sửa chiều cao và chiều rộng của khối. Về cơ bản, điều này sẽ căn chỉnh div theo cả kiểu khối và kiểu nội tuyến.
Ví dụ:

html




& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt; CSS | Thuộc tính hiển thị & lt; / title & gt;

& lt; style & gt;

# main {

height: 100px;

width: 200px;

background: teal;

display: inline-block;

} < / p>

# main1 {

height: 100px;

width: 200px;

background: cyan;

display: inline-block;

}

# main2 {

height : 100px;

width: 200px;

background: green;

< p class = "line number24 index23 alt1"> display: inline-block;

}

. gfg {

margin-left: 200px;

font-size: 42px;

font-weight: bold;

color: # 009900;

}

. geeks {

font-size: 25px;

margin-left: 210px;

}

. main {

margin: 50px;

}

& lt; / style & gt ;

& lt; / head & gt;

< / code> & lt; body & gt;

& lt; div class = " gfg " & gt; GeeksforGeeks & lt; / div & gt;

& lt; div class = "geeks" & gt; display: Inline-block; thuộc tính & lt; / div & gt;

< code class = "undefined space"> & lt; div class = "main" & gt;

& lt; div < code class = "color1"> id = "main" & gt; KHỐI 1 & lt; / div & gt;

& lt; div id = "main1" & gt; KHỐI 2 & lt; / div & gt;

& lt; div id < / code> = "main2" & gt; KHỐI 3 & lt; / div & gt;

& lt; / div & gt;

& lt; / body < / code> & gt;

& lt; / html & gt;

 
  

Đầu ra:

khối hiển thị nội tuyến

Không có: Thuộc tính này ẩn div hoặc vùng chứa sử dụng thuộc tính này. Sử dụng nó trên một trong các div, nó sẽ làm cho hoạt động trở nên rõ ràng.
Ví dụ:

html




< code class = "trơn"> & lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt; CSS | Thuộc tính hiển thị & lt; / title & gt;

& lt; style & gt;

# main {

height: 100px;

width: 200px;

background: teal;

display: block;

} < / p>

# main1 {

height: 100px;

width: 200px;

background: cyan;

display: none;

}

# main2 {

height: 100px;

width: 200px;

background: green;

display: block;

}

. Gfg {

margin-left: 20px;

< code class = "undefined space"> font-size: 42px;

font-weight: bold;

color: # 009900;

< code class = "trơn">}

. geeks {

font-size: 25px;

margin-left: 20px;

}

. main {

margin: 50px;

}

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div class = " gfg " & gt; GeeksforGeeks & lt; / div & gt;

& lt; div class = "geeks" & gt; display: none; thuộc tính & lt; / div & gt;

< code class = "undefined space"> & lt; div class = "main" & gt;

& lt; div < code class = "color1"> id = "main" & gt; KHỐI 1 & lt; / div & gt;

& lt; div id = "main1" & gt; KHỐI 2 & lt; / div & gt;

& lt; div id < / code> = "main2" & gt; KHỐI 3 & lt; / div & gt;

& lt; / div & gt;

& lt; / body < / code> & gt;

& lt; / html & gt;

 
  

Đầu ra:

display none property

< Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi Thuộc tính hiển thị được liệt kê bên dưới:

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Firefox 3.0
  • Opera 7.0
  • Safari 3.1

My Personal Notes < / p>


Xem thêm những thông tin liên quan đến chủ đề khối hiển thị trong css là gì

Position CSS trong 10 phút | Học HTML & CSS

alt

  • Tác giả: HoleTex
  • Ngày đăng: 2021-03-28
  • Đánh giá: 4 ⭐ ( 1712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Position trong CSS | 10 phút

    Position trong CSS là một trong các thuộc tính rất quan trọng và được sử dụng rất nhiều khi viết code CSS. Thuộc tính này giúp cho chúng ta quyết định các element sẽ hiển thị ở đâu trên trang web

    Thuộc tính position có 5 giá trị đó là static, relative, absolute, fixed và sticky. Chúng ta sẽ lần lượt tìm hiểu về các giá trị này nhé.

    💻 Thông số PC & Gears của mình (Affiliate Links):
    Máy ảnh Canon EOS M50 + Kit 15-45mm - https://shorten.asia/bcFhNcnn (TIKI)
    Microphones Elgato Microphone Wave 3 - https://shorten.asia/jnfeQ479 (TIKI)
    Micro Rode Videomic Gohttps://shorten.asia/wakxwDTE (TIKI)
    Màn hình Dell S2421HN 23.8Inch IPS - https://shorten.asia/7QFa78K4 (TIKI)
    Màn hình MSI OPTIX G27C4 27 VA 165Hz - https://shorten.asia/wYQjECEa (TIKI)

    Tai Nghe Gaming SteelSeries Arctis 7 DTS.X 7.1 - https://shorten.asia/E2T1DkvR (TIKI)
    Chuột SteelSeries Rival 310 - https://shorten.asia/ASkx5jwx (TIKI)
    Ổ cứng HDD Western Digital BLUE 6TB - https://shorten.asia/Q7GmkecR (TIKI)
    CPU Intel Core i5-10400 - https://shorten.asia/yWnkVJtQ (TIKI)
    Ram ADATA DDR4 XPG GAMMIX D10 8GB 3200MHz - https://shorten.asia/2vGSE7VX (TIKI)
    Mainboard ASRock B460M - https://shorten.asia/GfzknMY4 (TIKI)

    📢 Liên hệ với mình tại:
    Facebook: https://www.facebook.com/holetex/​
    Instagram: https://www.instagram.com/holetex/
    Github: https://github.com/holetexvn
    Facebook cá nhân: https://www.facebook.com/minhtung09/
    Email: holetex@outlook.com

    holetex position css

CSS Hiển Thị

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 5569 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính `display` quy định cụ thể làm thế nào để một phần tử được hiển thị. Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là ***block*** ho...

Tìm hiểu cách hiển thị các phần tử của trang web bằng thuộc tính Display

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 3494 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính display, nó quy định cụ thể làm thế nào để một phần tử được hiển thị. Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó

Thuộc tính display trong CSS (inline - block -none)

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 3972 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu Thuộc tính display trong CSS (inline - block -none), sự khác nhau giữa inline và block và inline-block trong CSS

[CSS] Bài 1 - CSS Là Cái Gì?

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 9194 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta đều đã biết rằng HTML có thể giúp chúng ta nói chuyện được với các trình duyệt web và nhờ có đó thì chúng ta có thể yêu cầu trình duyệt hiển thị bất kỳ loại nội dung nào mà chúng ta mong muốn...

Thuộc tính display

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 6581 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính display xác định loại hiển thị của thành phần - Học web chuẩn

One moment, please...

  • Tác giả: websitehcm.com
  • Đánh giá: 5 ⭐ ( 4846 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php