Box-sizing

Możliwe wartości do zastosowania przy tej właściwości

border-box - wielkość kontenera (div) jest dokładnie taka jak wskazano - definiuje wielkość kontenera po jego granicy

content-box- podstawowe, zachowanie się kontenera (div) od obszaru, w którym znajduje się jego zwartość /wskazana wartość wielkość pudełka odnosi się do jego zawartości, - oznaczo to że margines …

Schemat

Lista dyrektyw

selektor { 
właściwość - wartość właściwości; /* razem tworzą deklarację */
}

ang. rule set

Selector {
  property: property value; /* declaration */
}

Selektor znacznika np strong Selektor klasy poprzedzony jest kropką .

Selektor id poprzedzony jest haszem #

Selektor id nadaje priorytet regule ważniejszy od niż ten posiadający klasę, a selektor znacznika/typu ma najmniejszy priorytet …

Właściwość float wskazuje służy do pozycjonowani oraz formatowani treści wskazuje w jaki sposób element ma pływać (float)

left - znajduj się po lewej stronie right - znajduj się po prawej stronie none - nie pływaj inherit

Przykładowe zastosowanie

img {
  float: right;
}

Układ strony przy wykorzystaniu właściwości float

Clear

Właściwość clear definiuje po której …

Deklaracja place-items (podobnie jak align-items) odnosi się do pozycjonowania dzieci elementu, których układ jest zależny od układu Flexbox lub Grid.

Deklaracja place-items jest połączeniem align-items oraz justify-items i przyjmuje podwójne wartości w odpowiadające kolejno za align-items o następnie za justify-items. Wymaga wcześniejszej deklaracji floatbox lub grid

Przykładowe zastosowanie

.item {
  display …

Display odpowiada za sposób w jaki sposób dane elementy będą wyświetlane

Właściwości deklaracji display

inline - domyślna funkcja, elementy wyświetlane są w sposób liniowy / obok siebie

block - elementy wyświetlane są w sposób blokowy / jeden pod drugim

inline-block - charakterystyka bloku ale trzyma się linii / bloki jeden obok siebie

none - chowa element (usuwa …

Podstawowe właściwości position

static - wartość domyślna, pozycja zgodna z układem strony

relative - relatywnie do swojej domyślnej pozycji przesunięty o zdefiniowaną właściwość/wartość

• top, right, bottom, left

Przykładowe zastosowanie

  div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
    }

fixed - pozycja relatywna do wyświetlacza (viewport) - zawsze w tym samym …

Flexbox jest technologią odpowiedzialną za układ treści znajdujących się na stronie internetowej w dosłownym tłumaczeniu można by to nazwać elastycznym modelem pudełkowym. Faktycznie ten sposób organizacji tzw layoutu lub też interfejsu oparty jest na równorzędnych kontenerach zwierających treść, które mogą być organizowane w sposób poziomy (liniowy) lub pionowy (kolumnowy) i …

Emmet jest zbiorem wtyczek, które pozwalają na szybkie kodowanie (html,xml,css) przy pomocy wykorzystania pojawiających się podpowiedzi rozpoznających wpisane skróty. Nazwa ma być nawiązaniem do brzmienia wyrazu mrówka w j. angielskim (Ant) - owada potrafiącego przenieść przedmioty ważące wielokrotnie więcej od niej samej.

Emmet jest "wbudowany" w Visual Studio Code …