HTML&CSS Learning Notes 6

CSS

Basic III

Box Model
display property. Generally there are two features, block model and single element. Block model is like that whether the content is empty or not the width of the div decorated by block will be follow the rule we sat. Single means one element populate the full width, only one element stand in one line.

block: block model(like a box no matter the content), single element.

inline-block: block model, non-single element.

inline: none-block model(width depends on the content), non-single element.

none: disappear.

Four parts of Box Model

Margin
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to MOVE our HTML elements closer to or farther from each other.

Border
The border is the edge of the element. It’s what we’ve been making visible every time we set the border property.

Padding
The padding is the spacing between the content and the border. We can adjust this value with CSS to MOVE the border closer to or farther from the content.

Content
The content is the actual “stuff” in the box.

Parameters of Margin/Padding
According the order, up, right, down and left to Margin and Padding. auto is to center the content in horizontal.
Special setting for certain direction is like margin-[direction].

Parameter of Border
border: [width] [type] [color], negative number means moving to opposite direction.

Float
You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other. left and rightare the two parameters. If you have several elements, they all know the others are there and don’t land on top of each other.

clear
For example, there are three elements they across each other. If you type clear:left for the center one. It will move below for clear the left side of this center element, but doesn’t matter for right side. Same to right parameter for opposite result. Similarly both can clear both sides of the element.

Positioning
absolute
Absolute positioning element, relate to the first parent element which is not static.

fixed
Absolute positioning element, relate to the browser.

relative
Relative positining element, relate to itself to move (flow position).

static
Default flow element, not positioning element.

Circle

border-radius:[percentage], curving of corner.