Mặc dù bố cục bảng hiếm khi được sử dụng nhưng chúng có thể rất hữu ích trong một số trường hợp. Ví dụ: nếu bạn chỉ muốn hiển thị một bảng trên màn hình rộng và đối với màn hình nhỏ hơn, chỉ cần duy trì sự hỗ trợ của nó. Điều này có thể đạt được bằng cách kết hợp các truy vấn phương tiện và thuộc tính hiển thị.

Ý nghĩa hiện đại hơn

Cách hiển thị nội dung trên một trang web đã thay đổi khá nhiều kể từ khi HTML ra đời. Khi các nhà thiết kế web muốn tạo ra một số kiểu bố cục sáng tạo, phương pháp đầu tiên được sử dụng là lồng bảng HTML (bố cục dạng bảng).

Và khi CSS trở nên phổ biến hơn, các lập trình viên đã chuyển sang bố cục nổi, đặt nội dung vào các div nổi khác nhau để đạt được hiệu ứng mong muốn. Kỹ thuật này vẫn còn rất phổ biến, nhưng với sự ra đời của flexbox (bố cục “hộp” linh hoạt trong CSS), tình trạng này sẽ ngày càng ít kéo dài. Khi bố cục hộp đáp ứng được tất cả các trình duyệt hỗ trợ đầy đủ, bố cục đáp ứng sẽ trở thành phương pháp bố cục chiếm ưu thế. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ đặc tả flexbox và điều này cản trở rất nhiều đến sự phát triển của nó.

Mô hình flexbox rất mạnh mẽ và vì nó có thể làm được rất nhiều việc nên cần phải nỗ lực để hiểu đầy đủ cách thức hoạt động và cách sử dụng nó. Để nghiên cứu sâu mô hình này, cần có những bài viết lớn riêng biệt, nhưng hôm nay chúng ta sẽ chỉ xem xét những điều cơ bản.

Bằng cách khai báo display: flex; đối với một phần tử, nó trở thành một thùng chứa linh hoạt và các phần tử con của nó trở thành các phần tử linh hoạt của thùng chứa đó. Thuộc tính flex không áp dụng cho phần tử con của phần tử này. Cả thùng chứa linh hoạt và các mục linh hoạt đều có thuộc tính linh hoạt riêng.

Phần tử hoạt động giống như phần tử khối và hiển thị nội dung theo mô hình lưới. Mô hình lưới cung cấp cho chúng ta cách tạo hệ thống lưới và cho phép chúng ta kiểm soát vị trí của các thành phần lưới hoàn toàn bằng CSS mà không liên quan đến HTML. Khi được sử dụng cùng với các truy vấn phương tiện, lưới CSS sẽ trở thành công cụ đắc lực khi nói đến thiết kế và xây dựng bố cục đáp ứng.

Xin lưu ý rằng lưới CSS không được triển khai chính thức trong bất kỳ trình duyệt nào. Để hỗ trợ nó, trình duyệt cần chỉ định tiền tố của nhà cung cấp và đặt cờ.

Giá trị thử nghiệm (không nên sử dụng trong mã sản xuất)

hiển thị: chạy vào;

Về lý thuyết, nếu bạn đặt thuộc tính display của một phần tử thành run-in thì nó sẽ được hiển thị dưới dạng một khối bên trong một khối khác. Trường hợp sử dụng cho thuộc tính này là có một phương pháp tùy chỉnh để tạo các tiêu đề được định vị trực quan trên cùng dòng với nội dung tiếp theo.

Một float cũng có thể được sử dụng cho mục đích này, nhưng điều này giả định rằng giá trị được tự động ghi vào chuỗi và căn chỉnh theo đường cơ sở.

Xin lưu ý rằng giá trị này chỉ được hỗ trợ trong trình duyệt web IE 11 và Opera Mini.

Phần tử hoạt động như một phần tử nội tuyến và hiển thị nội dung của nó theo mô hình định dạng của phần tử HTML. Nói tóm lại, nó cho phép bạn hiển thị các chú thích bên cạnh đường cơ sở của văn bản (thường là để hỗ trợ phát âm). Kỹ thuật này khá phổ biến ở Trung Quốc và Nhật Bản.

hiển thị: nội dung;

Ý tưởng đằng sau giá trị này là khi bạn sử dụng nó trên một phần tử, nó sẽ biến mất khỏi DOM, nhưng tất cả các phần tử con của nó vẫn tồn tại và chiếm không gian của chúng. Thông số kỹ thuật này dành cho khoảnh khắc này chỉ được hỗ trợ trong Firefox >59, Chrome >65, Safari 11.1.

Bản tóm tắt ngắn gọn

