Home-theater-designers
Właściwość wyświetlania CSS jest potężnym narzędziem dla projektantów stron internetowych. Pozwala kontrolować układy elementów witryny przy minimalnym stylu i prostych wartościach, które są łatwe do zapamiętania.
Ale co robi każda z tych wartości i jak działają? Dowiedzmy Się.
MAKEUSEOF WIDEO DNIA
Co to jest właściwość wyświetlania CSS?
Właściwość display określa typ renderowania pola używanego dla elementów HTML na stronie internetowej. Powoduje to różne zachowania, w tym brak pojawiania się w ogóle. Możesz edytować te wartości w swojej witrynie za pomocą arkusza stylów lub odpowiednich sekcji dostosowywania CSS w Narzędzia CMS, takie jak WordPress .
Utrzymuj elementy w linii z wyświetlaniem CSS: inline
Wartości szerokości i wysokości nie mają zastosowania do elementu z wbudowanym wyświetlaniem; zawartość wewnątrz ustawia swoje wymiary. Wbudowane elementy HTML mogą znajdować się obok innych elementów, zachowując się jak a
mój komputer jest podłączony, ale się nie ładuje
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
Powyższe znaczniki HTML i CSS stanowią dobry przykład wyświetlanej wartości wbudowanej. Używane razem, wyświetli pojedynczą linię tekstu utworzoną z dwóch różnych elementów HTML.
Kontroluj układy stron internetowych za pomocą wyświetlania CSS: blok
Pod pewnymi względami wartość bloku wyświetlania jest przeciwieństwem wartości wbudowanej. Można ustawić wymiary wysokości i szerokości, a elementy o tej wartości nie mogą leżeć obok siebie. Powyższy przykład pokazuje dwa elementy z wartością bloku. Elementy z wartością wyświetlania bloku domyślnie mają maksymalną szerokość elementu nadrzędnego.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>W przeciwieństwie do przykładu stylu wbudowanego, ten przykład wartości bloku wyświetlania dzieli wiersze tekstu na dwa różne wiersze. Wartość szerokości dopasowania treści ustawia szerokość elementów tak, aby odpowiadała długości tekstu.
Elementy HTML obok siebie z wyświetlaniem CSS: inline-block
Wyświetlana wartość bloku śródliniowego CSS działa tak samo, jak zwykła wartość śródtekstowa, tylko z możliwością dodawania określonych wymiarów. Umożliwia to tworzenie układów przypominających siatkę bez umieszczania elementów nadrzędnych. Wracając do poprzedniego przykładu, dodanie wartości inline-block pozwala elementom usiąść obok siebie.
nie masz uprawnień dostępu do /index.html na tym serwerze.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
Wartość inline-block nie różni się zbytnio od wartości inline. Ważne jest, aby pamiętać, że możesz ustawić wymiary elementów z tą wartością, co ułatwia pracę w niektórych przypadkach.
Ukryj elementy witryny za pomocą wyświetlania CSS: brak
Najprostszą wyświetlaną wartością jest „brak”. Ta wartość ukrywa element i wszystkie elementy podrzędne wraz z marginesami i innymi właściwościami odstępów. Elementy z CSS nie wyświetlają żadnej wartości są nadal widoczne w inspektorach przeglądarki.
Twórz elastyczne i responsywne elementy za pomocą wyświetlania CSS: flex
Display flex to jeden z najnowszych trybów układu CSS. Kiedy display flex znajduje się na elemencie nadrzędnym, wszystkie elementy wewnątrz niego stają się elastycznymi elementami CSS. Elementem nadrzędnym w tej konfiguracji jest flexbox.
Flexboxy tworzą responsywne projekty z predefiniowanymi zmiennymi, takimi jak szerokość i wysokość. To jest warte nauka o flexboxach HTML/CSS zanim zaczniesz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> Ustaw Flexboxy obok siebie Z wyświetlaczem: inline-flex
Inline-flex zachowuje się jak zwykły flexbox, z dodatkową korzyścią polegającą na tym, że element może siedzieć obok innych elementów.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Twórz złożone tabele z wyświetlaniem CSS: table
Wartość wyświetlanej tabeli przypomina dawne czasy projektowania stron internetowych. Chociaż większość witryn nie używa obecnie tabel do swoich układów, nadal są one prawidłowe do wyświetlania danych i treści w czytelnym formacie.
Dodanie wartości tabeli do elementu HTML sprawi, że będzie on działał jak element tabeli, ale potrzebujesz dodatkowych wartości, aby tabela działała poprawnie.
Wyświetlanie CSS: komórka tabeli
Elementy z wartością komórki tabeli działają jak pojedyncze komórki w tabeli głównej. A wartości tabela-kolumna i tabela-wiersz grupują te poszczególne komórki razem.
Wyświetlanie CSS: table-row
Wartość table-row działa tak samo jak element HTML
Wyświetlanie CSS: tabela-kolumna
Wartość w kolumnie tabeli działa podobnie do wartości w wierszu tabeli, z tą różnicą, że nie dzieli tabeli. Zamiast tego możesz użyć tej wartości, aby dodać określone reguły CSS do różnych już istniejących kolumn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>Twórz tabele obok siebie za pomocą wyświetlania CSS: inline-table
Podobnie jak inne warianty inline, które już omówiliśmy, inline-table umożliwia umieszczanie elementów tabeli obok innych elementów.
Twórz responsywne układy stron internetowych za pomocą wyświetlania CSS: siatka
Wartość siatki wyświetlania CSS jest podobna do wartości tabeli, tylko kolumny i wiersze siatki mogą mieć elastyczny rozmiar. Dzięki temu siatki są idealne do tworzenia głównego układu stron internetowych. Pozostawiają miejsce na nagłówki i stopki o pełnej szerokości, a jednocześnie umożliwiają tworzenie obszarów treści o różnych rozmiarach.
jak usunąć hasło administratora w systemie Windows 10?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
Siatki są podobne do flexboxów, tylko mogą umieszczać elementy pod i obok siebie. Niezbędna do tego jest właściwość grid-template-areas. Jak widać z kodu, nasz nagłówek i stopka zajmują cztery spacje w tablicy, ponieważ mają pełną szerokość. Każdy z pasków bocznych zajmuje jedno miejsce, a zawartość zajmuje dwa, skutecznie dzieląc środkowy rząd siatki na trzy kolumny.
Wyświetlanie CSS: inline-grid
Użycie wartości inline-grid umożliwi umieszczenie siatki obok innych elementów, tak jak inne wartości inline w tym przewodniku.
Używanie wyświetlania CSS do projektowania stron internetowych
Właściwość wyświetlania CSS oferuje wygodny sposób dostosowywania struktur elementów witryny bez konieczności zmiany znaczników HTML. Jest to idealne rozwiązanie dla osób korzystających z platform dostarczania treści, takich jak Shopify lub WordPress, ale może być również przydatne do ogólnego projektowania stron internetowych.