Hiển thị có phải là một giá trị trong CSS không?

Với thuộc tính hiển thị, chúng ta có thể ghi đè giá trị ban đầu của một phần tử. Ví dụ: phần tử cấp khối có thể được hiển thị dưới dạng phần tử nội tuyến bằng cách chỉ định giá trị "nội tuyến". Một phần tử nội tuyến không chấp nhận các thuộc tính chiều cao và chiều rộng. Nó sẽ chỉ bỏ qua nó

Trong HTML, các giá trị mặc định của thuộc tính hiển thị được lấy từ các hành vi được mô tả trong thông số kỹ thuật HTML hoặc từ biểu định kiểu mặc định của trình duyệt hoặc người dùng. Mặt khác, giá trị mặc định trong XML là "inline"

Bạn có bao giờ thắc mắc tại sao một số phần tử trên một trang được hiển thị cạnh nhau trong khi những phần tử khác được hiển thị bên dưới phần còn lại không? . Hình ảnh dưới đây minh họa điều này

Thuộc tính Display trong CSS được sử dụng để thiết lập hiển thị của một phần tử. Nó quản lý và thay đổi cách các phần tử HTML được hiển thị trên trang web. Nó được sử dụng để xác định cách các phần tử hoạt động trong khi ở chính xác vị trí của chúng

Thuộc tính Hiển thị CSS hoạt động như thế nào?

Mỗi phần tử được hiển thị trên trang có một thuộc tính hiển thị nhất định. Giá trị mà người dùng gán cho thuộc tính hiển thị được hiển thị

cú pháp

Giá trị hiển thị mặc định cho hầu hết các phần tử là khối hoặc nội tuyến

Thuộc tính hiển thị trong CSS

Trước khi tiếp tục với các thuộc tính, chúng ta sẽ xem các phần tử cấp độ khối là gì và các phần tử cấp độ nội tuyến là gì

Vì vậy, phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Các

,

,

---

,

thẻ trong HTML là một số thẻ có hiển thị là "khối"

Phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm chiều rộng được yêu cầu. Các ,

Giải trình. Ở đây các phần tử được đặt theo chiều ngang trong một dòng. Mặc dù chúng tôi đã đặt chiều cao và chiều rộng của các khối nhưng nó không được phản ánh như đã thảo luận ở trên. Ở đây, chiều cao không được hiển thị do thuộc tính nội tuyến bỏ qua chiều cao

Chặn

Nó được sử dụng để hiển thị các phần tử như các phần tử khối. Chúng được đặt cái này bên dưới cái kia. Nó là giá trị mặc định của

thành phần. Ở đây, chiều cao và chiều rộng có thể thay đổi nhưng nếu không xác định thì sẽ lấy chiều rộng của vùng chứa

cú pháp

Ví dụ-

    Display Properties
    


    

        
DIV I

        
DIV II
        
DIV III
    



đầu ra
Giải trình. Các phần tử được đặt bên dưới nhau. Nó bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của vùng chứa
Không có
Nó được sử dụng để tắt hiển thị một phần tử. Bố cục trang sẽ được hiển thị như thể phần tử đã bị xóa và chưa từng tồn tại
Cú pháp-
Ví dụ-



    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    

đầu ra

Giải trình. Chúng tôi đã đặt giá trị hiển thị của DIV II là "không", vì vậy nó không được hiển thị và có vẻ như nó đã bị xóa hoặc chưa từng tồn tại

Chặn Nội tuyến

Như tên gợi ý, điều này biểu hiện các thuộc tính của cả nội tuyến và khối. Ở trên, chúng ta đã thấy rằng các phần tử nội tuyến được đặt cạnh nhau và chiều cao và chiều rộng được đặt rõ ràng của chúng không được hiển thị. Ngược lại, các phần tử khối hiển thị chiều cao và chiều rộng do chúng tôi đặt

Giá trị thuộc tính này được sử dụng để sắp xếp các phần tử nội tuyến, nhưng cho phép đặt chiều cao và chiều rộng và phản ánh trên trang web. Nó là sự kết hợp của các giá trị thuộc tính khối và nội tuyến

Cú pháp-

Ví dụ-

    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    



đầu ra
Giải trình. Chúng tôi đã đặt màn hình là "khối nội tuyến" và chúng tôi có thể thấy rằng các phần tử được đặt theo chiều ngang và chiều cao và chiều rộng do chúng tôi đặt sẽ được hiển thị