Danh sách các giá trị thuộc tính hiển thị mà chúng tôi xem xét hôm nay thực sự ấn tượng. Xét cho cùng, sự phát triển của công nghệ quyết định sự xuất hiện của các kỹ thuật mới và cách tiếp cận mới để giải quyết Các nhiệm vụ khác nhau trong thiết kế web. Mặt khác, mặc dù nhiều kỹ thuật trở nên lỗi thời và mất đi vinh quang trước đây. Chúng tôi hy vọng rằng bài viết này sẽ giúp bạn theo kịp thời đại và cho phép bạn giải quyết các vấn đề về bố cục hiệu quả hơn.

display là thuộc tính tạo kiểu quan trọng nhất trong CSS để kiểm soát mẫu. Mỗi phần tử có một giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Đối với hầu hết các phần tử, giá trị hiển thị mặc định thường sẽ là block hoặc inline. Trong nguyên bản, phần tử khối thường được gọi là phần tử cấp khối, phần tử nội tuyến không có tên thay thế.

khối

nội tuyến

span là một phần tử nội tuyến tiêu chuẩn. Phần tử nội tuyến có thể bọc văn bản bên trong một đoạn văn như thế này mà không làm xáo trộn cấu trúc của nó. Phần tử nội tuyến phổ biến nhất là a vì bạn sử dụng nó cho các liên kết.

không có

Một giá trị hiển thị phổ biến khác là không có. Một số phần tử chuyên dụng như tập lệnh sử dụng giá trị này theo mặc định. Nó được sử dụng rộng rãi với JavaScript để ẩn và hiển thị các phần tử thay vì xóa và tạo lại chúng.

Nó khác với khả năng hiển thị. Đặt thuộc tính hiển thị thành không sẽ làm cho trang xuất hiện như thể phần tử không tồn tại. khả năng hiển thị: ẩn; sẽ chỉ ẩn phần tử, nhưng phần tử vẫn sẽ tiếp tục chiếm dung lượng như thể nó được hiển thị đầy đủ.

các giá trị hiển thị khác

Có nhiều giá trị kiểu kỳ lạ hơn để hiển thị, chẳng hạn như list-item và table . Đây là danh sách đầy đủ. Chúng ta sẽ thảo luận về khối nội tuyến và linh hoạt sau.

phép cộng

Như tôi đã nói trước đây, mọi phần tử đều có kiểu hiển thị mặc định. Tuy nhiên, bạn luôn có thể ghi đè lên điều này! Mặc dù điều này không có ý nghĩa khi tạo một div nội tuyến, nhưng bạn có thể sử dụng nó để tùy chỉnh việc hiển thị các phần tử với ngữ nghĩa riêng tư. Một ví dụ điển hình là khả năng sắp xếp các phần tử li cho menu ngang.

.

một số tiếp theo

một số tiếp theo

1. bé nhỏ
2. với văn bản dài

Hiển thị nội dòng;

Giá trị mặc định là a, span, b, em, v.v.

1. 
   
   <nhịp class="svetlyi">Anhịp>

   một số tiếp theo hình chữ nhật A được chuyển tới dòng mới một số tiếp theo

2. chiều rộng và chiều cao bị bỏ qua. Chiều rộng của nó là chiều rộng của nội dung cộng với lề, đường viền và phần đệm.
3. lề trên và lề dưới bị bỏ qua.
4. Cùng với phần đệm trên và phần đệm dưới, cần điều chỉnh chiều cao của dòng, nếu không các dòng sẽ “chôn vào nhau”.
   

   một số tiếp theo hình chữ nhật A được chuyển sang một dòng mới và va chạm với các dòng liền kề do đặt giá trị phần đệm một số tiếp theo

5. không thể có . Nhưng đồng thời nó cũng dễ bị ảnh hưởng nếu tài sản nàyđược trao cho khối cha.

Khoảng cách giữa các thẻ li phải được loại bỏ. Khi các từ cách nhau một dấu cách, khoảng trống, ở đây cũng vậy

1. bé nhỏ
2. với văn bản dài

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

Mặc định là img, đầu vào, v.v. Đối với yếu tố bên ngoài hoạt động giống như nội tuyến, nhưng là một khối nội bộ.

1. bé nhỏ

hiển thị: mục danh sách;

Mặc định là li. Phần tử được hiển thị dưới dạng phần tử khối có điểm đánh dấu danh sách. Loại điểm đánh dấu thay đổi thuộc tính. Trong ví dụ trên không có điểm đánh dấu vì li có màn hình khác với mục danh sách.

hiển thị: chạy vào;

Nếu một phần tử có giá trị hiển thị là run-in được theo sau bởi một khối thì nó sẽ nằm trên cùng một dòng với khối đó và là một phần của khối đó. Nếu không thì phần tử sẽ gây ra ngắt dòng. Mozilla Firefox không được hỗ trợ.

hiển thị: chạy vào;
dòng thứ hai

một số tiếp theo

hiển thị: bảng;

Mặc định là bảng.

