Normal Flow

The normal flow of a page is how HTML elements are normally rendered to a page. The browser starts reading (and displaying) content from the top of the page to the bottom. When it encounters  visible HTML elements, there are two primary ways that elements are displayed on a page: block and in-line.

Block Elements

Block elements take up the entire entire width of their container and are stacked vertically on the page; i.e. block elements is start on their own line. Examples of elements that a normally displayed as a block element are: <p>, <div>, <h1-7>, <header>, <footer>, <section>, <table>, etc.

In-line Elements

In-line elements are laid out horizontally on the page. Their width only takes up the horizontal space necessary for the element. Examples of inline elements are: <span>, <em>, <strong>, <a>, <img>, etc.

Modifying the Defaults

CSS allows us to set (modify) the default properties of HTML elements. The position and display properties affect that normal (default) flow of elements on a page; flow meaning how the elements interact with the elements around them. When two div tags are put next to each other, by default they appear vertically on the page. That’s because they are block elements.

When two images are put next to each other, by default they appear side by side on the page. That’s because they are in-line elements.

When we assign a value of absolute or fixed to an element’s position property, the element is taken out of the normal flow. The spacial relationship that  element has with the other elements on the page are changed. It’s almost as if the other elements don’t see it any more. From the other elements point of view, since it isn’t there, they move in to take up that space. It’s like a big rock in a river. The water flows around the rock. Pull the rock out of the river, the water fills in to fill the void left by the absence of the rock. Make an element absolutely positioned, the elements that follow it rush in to fill the void.

 

 

Browser coordinate system

Student Question:

“I have a question about the box shadows: what if you don’t want the box shadows to appear on the right and bottom of the box? The code that we used (ex. -webkit-box-shadow: 1px 1px 4px black;) doesn’t specify locations. What if, instead, I wanted the shadows to appear on the top and left sections of a box?”

Response:  “As far as the controling the placement of shadow effects… just a guess, try putting in negative numbers and see how that affects it. Remember, the numbers indicated pixel locations.”

“Why are there negative numbers here?”

“Are you asking why I would try a negative number?”

“Yes, I’m asking why using a negative number would be different than using a positive number. This is the only code we’ve seen that can use negative numbers, and I don’t understand why.”

Let’s go into more detail

Do remember the cartesian Coordinate system from High School geometry? http://en.wikipedia.org/wiki/Cartesian_coordinate_system. It is simply a way of representing 3 dimensional space on a 2-D surface.

Think of the browser window as having a x, y, and z axis (actually it does). The x-axis is horizontal. The y-axis is vertical. The z-axis is perpendicular to the window. In geometry we learned that positive numbers are to the right and negative numbers are to the left. A location of any point in the window is relative to a point of origin. The point of origin, i.e. (0,0,0) in a browser window is the upper left-hand corner of the window. Positive X values are to the right. Positive Y values are towards the bottom of the screen. Positive Z values are coming out of the window towards you. Therefore, the negative directions of each axis are in the opposite direction.

In the case of working with drop shadows in CCS3, we use the following syntax…

box-shadow: h-shadow v-shadow blur spread color inset;

where

  • h-shadow is the horizontal distance
  • v-shadow is the vertical distance
  • blur is the blur distance
  • spread is the size of the shadow
  • color is the color of the shadow
  • inset [optional] changes the shadow from an outer shadow to an inner shadow

The distance parameters of the drop (box) shadow are relative to the location of the element that they are affecting. So a 10px distance for h-shadow would be to the right of the element. a v-shadow value of 10px would be under the the element; i.e. towards the bottom of the screen. Consequently, if you use negative numbers, the directions would be in the opposite direction of the relative axis.

Examples:

 

Positive direction ,   box-shadow: 10px 10px 5px #888888;

 

negative direction    box-shadow: -10px -10px 5px #888888;