Client-Side Web Technologies CSS Part II
Topics Box model and related properties Visual formatting model and related properties
The CSS Box Model Describes the rectangular boxes generated for elements in the document tree Each box has: Content area Padding (optional) Border (optional) Margins (optional)
The CSS Box Model (continued) Source: http://www.w3.org/tr/css2/box.html#box-dimensions
Width Property Specifies the width of the content area of boxes width Value: length percentage auto inherit Initial: auto Inherited: no Does not apply to non-replaced inline-level elements (width of non-replaced inline elements is determined by the rendered content within them)* When set to auto, the width depends on the value of other properties * We will discuss what is meant by inline-level later
Height Property Specifies the height of the content area of boxes height Value: length percentage auto inherit Initial: auto Inherited: no Does not apply to non-replaced inline-level elements* When set to auto, the height depends on the value of other properties * We will discuss what is meant by inline-level later
Margin Properties Specify the width of the margin area of a box The value can be a negative value margin-top, margin-bottom, margin-right, margin-left Value: length percentage auto inherit Initial: 0 Inherited: no margin shorthand property Value: [ length percentage auto ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively
Padding Properties Specify the width of the padding area of a box padding-top, padding-bottom, padding-right, padding-left Value: length percentage inherit Initial: 0 Inherited: no padding shorthand property Value: [ length percentage ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively
Border Properties Border width properties Border color properties Border style properties Border radius properties
Border Width Properties Specify the width of the border area of a box border-top-width, border-bottom-width, borderright-width, border-left-width Value: thin medium thick length inherit Initial: medium Inherited: no border-width shorthand property Value: [ thin medium thick length ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively
Border Color Properties Specify the color of the border area of a box border-top-color, border-bottom-color, borderright-color, border-left-color Value: color transparent inherit Initial: computed color property value Inherited: no border-color shorthand property Value: [ color transparent ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively
Border Style Properties Specify the line style of the border area of a box <border-style> = none hidden dotted dashed solid double groove ridge inset outset border-top-style, border-bottom-style, borderright-style, border-left-style Value: <border-style> inherit Initial: none Inherited: no border-style shorthand property Value: [ <border-style> ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively
Border Shorthand Properties border-top, border-bottom, border-right, border-left Value: [ border-width border-style border-color ] inherit Examples h1 { border-top: thick solid red } h1 { border-top: 1px solid } border Value: [ border-width border-style border-color ] inherit Sets values on all 4 borders
Box-Sizing Property Controls whether border and padding are included in width/height box-sizing Value: content-box border-box inherit Initial: content-box Inherited: no content-box: padding and border are drawn outside content area border-box: padding and border are drawn inside content area https://www.w3.org/tr/css3-ui/#box-sizing See: http://codepen.io/jmussitsch/pen/bdff7f3418c6225141132d1d0d73faa2 http://codepen.io/jmussitsch/pen/8edb8afc2fccad14a7b8710045fbe1b5
Border Radius Properties Specify the shape of the corner of the border border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius Value: [ length percentage ]{1,2} inherit Initial: 0 Inherited: no The 2 length or percentage values define the radii of the quarter ellipse that defines the shape of the corner of the outer border edge 1 st value: horizontal radius 2 nd value: vertical radius border-top-left-radius: 55pt 25pt Source: http://www.w3.org/tr/css3-background/#the-border-radius
Border Radius Shorthand Property border-radius Value: [ length percent ]{1,4} [ / [ length percent ]{1,4} ]? inherit Values before the / set horizontal radius and values after set the vertical radius If there is no / then both radii are set equally The 4 values for each radii are given in the order: top-left top-right (if omitted, same as top-left) bottom-right (if omitted, same as top-left) bottom-left (if omitted, same as top-right) See https://codepen.io/jmussitsch/pen/b4b14e1e1f5543df3e28d970ddfa0369
Box Shadow Property Attaches one or more drop-shadows to the box <shadow> = inset? && [ length{2,4} && color? ] box-shadow Value: none <shadow> [, <shadow> ]* Initial: none Inherited: no Length values: The 1 st length is the horizontal offset of the shadow (+ is right, - is left) The 2 nd length is the vertical offset (+ is down, - is up) The 3 rd length is the blur radius (the > the value the more blur) The 4 th length is spread distance (+ causes expansion, - contraction) Color is the color of the shadow The inset keyword causes an inner shadow as opposed to an outer See https://codepen.io/jmussitsch/pen/d15d9e95326606ee2f7a539d3c61cdd1
Visual Formatting Model How user agents (browsers) process the document tree for visual media Each element generates zero or more boxes according to the box model with layout based on: Box dimensions and type Positioning scheme Relationships between elements in the tree External information (e.g. Browser viewport size)
Visual Formatting Model (continued) Replaced element: Any element whose appearance and dimensions are defined by an external source E.g. images, form elements Non-replaced element Any element that is not a replaced element
Visual Formatting Model (continued) Canvas Space where the formatting structure is rendered Viewport Window offered by user agents (browsers) that allows users to view a document When smaller than the canvas area, a scrolling mechanism should be provided
Visual Formatting Model (continued) viewport
Visual Formatting Model (continued) Containing block Rectangular box that establishes the context by which descendant boxes positions and sizes are calculated from Every element box has a containing block The root element s (html) containing block is called the initial containing block and has the dimensions of the viewport For other elements, the containing block depends on the positioning scheme of the element and its relationship with other elements in the document tree
Visual Formatting Model (continued) Block formatting contexts Boxes are laid out one after the other, vertically, beginning at the top of the containing block Vertical distance between sibling boxes is determined by margin properties (vertical margins between adjacent boxes collapse)
Containing Block Block formatting contexts
Visual Formatting Model (continued) Inline formatting contexts Boxes are laid out one after the other, horizontally, beginning at the top of the containing block Horizontal margins, borders, and padding are respected between boxes Boxes may be aligned vertically in different ways The rectangular area that contains the boxes that form a line is called a line box
Inline formatting contexts Containing Block Line Box
Visual Formatting Model (continued) Block-level elements Elements that are formatted visually as blocks Each generates a block-level box Block-level boxes Boxes that participate in a block formatting context Usually are also block container boxes Block container boxes Contain either only block-level boxes or establish an inline formatting context and thus contain only inlinelevel boxes Not all block container boxes are block-level boxes
Visual Formatting Model (continued) Inline-level elements Elements that do not form new blocks of content Each generates an inline-level box Inline-level boxes Boxes that participate in an inline formatting context Inline boxes Inline-level boxes that are both inline level and whose contents participate in its containing inline formatting context Atomic inline-level boxes Inline-level boxes that are not inline boxes because they participate in their inline formatting context as a single opaque box
Visual Formatting Model (continued) Anonymous inline boxes Any text directly contained inside a block container box must be treated as an anonymous inline element Anonymous block boxes If a block container box has a block-level box inside it, then it must only have block-level boxes inside it An anonymous block box will wrap any non-block content See http://codepen.io/jmussitsch/pen/c1dc9567498651d5e4860de4f15886a1
Display Property Specifies how an element is displayed with respect to the visual formatting model display Value*: inline block inline-block inherit Initial: inline Inherited: no inline causes an element to generate one or more inline boxes block causes an element to generate a block-level box that is also a block container box inline-block causes an element to generate an inline-level block container box (is an atomic inline-level box) none causes an element to not appear in the formatting structure (creates no box for itself and descendant elements do not generate any boxes either) See http://codepen.io/jmussitsch/pen/176db2297c811c6fe1f0df133942d60d * This is not the complete list of possible values (we will not discuss the various table-* values; we will talk about flex shortly)
Calculating Widths and Margins Values used for layout depend on several factors Lots of rules that we will not cover Specification details here: http://www.w3.org/tr/css2/visudet.html#computing_widths_and_margins Inline-level, non-replaced elements: width property does not apply, auto margin values become 0 Block-level, non-replaced elements in normal flow margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of the containing block
Minimum and Maximum Width Properties Constrain widths to a certain range min-width Value: length percentage inherit Initial: 0 Inherited: no max-width Value: length percentage none inherit Initial: none Inherited: no The none value (max only) means there is no limit Do not apply to non-replaced, inline-level elements
Calculating Heights and Margins Values used for layout depend on several factors As with widths, lots of rules that we will not cover Specification details here: http://www.w3.org/tr/css2/visudet.html#computing_heights_and_margins Inline-level, non-replaced elements: height property does not apply Block-level, non-replaced elements in normal flow An auto value for margin-top or margin-bottom becomes 0 (you cannot vertically center boxes like you can horizontally) If height is auto, the value used depends on its children
Minimum and Maximum Height Properties Constrain heights to a certain range min-height Value: length percentage inherit Initial: 0 Inherited: no max-height Value: length percentage none inherit Initial: none Inherited: no The none value (max only) means there is no limit Do not apply to non-replaced, inline-level elements See http://codepen.io/jmussitsch/pen/0517c494bcb03d2607e2efce18692e16
Flexible Box Layout Current support across browsers is pretty good Useful for creating responsive layouts https://www.w3.org/tr/css3-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_fl exible_boxes See http://codepen.io/jmussitsch/pen/817abaf7d83e31c8115558c292db48aa
Normal flow Positioning Block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes Absolute Boxes are removed from the normal flow entirely and assigned a position with respect to its containing block Floats Boxes are laid out according to normal flow, then taken out of normal flow and shifted to the left or right as far as possible
Position Property Specifies how to position a box (float positioning has separate properties) position Value: static relative absolute fixed inherit Initial: static Inherited: no static: normal box, laid out according to normal flow this is the only positioning we have dealt with so far relative: box s position is calculated according to normal flow but is then offset relative to its normal position using the box offset properties absolute: box is taken out of normal flow and its position, with respect to its containing block, is specified with the box offset properties fixed: same as absolute but positioned with respect to the viewport (for screen media)
Containing Blocks Revisited Relative and static position elements The containing block is formed by the content edge of the nearest block container box Fixed position elements The containing block is established by the viewport (screen media) Absolute position elements The containing block is established by the nearest ancestor with an absolute, relative, or fixed position
Box Offset Properties Specifies offsets for positioned (not static) boxes top, right, bottom, left Value: length percentage auto inherit Initial: auto Inherited: no For absolutely positioned boxes, specifies how far the box s corresponding margin edge is offset from the corresponding edge of the box s containing block For relatively positioned boxes, specifies how far the box is offset with respect to the corresponding edge of the box itself See: http://codepen.io/jmussitsch/pen/a0e08c7c8a509a5108d1a63cb9595507 http://codepen.io/jmussitsch/pen/5d79e92ce68644a6ee9283f3b9d7ca18 http://codepen.io/jmussitsch/pen/d7b7fd3e42671d82552a8a9c9896256a
Float Property Specifies whether a box should float to the left, right, or not at all float Value: left right none inherit Initial: none Inherited: no left: the element generates a block box that touches the left edge of the containing block or the right edge of another floating block right: the element generates a block box that touches the right edge of the containing block or the left edge of another floating block There are all kinds of rules for floats: http://www.w3.org/tr/css2/visuren.html#propdef-float
Clear Property Specifies which sides of an element s box may not be adjacent to an earlier floating box clear Value: none left right both inherit Initial: none Inherited: no left: the left edge of the element may not adjoin a floating element right: the right edge of the element may not adjoin a floating element both: neither edge of the element may adjoin a floating element See http://codepen.io/collection/81101b92f534224b445f1afa25fa1b8c/
Z-Index Property Specifies the relative front-to-back order of an element z-index Value: auto integer inherit Initial: auto Inherited: no Only applies to positioned elements (absolute, relative, fixed) auto = 0 Elements with higher z-index values will be on top of elements with lower values See http://codepen.io/jmussitsch/pen/43693cbd10caa0abc18ce049b1aedec5
Overflow Properties Specifies whether content of a block container element is clipped when it overflows the element s box overflow-x, overflow-y Value: visible hidden scroll auto inherit Initial: visible Inherited: no overflow Value: visible hidden scroll auto inherit
Clip Property Specifies what portion of an element s box is visible (absolutely positioned elements only) <shape> = rect(top, right, bottom, left) clip Value: <shape> auto inherit Initial: auto Inherited: no See http://codepen.io/jmussitsch/pen/8f1487763b2cbc76b3cc0f31d9e0d6c3
Visibility Property Specifies whether boxes generated by an element are rendered (invisible boxes still affect layout, unlike display: none) visibility Value: visible hidden collapse inherit Initial: visible Inherited: yes collapse is used for table rows and columns