Dno CSS

W tym artykule omówimy właściwość elementu, który nazywa się „dnem”. Ta właściwość służy do zdefiniowania atrybutu pozycyjnego dowolnego elementu obecnego w pliku HTML. Właściwość „dolna” jest częścią podzbioru właściwości pozycji, która ma w sobie top, lewą i prawą właściwości. W tym artykule omówimy kilka różnych metod, za pomocą których możemy przypisać dolną właściwość do elementu.

Dolna właściwość

Dolna właściwość służy do zdefiniowania pozycjonowania elementu z podstawy strony i określa szczelinę między końcem strony a elementem. Aby zdefiniować dolną właściwość, używamy następującej składni:

Jak widzimy, dolna właściwość jest określona przez wywołanie słowa kluczowego, a następnie wartość, która może się różnić w pięciu różnych typach, które są: automatyczne, długość, procent, początkowe i dziedziczone. Dolna właściwość wpłynie na element tylko wtedy, gdy właściwość pozycji zostanie ustawiona tak, aby naprawić, w przeciwnym razie nie będzie miała zastosowania do elementu.

Metoda 01: Za pomocą automatycznego słowa kluczowego do przypisywania dolnej właściwości w pliku HTML za pomocą wbudowanego CSS

W tej metodzie użyjemy słowa kluczowego automatycznego do przypisania dolnej właściwości elementu w pliku HTML. To dostosuje element z podstawą strony przeglądarki. W tej metodzie użyjemy wbudowanego formatu stylizacji CSS, aby przypisać dolną właściwość do elementu.

W poprzednim skrypcie dostarczyliśmy kierowanie do ciała za pomocą znacznika H1 i niektórych wbudowanych CSS. Następnie otworzyliśmy znacznik akapitu i, w tym znaczniku, dodaliśmy właściwość pozycji i dolną i ustawiliśmy je odpowiednio na „naprawioną” i „auto”. Właściwość ustalona pozycji umożliwia dno utworzenie efektu na znaczniku akapitów i dostosowanie go zgodnie z naszą przeglądarką. Teraz zapisujemy ten plik i uruchamiamy go w naszej przeglądarce, aby obserwować efekt tej właściwości.

Jak widać na poprzednim zrzucie ekranu, akapit w znaczniku ciała jest obecny między stroną. Stało się to z powodu właściwości pozycji i dolnej.

Metoda 02: Używanie pikseli do przypisania dolnej właściwości w pliku HTML za pomocą wbudowanego CSS

W tym podejściu przypisamy dolny atrybut elementu w pliku HTML za pomocą formatu długości (wartość w pikselach). To sprawi, że element dostosuje się do dołu strony przeglądarki za pomocą danej długości.

Użyliśmy znacznika „H1” i niektórych wbudowanych CSS, aby nadać ciału nagłówek w poprzednim skrypcie. Następnie otworzyliśmy znacznik akapitu i zastosowaliśmy do niego pozycję i dolne właściwości. Właściwość pozycji została następnie ustawiona na „ustaloną”, a dolna właściwość otrzymała wartość piksela „25px.„Atrybut ustalony pozycja pozwala dno mieć wpływ na znacznik akapitu i dostosować go na podstawie określonej długości i strony naszej przeglądarki. Teraz zapisujemy ten plik i uruchamiamy go w naszej przeglądarce, aby zobaczyć, jak działa ta właściwość.

Jak widać na poprzednim zrzucie ekranu, akapit w znaczniku ciała jest obecny na dole strony po nagłówku. Widzimy, że istnieje luka między akapitem a podstawą strony, ponieważ położenie i dolne właściwości są ustawione, aby nadać jej długość „25px”.

Metoda 03: Korzystanie z dolnej właściwości z „procentem” dla elementu za pomocą CSS inline CSS

W tej metodzie użyjemy formatu procentowego do ustawienia dolnej właściwości elementu w pliku HTML. To powoduje, że element dostosowuje się do dolnej strony strony przeglądarki za pomocą wartości procentowej. W tej metodzie dodamy dolny atrybut do elementu za pomocą wbudowanego stylu CSS.

