CSS lewa nieruchomość

Język CSS ma kilka efektów, które należy zastosować jako kod dotyczących treści HTML, która jest zadeklarowana w celu utworzenia strony internetowej. Język HTML tworzy obiekty i projekt CSS i dodaje do nich styl, stosując kilka efektów i wartości. Jedną z właściwości CSS jest wyrównanie i kierunek zawartości HTML. W tym artykule porozmawiamy o jednej z właściwości, które są powszechnie używane do wyrównania obiektów HTML.

Lewa własność

CSS oferuje wyrównanie zawartości HTML w każdym kierunku. Jednym z nich jest lewa właściwość. Nazwa wskazuje, że odnosi się do lewego kierunku, a ten kierunek jest powiązany z wyrównaniem poziomym. Jeśli obiekt HTML nie otrzyma żadnej właściwości pozycji, ta lewa właściwość nie jest stosowana do tego obiektu. Innymi słowy, ta właściwość nie dotyczy obiektów, które nie są pozycjonowane.

Składnia
Podstawową składnią lewej właściwości może być:
Po lewej: długość | Procent | Auto | Początkowy | dziedziczy;

Wartość może mieć pięć rodzajów. Wyjaśnimy każdy rodzaj wartości lewej właściwości:

• Długość: Ta zmienna zawiera wartość lewej właściwości CSS dowolnej treści. Wartość może być liczbą dodatnią lub ujemną.
• Procent: Własność szerokości obiektu HTML jest pobierana w jednostce procentowej.
• Auto: Ta właściwość CSS służy do ustawienia wartości tej właściwości na domyślną.
• Początkowa: ta wartość domyślnie przekształca lewą właściwość na pierwotną wartość lub początkowo, gdy obiekt został zadeklarowany przed zastosowaniem jakiejkolwiek transformacji.
• Dziedzictwo: dziedzictwo odnosi się do dziedzictwa. Wartość lewej właściwości jest ustawiona od rodziców obiektu HTML.

Teraz używamy fragmentu kształtów, które losowo pływają na stronie internetowej. Wszystkie te bloki są div, pojemnik utworzony w korpusie HTML. Każdy blok jest w swoim kierunku, niektóre nakładają się na siebie. Podczas gdy niektóre bloki są niezależnie wyświetlane. Każda z nich jest ustawiona przez tę lewą właściwość przez CSS za pomocą wartości względnych lub bezwzględnych. Omówimy tworzenie tego rodzaju kształtów na stronach internetowych.

Działanie lewej nieruchomości CSS

Niektóre podstawowe terminologie, które są niezbędne do wdrożenia lewej właściwości, są opisane w następujący sposób:

• Lewa nieruchomość na względnej pozycji
  Ta właściwość jest nakładana po lewej stronie lub lewej krawędzi zawartości i dlatego przesuwa się na prawą stronę oryginalnej formy. Jeśli ta wartość jest przyjmowana w wartości dodatniej, pudełko HTML lub dowolny kształt jest przenoszony w prawo. Względna pozycja dowolnego obiektu HTML jest kierunek, który zależy od innych elementów w okolicy.
• Lewa nieruchomość na absolutnej pozycji
  Dla tych elementów, które mają wartość bezwzględną dla pozycjonowania, właściwość ta przesuwa lewą stronę elementu do prawej strony ciała. Element jest przesunięty z pozycji wyjściowej. Wartość bezwzględna to wartość elementu zgodnie z tłem.
• Właściwość statyczna
  Ta właściwość nie wpływa na obiekt. Niezależnie od tego, czy zastosujemy go do elementu, czy nie, obiekt HTML pozostaje nienaruszony.

Przykład 1:
Najpierw rozważ sekcję ciała zawierającą zawartość HTML. Kolor tła jest zmieniany, aby ulepszyć kolory stworzonych przez nas divów. Utworzona jest klasa Div Parent, a dwa kolejne Div są również zadeklarowane w Div Parent, tworząc dwa Dziecięce Divy. Zamknij rodzica Div. Dodaj dwa Divy.

Każde 5 DIV jest wspomniane z klasami CSS. Klasy te są zadeklarowane w sekcji głównej kodu HTML.

