Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

CSS

memorize.ai (lvl 286)

(0)

11 cards

()

Section 1

Preview this deck

position: absolute., fixed и тд

Front

1 / 11

CSS Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (11)

Section 1

(11 cards)

position: absolute., fixed и тд

Front

relative, absolute, fixed, static, inherit или sticky. absolute Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего расположенного предка, если таковой имеется; в противном случае он помещается относительно исходного containing block. Eсли у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. fixed устанавливается относительно области видимости браузера и не меняет положение при прокрутке sticky An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place

Back

animation

Front

keyframes+ name или transition

Back

горизонтальное центрирование

Front

margin-left: auto; margin-right: auto; text-align на родителе

Back

inline, block. inline-block

Front

Особенности блочно-строчных элементов: им можно задавать размеры, рамки и отступы, как и блочным элементам; их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера; Inline elements: respect left & right margins and padding, but not top & bottom cannot have a width and height set Block elements: acquires full-width if width not defined

Back

вертикальное центрирование

Front

vertical-align: middle; vertical align for div (wrapper table and child table-cell;top: 50% and margin-top: -(half of fixed height) px; top: 50% and transform: translateY: (-50%), display: flex)

Back

vertical-align

Front

Unfortunately vertical-align doesn't apply to block-level elements like a paragraph inside a div, which is where most of us figure out it isn't the be all solution to vertical centering.

Back

кроссбраузерность

Front

префиксы -webkit, -moz, -ms

Back

предпроцессоры

Front

SCSS - mixins, variables, imports, математические операции (даже с цветами) расширение. наследование Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } .message { @extend %message-shared; }

Back

selectors

Front

.class, #id, element, > element>element - parent>child, :nth-child(n) - можно выбрать child под номером + element+elemen один после другого elementplaced immediately after ~ element~element - elements after(all, not only immediately after) [attribute] - аттрибут, можно еще value добавить через =

Back

units

Front

cm centimeters mm millimeters in inches px * pixels pt points (1pt = 1/72 of 1in) em Relative to the font-size of the element % Relative to the parent element vw Relative to 1% of the width of the viewport* vh Relative to 1% of the height of the viewport* fr представляет собой долю (fraction) доступного пространства в грид-контейнере.

Back

pseudo class

Front

:active :any :any-link :checked :default :defined :dir() :disabled :empty :enabled :first :first-child :first-of-type :fullscreen :focus :hover :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited

Back