Learning CSS

CSS layout

There are three kinds of layouts: Normal flow Layout, Float Layout, Absolute Position Layout. To understand those three kinds of layouts, the key point is to understand two concepts: normal document flow and box model.

Normal document flow is the default way of arranging the HTML element from top to bottom or left to right in order without overflow and overlap by the value of the property, display. And the Box model means every HTML element is wrapped in a box, controlled by the properties: margin, padding, border, background.

Normal flow layout is the whole layout in a single document flow, according to the normal document flow, the element’s layout behave in a normal way, top to bottom and left to right.

Float layout is to use property float by its value left, right or none. The keynote is the float property only affect nearby elements’ layout, in order to erase that effect, there are two ways to eliminate that floating effect.

clear:both;
// another
width: 100%;
overflow: hidden;

Be notice, the Float layout still renders in a single document flow, so there is no overlap between elements.

Absolute Position Layout is so different, when an element’s position property was set to the absolute value, this element will be separated from the standard document flow. Its position coordinate will be its nearest positioned parent, whose position property was decorated by value relative or fixed.

Case Study

auto-centering one column layout

.container {
    width: 80%;
    margin: 0 auto;
}

float layout case, two column layout: left and right.

.left {
    float: left;
}

.right {
  float: right;
}

absolute position case

.parent {
    position: relative;
}

.child {
    position: obsolute;
    top: 5px;
    right: 5px;
}

CSS selector

How many CSS selectors are there?

.classname {
}

#idname {
}
// select multiply elements 
a, div {
}

// select a p element which belong to a div 
div p {
}

//  select a p element which is the direct child of a div
div > p {
}

// select a p element which is the neighbour of a div
div + p {
}

And there are also so much pseudo selectors.

div:first-child {
}

div:nth-child(3) {
}

div:nth-of-type(2) {
}

div::before {
}

div:: after {
}

I guess I must refer to the online standards to get all of them.

CSS3 new features

the new animation and transformation commands, still learning.