< div class = :sample1" >długość

Po kodzie nadwozia natkniemy się na sekcję kodu. Po pierwsze, kolor czcionki ciała jest ustawiony na szeroki, aby można go było łatwo wyświetlić na czarnym tle.

Teraz mówimy o wewnętrznym CSS, którego tu użyliśmy. Każda klasa jest tutaj wyjaśniona, aby dodać efekty do Div. Klasy te stosują więcej niż pojedyncze efekty na Divy jednocześnie, stąd wewnętrzne CSS jest lepsze niż wbudowane CSS. Pięć właściwości dodawanych do każdej klasy to rodzaj pozycji, lewy kierunek i rozmiar zastosowanego div, który zawiera szerokość i wysokość w pikselach. Granica jest nakładana do divto, czyni ją kształtem. Wszystkie te klasy mają te same właściwości, ale wszystkie z nich mają różne wartości.

.próbka 1
Pozycja: absolutna;
po lewej: 109px;
szerokość: 200px;
Wysokość: 100px;
granica: 5px Solid pomarańcza;

Mówiąc o tej klasie próbki 1, pozycja jest zajęta jako absolutna. Jest to stosowane dla każdej klasy, co oznacza, że ​​każda div jest zadeklarowana przez przestrzeganie wartości, a nie zależnie od drugiego Div zadeklarowanego w otoczeniu. Lewa nieruchomość jest stosowana w pikselach.

Klasy próbki 2 i próbki3 są stosowane z czerwonymi i zielonymi kolorami.

.próbka 2
Po lewej: 47%;

Lewa właściwość klasy próbki 2 jest podawana w procentach. Dla klasy3 ustawiamy automatyczne kierunek, co oznacza, że ​​jest on wyświetlany zgodnie z liczbą jego zakrętów w kodzie HTML.

.Próbka3
Po lewej: auto;

Klasa próbki 4 zawiera różową granicę, a lewa właściwość jest ustawiona jako początkowa.

.próbka 4
Po lewej: początkowe;

Dla ostatniego div przyjmujemy lewą wartość jako dziedzictwo. Wszystkie te efekty są zrozumiałe, gdy wykonujemy kod.

.próbka5
Po lewej: dziedzictwo;

Każdy div ma inny kolor i inny rozmiar. Teraz zapisz kod z rozszerzeniem HTML. Wykonaj plik w przeglądarce, aby zobaczyć wyniki.

Zobaczysz, że wszystkie pięć div jest wyświetlanych w różnych lokalizacjach. Pojemniki początkowej i dziedzicznej lewej nieruchomości zawalały się, ponieważ mają te same wymiary.

Przykład 2:

Rozważ poprzedni obraz utworzony przy użyciu dwóch tagów div i deklarowaniu nazw klas, jak to zrobiliśmy w poprzednim przykładzie. Rozważymy tylko tagi CSS. Purple Div zawiera pozycję jako absolutną. Należa do niej właściwość rozmiaru zawierająca szerokość i wysokość.

Lewa nieruchomość jest podawana w pikselach.

.Dem-fiolet
Pozycja: absolutna;
Po lewej: 4px;

Druga zielona div jest wyświetlana wewnątrz zewnętrznej fioletowej div. Wynika to z właściwości pozycyjnej, która jest traktowana jako względna, więc ten div jest wyświetlany zgodnie z otaczającym lub zewnętrznym divem.

.Dem-Lightgreen
Pozycja: względny;
Po lewej: 8px;

Przemieszczenie wewnętrznej div jest zgodnie z zewnętrzną divem.

Wniosek

W lewej nieruchomości CSS staraliśmy się opisać działanie tej funkcji kierunkowej na zawartości HTML. Istnieją dwie podstawowe właściwości w CSS, które są ze sobą powiązane w celu wyrównania dowolnej zawartości HTML: pozycji i lewej właściwości. Właściwość pozycji może być bezwzględna, względna lub statyczna. Podczas gdy lewa właściwość może być automatyczna, dziedziczna lub początkowa, w pikselach lub procentach. W tym artykule wyjaśniliśmy użycie wszystkich tych efektów osobno, stosując je do Div i stosując efekt względny, używając jednego Div wewnątrz drugiego.