Các giá trị thuộc tính hiển thị CSS khác

Uốn cong

Nó được sử dụng để hiển thị phần tử dưới dạng bộ chứa flex cấp khối. Các mục bắt đầu từ cạnh bắt đầu của trục chính. Hướng flex mặc định là hàng

cú pháp

Ví dụ

    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    



đầu ra
Giải trình. Việc hiển thị các mục bắt đầu từ cạnh bắt đầu của trục chính và vì chúng tôi chưa cung cấp hướng uốn nên hướng uốn mặc định sẽ trở thành một hàng
lưới
Nó được sử dụng để hiển thị một phần tử dưới dạng bộ chứa lưới cấp khối. Phần tử HTML trở thành vùng chứa lưới khi thuộc tính này được sử dụng
cú pháp
Ví dụ



    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    



đầu ra
Giải trình. Tất cả các phần tử con trực tiếp của lớp displayElements hiện là các mục lưới. Trong trình duyệt web, bạn sẽ không thấy bất kỳ sự khác biệt nào về cách các mục này được hiển thị trước khi biến chúng thành lưới, vì lưới đã tạo ra lưới một cột
thừa kế
Nó được sử dụng để kế thừa thuộc tính của phần tử từ các phần tử cha của nó. Nhiều lần chúng tôi tạo các phần tử lồng nhau, tôi. e. , một
bên trong
, vì vậy, thay vì chỉ định CSS của nó mọi lúc, chúng ta có thể chỉ cần kế thừa nó từ CSS của cha mẹ nó
cú pháp
Ví dụ



    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    



đầu ra
Giải trình. Như đã viết trong ví dụ trên, div con có bộ kế thừa hiển thị cho chúng. Vì vậy, chúng sẽ kế thừa bộ hiển thị cho cấp độ gốc, đó là displayElements và nó có bộ hiển thị được đặt thành nội tuyến
Bạn sẽ nhận thấy rằng đầu ra cho màn hình. nội tuyến và hiển thị. kế thừa, trong trường hợp này, là như nhau
ban đầu
Nó được sử dụng để đặt thuộc tính thành giá trị mặc định của nó. Giá trị ban đầu có thể khôi phục tất cả các thuộc tính CSS về trạng thái ban đầu
cú pháp
Ví dụ



    Display Properties
    


    

        
DIV I
        
DIV II
        
DIV III
    



đầu ra
Giải trình. Ở đây, chúng tôi đã đặt màn hình thành giá trị mặc định của nó. Vì chúng tôi đã sử dụng div, giá trị ban đầu của div là "khối", vì vậy chúng tôi nhận được đầu ra giống như khối hiển thị
Các giá trị thuộc tính hiển thị CSS khác
Ngoài các giá trị thuộc tính hiển thị CSS ở trên, còn có nhiều giá trị khác. Hãy để chúng tôi có một cái nhìn thoáng qua về họ
 

			
Hiển thị trong CSS là gì?
			
Thuộc tính CSS hiển thị  đặt xem một phần tử được coi là một khối hay phần tử nội tuyến và bố cục được sử dụng cho phần tử con của nó, chẳng hạn như bố cục dòng, lưới hoặc flex. Formally, the display property sets an element's inner and outer display types.
		
			
Giá trị hiển thị HTML là gì?
			
Thuộc tính hiển thị  chỉ định nếu/cách một phần tử được hiển thị . Mỗi phần tử HTML có một giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó là gì. Giá trị hiển thị mặc định cho hầu hết các phần tử là khối hoặc nội tuyến. Nhấp để hiển thị bảng điều khiển. Bảng này chứa một phần tử 
		
			
Các giá trị của thuộc tính hiển thị trong CSS là gì?
			
Thuộc tính hiển thị nhận nhiều giá trị khác nhau như  inline , inline-block , block , table  và nhiều giá trị khác, tất cả đều ảnh hưởng đến bố cục . Ngoài ra, để triển khai bố cục flex và grid, bạn cần sử dụng thuộc tính display. 
		
			
Là giá trị được gán với thuộc tính hiển thị?
			
Có màn hình. block , các phần tử được xếp chồng lên nhau theo chiều dọc và mọi phần tử chiếm 100% trang.  Các giá trị được gán cho thuộc tính chiều rộng và chiều cao được tôn trọng nếu bạn đặt chúng, cùng với lề và phần đệm .