1. Không thể thêm phần tử khác vào dòng chứa bảng được nữa.
2. nếu không chỉ định giá trị chiều rộng thì phần tử sẽ được kéo dài để vừa với độ dài của nội dung, nếu không thì chiều rộng là tổng của lề, đường viền, phần đệm, chiều rộng. Nếu vượt quá chiều cao/chiều rộng đã chỉ định, nội dung sẽ được hiển thị trên đầu khối.

   một số tiếp theo

   chiều rộng: tự động;
   hiển thị: bảng;

   một số tiếp theo

3. Các khối không bị ảnh hưởng nếu khối cha có , chỉ có nội dung của chúng.
4. các thuộc tính như .
5. các thuộc tính được áp dụng.

hiển thị: bảng nội tuyến;

Tương tự như hiển thị: khối nội tuyến.

1. các thuộc tính được áp dụng.

hiển thị: hàng bảng;

Mặc định là tr. Hợp nhất một nhóm ô sẽ không bao bọc thành hàng khác.

1. Không thể thêm phần tử khác vào dòng chứa hàng của bảng nữa.
2. phần tử được kéo dài để vừa với độ dài nội dung của nó.
3. chiều rộng, đường viền, phần đệm, lề, căn dọc đều bị bỏ qua.
4. bạn có thể thay đổi giá trị chiều cao.
5. Các khối không bị ảnh hưởng nếu khối cha có , chỉ có nội dung của chúng.

hiển thị: ô bảng;

Mặc định là td và th. Tôi đang xem xét một tình huống trong đó cấp độ gốc có display: table-row.

1. các phần tử nối tiếp nhau.
2. nếu chiều rộng không được chỉ định, phần tử sẽ được kéo dài để phù hợp với độ dài của nội dung, nếu không thì chiều rộng là tổng của đường viền, phần đệm, chiều rộng. Nhưng không quá chiều rộng của thùng chứa và tỷ lệ với tất cả chiều dài của ô. Vì vậy, tôi khuyên bạn không nên đặt chiều rộng cho các ô của dòng dưới cùng.
3. Chiều cao của tất cả các ô trong một hàng là như nhau và bằng chiều cao của ô cao nhất. Thuận tiện khi xây dựng hai-, v.v. bố trí cột trong đó các cột có cùng chiều cao được yêu cầu.
4. lề được bỏ qua. Thuộc tính này được thay thế bằng khoảng cách đường viền của cha mẹ.
5. nội dung của nó có thể bị ảnh hưởng bởi và.

nhỏ với văn bản dài trong hai dòng

giá giá

hiển thị: chú thích bảng (cột bảng, nhóm cột bảng, nhóm chân bảng, nhóm tiêu đề bảng, nhóm hàng bảng)

Mặc định là chú thích (col, colgroup, tfoot, thead, tbody). Tôi chưa thấy bất kỳ giá trị thực tế nào.

không trưng bày;

Phần tử trở nên vô hình mà không tiết kiệm không gian của nó.

1. bé nhỏ
   1. tiểu đoạn 1
   2. tiểu đoạn 2
2. với văn bản dài

1. bé nhỏ
   1. tiểu đoạn 1
   2. tiểu đoạn 2
2. với văn bản dài

1. bé nhỏ
   1. tiểu đoạn 1
   2. tiểu đoạn 2 dài
2. với văn bản dài

Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ nói về nội dung quy tắc quan trọng ngôn ngữ đánh dấu kiểu được gọi là Display. Có thể bạn đã thấy các giá trị được sử dụng thường xuyên nhất của nó trong mã CSS: khối hiển thị, không có hoặc nội tuyến. Trong bài viết này, chúng tôi sẽ cố gắng xem xét tất cả những điều này một cách chi tiết hơn và kèm theo các ví dụ.

Về cơ bản, nó cho phép bạn thiết lập và nếu cần, thay đổi cách hiển thị các thành phần nhất định của mã Html. Với sự trợ giúp của nó, các thành phần khối có thể được viết thường hoặc thậm chí là một danh sách và bằng cách sử dụng display:none, bạn có thể triển khai tính năng động trên một trang web, chẳng hạn như tạo menu thả xuống mà không sử dụng tập lệnh TRÊN CSS thuần túy.

Khối hiển thị và nội tuyến - cách tạo một khối chữ thường

Như chúng ta đã học từ khóa học về ngôn ngữ Html, các phần tử được hình thành trên các trang web bằng cách sử dụng thẻ, sau đó được xử lý bởi trình phân tích cú pháp Html của trình duyệt bạn đang sử dụng và hiển thị chúng trên màn hình máy tính của bạn. Những yếu tố này (được tạo ra trong Dựa trên HTML thẻ), được định nghĩa trong ngôn ngữ hiện đạiĐánh dấu kiểu dáng CSS.

Ngay cả khi bạn không đặt bất kỳ kiểu đặc biệt nào cho bất kỳ thẻ nào, chúng vẫn sẽ được trình duyệt hiển thị có tính đến các quy tắc đã được áp dụng cho chúng theo mặc định. Bạn có thể xem những thứ này ở đâu Kiểu CSS mặc định cho tất cả các thẻ HTML? Vâng, mọi thứ đều giống nhau trên trang này. Nếu bạn cuộn đến cuối mục lục, bạn sẽ thấy liên kết “”, nơi thông tin chúng tôi cần sẽ được cung cấp.