W poprzednim skrypcie wykorzystaliśmy znacznik „H1” i niektóre wbudowane CSS, aby nadać ciału nagłówek. Następnie otworzyliśmy znacznik akapitu i ustawiła jego pozycję i dolną właściwość. Nieruchomość pozycji została następnie ustawiona na „ustaloną”, a dolna nieruchomość otrzymała wartość procentową, która wynosi „30 procent.„Właściwość ustalona pozycji pozwala na dolne wpływy na znacznik akapitu i zmodyfikowanie go na podstawie danej kwoty procentowej i strony naszej przeglądarki. Teraz zapisujemy ten plik i otwieramy go w naszej przeglądarce, aby sprawdzić, jak działa ta właściwość.

Jak widać w poprzednim przykładzie, akapit w znaczniku ciała pojawia się na dole strony po nagłówku. Pozycja i atrybuty dolne są ustawione na wartość procentową „30 procent”, więc istnieje luka między akapitem a dolną strony.

Metoda 04: Używając słowa kluczowego dziedzicznego do przypisywania dolnej właściwości w pliku HTML za pomocą wbudowanego CSS

W tym podejściu ustawimy dolny atrybut elementu w pliku HTML za pomocą Słowa kluczowego dziedzictwa. Zmusi to element do dostosowania do dolnej strony strony przeglądarki, wykorzystując wartość właściwości najbliższej funkcji nadrzędnej. Korzystając z wbudowanego stylu CSS, dodamy dolną właściwość do elementu w tym podejściu.

W poprzednim skrypcie otworzyliśmy znacznik akapitu i ustawiliśmy jego pozycję i dolną właściwość. Następnie właściwość pozycji została ustawiona na „naprawioną”, a dolna właściwość otrzymała słowo kluczowe „Dziedzictwo.„Właściwość ustalona pozycji pozwala na dolne wpływanie na znacznik akapitu i zmienić go na podstawie wartości właściwości najbliższej funkcji nadrzędnej i strony przeglądarki. Ten plik zostanie teraz zapisany i otwarty w naszej przeglądarce, aby zobaczyć, jak działa ta właściwość.

Akapit w znaczniku ciała pojawia się w pobliżu nagłówka, jak widać w poprzednim fragmencie. Istnieje luka między akapitem a nagłówkiem, ponieważ podana jest dolna właściwość, aby nadać akapitowi funkcję właściwości najbliższej funkcji nadrzędnej.

Metoda 05: Za pomocą początkowego słowa kluczowego do przypisywania dolnej właściwości w pliku HTML za pomocą wbudowanego CSS

Użyjemy słowa kluczowego „początkowego”, aby ustawić dolną właściwość elementu w pliku HTML. Zmusi to element do dostosowania do dołu strony przeglądarki za pomocą domyślnych ustawień przeglądarki. W tej metodzie dodamy dolny atrybut do elementu za pomocą wbudowanego stylu CSS.

Otworzyliśmy znacznik akapitu i ustawiliśmy jego pozycję i dolną właściwość, jak pokazano w powyższym skrypcie. Właściwość pozycji została następnie ustawiona na „naprawioną”, a dolna właściwość otrzymała słowo kluczowe „początkowe.„Atrybut ustalony pozycji pozwala dno wpłynąć na znacznik akapitu i zmienić go na podstawie domyślnych ustawień przeglądarki. Ten plik jest teraz zapisywany i przeglądany w naszej przeglądarce, aby zademonstrować użycie tej funkcji.

Jak zaobserwowano w poprzednim fragmencie, akapit w znaczniku ciała znajduje się w pobliżu nagłówka. Ponieważ dolna właściwość jest określona w celu zmodyfikowania akapitu do domyślnych ustawień naszej przeglądarki, istnieje luka między akapitem a nagłówkiem.

Wniosek

Dolna właściwość CSS została rozwiązana w tym artykule. Dolna właściwość znajduje się w podgrupie właściwości pozycji, takich jak lewy, prawy i góra, i jest zależna od właściwości pozycji, jak wyjaśniliśmy. Wdrożyliśmy tę koncepcję z wariantami w formacie wartości za pomocą Notepad ++ do edytowania pliku HTML.