Web based School

Chapter 02, Learn how to position HTML elements in any HTML page

Cascading Style Sheets is used to position HTML elements in any HTML page. To controls the design and layout we can use CSS box model that wraps around an HTML element.

Box model
.container { box-sizing: border-box; } The CSS property "box-sizing" has two values, one is content-box, which renders the actual size of the element including the content box; but not the paddings and borders and the 2nd value is border-box, which renders the actual size of an element including the content box, paddings, and borders.

box-sizing values
#box-example { box-sizing: border-box; } The value border-box is recommended when it is necessary to resize the padding and border but not just the content, height = content height + padding + border.

Margin
div { margin: Auto; } The margin property will take the width of the element and will split the rest of the space equally between the left and right margins, so to horizontally center an element within its container use 'auto' value.

Height and Width
.column { max-width: 400px; width: 600px; } To set a minimum/maximum width and minimum/maximum height of an element’s box we need to use the min-width/max-width and min-height/max-height properties.

Overflow
small-block { overflow: scroll; } When content is too large for its container, we can set one of three values.
Value 1: visible, where the content will take up extra space.
Value 2: hidden
Value 3: scroll, which will activate the scroll bars within the original container

Visibility
.invisible-elements { visibility: hidden; } To render hidden objects invisible to the user, without removing them from the page we use the CSS visibility property.

Margin Collapse
.block-one { margin: 30px; } .block-two { margin: 40px; } CSS margin collapse occurs when the top and bottom margins of blocks are combined into a single margin equal to the largest individual block margin. In the above example, the vertical margins will collapse to 40 px instead of adding to 70 pix.