Tất cả những điều này là để làm gì? Tôi đã nhiều lần, khi mô tả một số thẻ Html nhất định, hãy tập trung sự chú ý của bạn vào loại thẻ này thuộc về - chữ thường hoặc khối. Tùy thuộc vào điều này, chúng tôi giả định rằng các phần tử này sẽ có một hành vi nhất định - hoặc chúng sẽ có xu hướng chiếm tất cả không gian có sẵn cho chúng theo chiều rộng (dựa trên khối) hoặc chúng sẽ không (chữ thường).

Nhưng tôi vẫn chưa giải thích sự phân chia này đến từ đâu và bạn có thể tìm ra loại thẻ cụ thể thuộc về loại nào. Vì vậy, bạn có thể tìm hiểu điều này trên trang đặc tả CSS mà chúng tôi đã đề cập có tên là “Biểu định kiểu mặc định cho HTML 4" và quy tắc Hiển thị đặc biệt là nguyên nhân gây ra tất cả tình trạng lộn xộn này.

Ví dụ: ngay từ đầu, tất cả các phần tử thuộc khối đều được liệt kê và điều này xảy ra do quy tắc áp dụng cho chúng hiển thị:khối:

Tại đây bạn có thể thấy tất cả các thẻ, vùng chứa và các phần tử khối khác giống nhau. Nếu chúng ta nhìn vào danh sách các thuộc tính CSS và các giá trị hợp lệ cho chúng trong trình xác nhận W3C thì để hiển thị, chúng ta sẽ thấy như sau:

Nếu không có gì khác được chỉ định, tùy chọn “display:inline” sẽ được sử dụng theo mặc định (vì đây là giá trị được chỉ định trong cột “Giá trị ban đầu”), tùy chọn này sẽ tương ứng với việc hình thành các phần tử nội tuyến. Do đó, trong thông số kỹ thuật “Biểu định kiểu mặc định cho HTML 4” được cung cấp trên trang, các thẻ đó sẽ được hiển thị dưới dạng chữ thường (ví dụ: span) hoàn toàn không được mô tả hoặc giá trị Hiển thị không được chỉ định cho chúng, bởi vì theo mặc định dù sao chúng cũng sẽ là chữ thường.

Quy tắc Hiển thị chịu trách nhiệm về cách xây dựng và hiển thị phần tử này trong trình duyệt. Nó cho trình duyệt biết thẻ là gì và nó sẽ được hiển thị như thế nào. Có thể hiển thị dưới dạng thành phần hàng (display: inline) hoặc dưới dạng khối (block), hiển thị dưới dạng bảng (table) hoặc dưới dạng một phần của bảng (inline-table | table-row-group | table-header- nhóm | chân bảng-nhóm | hàng bảng | nhóm cột bảng | cột bảng | ô bảng | chú thích bảng). Quy tắc này rất quan trọng.

Nhưng những gì được đặt theo mặc định cho thẻ hoàn toàn không phải là một giá trị cố định. Nếu muốn hoặc cần thiết, bạn luôn có thể tạo thành phần khối (mà trình duyệt đã sử dụng display: block theo mặc định) bằng chữ thường và ngược lại.

Hãy xem một ví dụ đơn giản với ba thẻ, một trong số đó sẽ được mở rộng theo mặc định và hai thẻ còn lại sẽ là thẻ chặn (H3 và P). Để rõ ràng hơn, tôi đã điền vào khu vực dành riêng cho các phần tử này:

Theo mặc định, H3 sẽ được trình duyệt hiển thị dưới dạng khối

P - một khối mặc định khác

Kết quả là trình duyệt hiển thị tất cả các thành phần theo đúng giá trị quy tắc Hiển thị mặc định của chúng:

Như bạn có thể thấy, khối đầu tiên H3 (với khối giá trị mặc định) chiếm toàn bộ kích thước ngang có sẵn cho nó (cũng như phần tử thứ ba P), trong khi Span nội tuyến (với giá trị mặc định display:inline) chiếm có chiều rộng chính xác cần thiết để đặt nội dung kèm theo trong đó.

Bây giờ chúng ta hãy từ thẻ khối ban đầu H3, chúng ta sẽ tạo một thẻ chữ thường bằng cách thêm hiển thị nội tuyến vào nó (Tôi đã làm cho văn bản trong hai phần tử đầu tiên nhỏ hơn để có được hiệu quả lớn hơn hiển thị):

H3

P là một thẻ khối mặc định khác

Như bạn có thể thấy, trình duyệt đã tính đến display:inline và bây giờ phần tử tiêu đề H3 (khối ban đầu) không còn chiếm hết không gian có sẵn cho nó theo chiều rộng, do đó thẻ Span nội tuyến sau đã được ép chặt vào Nó.

