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
,
,
,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
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
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ọ