Nhưng anh ta áp sát vào cái trước không sát mà cách nhau một khoảng trống. Khi tiêu đề H3 là một khối, khoảng trắng này không được tính đến, nhưng sau khi nó được chuyển thành thẻ chữ thường, tất cả những gì trong mã được chuyển thành một khoảng trắng duy nhất theo tất cả các quy tắc của ngôn ngữ đánh dấu siêu văn bản, bạn có thể đọc về liên kết được cung cấp.

Bạn có thể làm tương tự tạo thẻ khối từ thẻ Span nội tuyến bằng cách thêm display:block:

H3

P - một phần tử HTML khối mặc định khác

Và kết quả là chúng tôi tài liệu trực quan sẽ hiển thị những gì đã xảy ra:

Span bắt đầu chiếm toàn bộ diện tích có sẵn cho nó về chiều rộng, bất kể lượng nội dung có trong thẻ này.

Display list-item - Tạo danh sách dựa trên thẻ khối

Bây giờ chúng ta hãy thử sử dụng Display để biến một loạt thẻ khối thành các mục danh sách. Quy tắc sẽ giúp chúng ta đối phó với điều này hiển thị: mục danh sách. Đầu tiên chúng ta hãy có một vài đoạn văn và một tiêu đề:

H3

Đoạn đầu tiên (thẻ P)

Đoạn thứ hai

Ngày thứ ba

Nó sẽ trông giống như thế này:

Bây giờ, nếu chúng ta thêm quy tắc display:list-item vào tất cả các thẻ chặn đoạn văn, trình duyệt sẽ tạo một vùng đánh dấu đặc biệt cho tất cả các thành phần này, trong đó các điểm đánh dấu mặc định tương tự sẽ xuất hiện:

H3

Đoạn đầu tiên (thẻ P)

Đoạn thứ hai

Ngày thứ ba

Nhưng ở dạng này bạn sẽ không nhận thấy bất kỳ thay đổi nào. Vùng đánh dấu được thêm vào trước vùng thẻ khối và để nhìn thấy nó, bạn cần bằng cách nào đó di chuyển khối đó sang bên trái của cạnh của vùng chứa nó. Điều này có thể được thực hiện bằng cách sử dụng cách tương tự, cụ thể là bằng cách đặt lề trái:20px cho các đoạn văn được yêu cầu (hoặc các đoạn văn kèm theo chẳng hạn như trong) và sau đó chúng ta có được hình ảnh sau:

Hóa ra, bằng cách sử dụng quy tắc Hiển thị, bạn có thể thay đổi các thành phần đã có trong mã Html thành các thành phần khác bất kỳ lúc nào (chỉ bằng cách thay đổi cách chúng được hiển thị trên trang web) mà không cần thay đổi các thẻ tương tự này. Thực tế là có thể có rất nhiều thẻ trong mã và sẽ khó thay đổi tất cả chúng theo cách thủ công, nhưng với sự trợ giúp của Hiển thị, điều này có thể được thực hiện chỉ sau vài cú nhấp chuột tập tin bên ngoài các tờ kiểu xếp tầng, rất tiện lợi.

Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog

Bạn có thể xem thêm video bằng cách vào

Bạn có thể quan tâm

Nổi và xóa trong CSS - công cụ bố cục khối
Vị trí (tuyệt đối, tương đối và cố định) - phương pháp định vị html các phần tử trong CSS (quy tắc trái, phải, trên và dưới)
Định vị bằng chỉ mục Z và CSS Quy tắc con trỏđể thay đổi con trỏ chuột
Chiều cao, chiều rộng và tràn - Quy tắc CSS để mô tả vùng nội dung khi bố trí khối
Thuộc tính CSS text-trang trí, căn chỉnh dọc, căn chỉnh văn bản, thụt lề văn bản để trang trí văn bản trong Html

Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ xem xét một nhóm thuộc tính style chịu trách nhiệm về cách hiển thị phần tử html trên trang web, liệu nó sẽ ở dạng khối hay nội tuyến và liệu nó có được hiển thị hay không. Nhóm này bao gồm hai thuộc tính CSS hiển thị và hiển thị. Đặc biệt tài sản quan trọng là hiển thị, rất có thể bạn đã gặp các giá trị được sử dụng phổ biến nhất của nó trong mã CSS: khối hiển thị, không có hoặc nội tuyến. Chúng ta hãy xem xét tất cả điều này chi tiết hơn mà không cần ví dụ.

Khả năng hiển thị của các phần tử html - thuộc tính hiển thị

Thuộc tính kiểu hiển thịđược thiết kế để hiển thị hoặc ẩn một phần tử trên trang web:

khả năng hiển thị: hiển thị|ẩn|thu gọn

Thuộc tính có thể nhận ba giá trị:

• hiển thị - phần tử được hiển thị trên trang web (giá trị mặc định);
• ẩn - phần tử không được hiển thị trên trang, hay chính xác hơn là nó trở nên hoàn toàn trong suốt, vì không gian vẫn được phân bổ cho nó;
• thu gọn - chỉ áp dụng cho các hàng và cột của bảng. Các hàng và cột tương ứng sẽ bị xóa và bảng được xây dựng lại. Nếu giá trị này không được áp dụng cho các hàng hoặc cột của bảng thì kết quả sẽ giống như với giá trị ẩn.

Dưới đây bạn có thể thấy cách hoạt động của thuộc tính này:

Trong ví dụ trên (khu vực trong hình chữ nhật), một đoạn văn có dòng chữ “Chuột qua tôi!” ban đầu hiển thị và bên dưới nó, vùng trống là phần tử p mà quy tắc CSS“khả năng hiển thị: ẩn” và do đó trình duyệt làm cho nó trở nên vô hình. Nếu bạn di chuột qua đoạn trên cùng, đoạn dưới cùng sẽ hiển thị vì quy tắc “khả năng hiển thị: hiển thị” sau đó được áp dụng cho đoạn đó.

Các kiểu CSS cho ví dụ này trông như thế này:

MỘT Mã HTML Vì thế:

Hãy di chuột qua tôi!

Tôi là một đoạn vô hình. Tôi xuất hiện khi bạn di chuột qua đoạn bên cạnh tôi ở trên cùng!

Quy tắc CSS đầu tiên cho trình duyệt biết rằng phần tử HTML có thuộc tính lớp bằng el1 sẽ ẩn trên trang. MỘT CSS thứ hai Quy tắc có nghĩa là khi bạn di chuột qua một phần tử có thuộc tính lớp bằng el2, phần tử lân cận của nó có thuộc tính lớp bằng el1 sẽ hiển thị.

Thuộc tính kiểu hiển thị CSS được sử dụng khá hiếm, chủ yếu chỉ để tạo các hiệu ứng tương tự về việc các thành phần trang biến mất và xuất hiện.

Nhưng thuộc tính này được sử dụng phổ biến hơn nhiều. Nó không chỉ cho phép bạn ẩn và hiển thị phần tử html, nhưng cũng thường thiết lập các cách hiển thị chúng. Bằng cách sử dụng thuộc tính display, các phần tử khối có thể được tạo thành dòng và thậm chí là một danh sách hoặc thậm chí bị ẩn bằng quy tắc display:none. Ví dụ, để tạo menu thả xuống sử dụng CSS thuần túy Bạn không thể làm gì nếu không có thuộc tính hiển thị.

Phong cách này có khá nhiều giá trị có sẵn:

display:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-caption|table-column|table-column-group|table-header-group|table-row- nhóm|chân bảng-nhóm|hàng-bảng|ô-bảng

Nói tóm lại, mỗi giá trị có tác dụng như sau đối với các phần tử html:

• khối - phần tử được hiển thị dưới dạng phần tử khối;
• nội tuyến - phần tử được hiển thị dưới dạng nội tuyến;
• khối nội tuyến - tạo thành một phần tử khối được bao quanh các phần tử khác của trang HTML; hành động của nó tương tự như các phần tử nội tuyến (như thẻ );
• bảng nội tuyến - biến phần tử thành bảng, giống như sử dụng thẻ , nhưng bảng là một phần tử có sẵn và nó được bao bọc xung quanh các phần tử khác;
  mục danh sách - phần tử trở thành phần tử khối và điểm đánh dấu danh sách được thêm vào nó;
  không có - xóa một phần tử khỏi tài liệu, không gian mà phần tử đó chiếm giữ không được dành riêng và trang web được tạo như thể phần tử đó không tồn tại;
  run-in - phần tử trở thành khối hoặc nội tuyến tùy thuộc vào ngữ cảnh;
  bảng - chỉ định rằng phần tử là một bảng như thể sử dụng thẻ
  ;
  chú thích bảng - tạo tiêu đề bảng từ một phần tử, như khi áp dụng thẻ
  ;
  table-column-group - chỉ định rằng phần tử là một nhóm gồm một hoặc nhiều cột trong bảng, như thể sử dụng thẻ
  ;
  table-footer-group - hoạt động như một thẻ
  .
  table-header-group - giá trị hoạt động tương tự như thẻ
  .
  table-row - biến một phần tử thành một hàng trong bảng dưới dạng thẻ
  ;
  table-row-group - hoạt động như một thẻ
  .

  Tạo một phần tử khối nội tuyến - giá trị khối và nội tuyến

  Từ các bài viết trên ngôn ngữ HTML Bạn nên biết rằng các thành phần trên trang web được hình thành dựa trên các thẻ. Các phần tử này sẽ được hiển thị như thế nào trong trình duyệt tùy thuộc vào quy tắc đánh dấu kiểu CSS được chỉ định bởi bạn hoặc được chấp nhận theo mặc định.

  Tại mô tả html thẻ, tôi thường thu hút sự chú ý của bạn đến loại thẻ - chữ thường anh ấy hoặc khối. Hoạt động của một phần tử trên trang web phần lớn phụ thuộc vào điều này: liệu nó có xu hướng chiếm toàn bộ chiều rộng của trang và đặt ngắt dòng bên trên và bên dưới phần tử (các phần tử khối) hay không ( phần tử nội tuyến). Quy tắc hiển thị CSS chịu trách nhiệm về hành vi này của các phần tử.

  Theo mặc định, bạn có thể tìm hiểu loại thẻ cụ thể là gì trên trang đặc tả CSS “Biểu định kiểu mặc định cho HTML 4”. Ngay từ đầu, trang này liệt kê tất cả các phần tử được coi là cấp khối, vì quy tắc được đặt cho chúng

  Đối với các phần tử khác, trừ khi có quy định khác, quy tắc sẽ được áp dụng Hiển thị nội dòng.

  Nếu cần, bằng cách sử dụng quy tắc hiển thị, bạn luôn có thể tạo một phần tử khối nội dòng và ngược lại, chỉ bằng cách chỉ định giá trị mong muốn trong kiểu CSS.

  Hãy xem ví dụ này:

  tiêu đề h1

  
  

  Trong ví dụ có hai phần tử: một khối (h1) và một phần tử nội tuyến (span). Để rõ ràng, mỗi phần tử được lấp đầy bằng nền riêng bằng cách sử dụng:

  

  Ảnh chụp màn hình cho thấy phần tử tiêu đề h1, có màn hình được đặt thành chặn theo mặc định, chiếm toàn bộ chiều rộng của khu vực trang có sẵn cho nó, mặc dù thực tế là văn bản chứa trong đó kết thúc sớm hơn nhiều. Và phần tử span, có giá trị hiển thị được đặt thành nội tuyến theo mặc định, chiếm chính xác không gian theo chiều ngang cần thiết cho nội dung chứa trong đó.

  Trong ví dụ sau hãy biến phần tử khối h1 thành phần tử chữ thường. Để thực hiện việc này, hãy thêm quy tắc display:inline cho nó trong các kiểu:

  tiêu đề h1

  
  Phần tử span là phần tử nội tuyến

  

  Kết quả là, chúng ta thấy rằng phần tử h1 đã không còn chiếm toàn bộ không gian có sẵn cho nó về chiều rộng và ngắt dòng sau khi nó biến mất, do đó phần tử span nội tuyến sau đây bị ép vào nó.

  Tương tự, bằng cách thêm quy tắc display:block, bạn có thể tạo khối phần tử span nội tuyến:

  tiêu đề h1

  
  Phần tử span là phần tử nội tuyến

  

  Kết quả là phần tử span sẽ được chuyển đến hàng tiếp theo và sẽ chiếm toàn bộ chiều rộng của khu vực trang có sẵn cho nó, bất kể lượng nội dung chứa trong đó.

  Do đó, bạn có thể thao tác bất kỳ thành phần nào của trang HTML: ví dụ: biến chúng thành thành phần nội tuyến và thành phần nội tuyến thành thành phần khối.

  Động lực trên trang html sử dụng quy tắc CSS - không hiển thị

  Một quy tắc được quy định cho bất kỳ phần tử nào không trưng bày xóa nó khỏi tài liệu và không hiển thị nó dưới bất kỳ hình thức nào. Đồng thời, không gian trên trang web thậm chí không được dành riêng cho nó, như trường hợp của quy tắc hiển thị:ẩn đã thảo luận ở trên. Trang web được tạo như thể phần tử không có trên trang.

  Giá trị "none" cho quy tắc hiển thị được sử dụng chủ yếu cho thực hiện động lực trên trang sử dụng bộ chọn lớp giả và phần tử giả. Ví dụ: bằng cách sử dụng lớp giả di chuột, bạn có thể xác định các quy tắc chỉ bắt đầu hoạt động khi bạn di chuột qua yêu cầu html yếu tố.

  Bằng cách này có thể thực hiện tạo menu thả xuống, làm cho nội dung của danh sách bị loại bỏ khi bạn di chuột qua nó. Ở trạng thái bình thường, quy tắc “display:none” phải được chỉ định cho danh sách và khi bạn di chuột qua nó, hãy đặt quy tắc “display:block” cho danh sách đó:

  • Đoạn 1
  • điểm 2

  Và mã ví dụ:

  
  

  
  
  • Đoạn 1
  
  
  • điểm 2
  
  

  Ngoài khối, nội tuyến và không được thảo luận chi tiết, quy tắc hiển thị có thể nhận nhiều giá trị khác nhau. Nhưng chúng hiếm khi được sử dụng.

  Ví dụ như quy tắc hiển thị: mục danh sách cho phép bạn tạo các thành phần thẻ khối của danh sách. Ví dụ: chúng tôi có một số đoạn văn liên tiếp:

  Đoạn 1

  
  

  đoạn văn bản 2

  
  

  đoạn 3

  Theo mặc định sẽ trông giống như thế này:

  

  Bây giờ, nếu bạn chỉ định quy tắc display:list-item cho các đoạn này, trình duyệt sẽ tạo một khu vực đặc biệt để hiển thị các điểm đánh dấu. Tuy nhiên, để nhìn thấy chúng, bạn cần bằng cách nào đó di chuyển các đoạn văn ra xa mép trái. Điều này có thể được thực hiện bằng cách sử dụng quy tắc lề trái, chỉ định mức thụt lề mong muốn:

  Đoạn 1

  
  

  đoạn văn bản 2

  
  

  đoạn 3

  Kết quả:

  

  Kết quả là không sử dụng thẻ

  Và
  • chúng tôi tạo ra được gắn thẻ html danh sách. Nếu muốn, bạn có thể tùy chỉnh loại điểm đánh dấu khi Trợ giúp CSS quy tắc .

    Ngoài danh sách, quy tắc hiển thị cho phép bạn chuyển đổi các thẻ HTML thành bảng và các thành phần của nó. Để thực hiện việc này, mỗi màn hình được gán giá trị riêng: bảng, bảng nội tuyến, chú thích bảng, cột bảng, nhóm cột bảng, nhóm tiêu đề bảng, nhóm hàng bảng, nhóm chân trang, bảng-hàng, ô bảng.

    VÀ giá trị cuối cùng hiển thị: khối nội tuyến, tạo ra một phần tử khối được đặt cạnh các phần tử trang bên ngoài và trang liền kề khác. Quy tắc CSS này có hiệu lực tương tự như các phần tử nội tuyến như .

    Do đó, bằng cách sử dụng quy tắc hiển thị, bạn có thể thay đổi các thành phần đã có trên trang thành bất kỳ thành phần nào khác. Trong trường hợp này, bạn không cần thực hiện các thay đổi đối với chính mã html mà chỉ cần thay đổi cách hiển thị các thẻ trong trình duyệt. Để làm điều này, chỉ cần thêm một vài dòng vào nội dung css tập tin và thế là xong.

    Tôi sẽ kết thúc ở đây, đừng quên đăng ký cập nhật blog và nhấp vào nút mạng xã hội! Hẹn gặp lại!

    • Internet
    • Chương trình
    • Hướng dẫn
    • Trình duyệt
    • Windows 10
    • Android
    • iOS
    • Sự liên quan

    Những ghi chú cuối cùng

    

    PDF Password Remover Free - chương trình xóa mật khẩu cho tài liệu PDF. Cách đặt mật khẩu bảo vệ file pdf

    

    Nhấp nháy ổ đĩa flash vào ổ đĩa DVD có ảnh ISO được gắn

    

    Bộ lặp Wi-Fi (bộ lặp) là gì, nó hoạt động như thế nào và bộ định tuyến ở chế độ lặp lại có ý nghĩa gì?

    

    Tạo phím tắt để tắt hoặc khởi động lại máy tính nhanh chóng

    

    Badoo - mạng xã hội để hẹn hò: trang của tôi, viết gì trong hồ sơ Badoo com phiên bản di động

    Phổ biến

    

    Nhập mã kết nối tài khoản YouTube với Tivi Youtube com kích hoạt đăng nhập

    

    Cách thay đổi kích thước nhiều ảnh hoặc hình ảnh - FastStone Photo Resizer Cách thay đổi kích thước nhanh chóng nhiều ảnh

    

    Cách đặt mật khẩu cho file Excel

    Tin tức

    2024-02-20 02:08:25

    PHP: Loại bỏ các phần tử mảng

    2024-02-19 02:03:38

    Đánh giá về một chiếc phablet tốt nhưng quá đắt Thông tin về nhãn hiệu, kiểu máy và tên thay thế của một thiết bị cụ thể, nếu có

    2024-02-19 02:03:38

    Đánh giá máy ảnh LG G4: Chiếc smartphone chụp ảnh tuyệt vời

    2024-02-18 02:12:34

    Gọi lại hoặc trò chuyện - công cụ nào bán hàng hiệu quả hơn Phải làm gì với côn đồ điện thoại

    2024-02-18 02:12:34

    Ghi lại nguyên nhân máy tính tắt
    viws.ru

    viws.ru - Tất cả về công nghệ hiện đại. Sự cố, mạng xã hội, internet, virus

    2024 - Bảo lưu mọi quyền

    • Liên lạc
    • Giới thiệu về trang web
    • Quảng cáo trên trang web

    • Internet
    • Chương trình
    • Hướng dẫn
    • Trình duyệt

    • Internet
    • Chương trình
    • Hướng dẫn
    • Trình duyệt

  ;

  ô bảng - phần tử là ô bảng, giống như thẻ

  hoặc	; cột bảng - phần tử là một cột trong bảng, như với một thẻ