client-side web technologiesjmussits/08724/lectures/5/css2.pdfthe css box model •describes the...
Post on 03-Oct-2020
1 Views
Preview:
TRANSCRIPT
Client-Side Web TechnologiesCSS 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 1st, left and right set to 2nd
• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd
• 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 1st, left and right set to 2nd
• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd
• 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, border-
right-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 1st, left and right set to 2nd
• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd
• 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, border-
right-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 1st, left and right set to 2nd
• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd
• 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, border-
right-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 1st, left and right set to 2nd
• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd
• 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
• 1st value: horizontal radius
• 2nd value: vertical radius
Source: http://www.w3.org/TR/css3-background/#the-border-radius
border-top-left-radius: 55pt 25pt
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 1st length is the horizontal offset of the shadow (+ is right, - is left)
• The 2nd length is the vertical offset (+ is down, - is up)
• The 3rd length is the blur radius (the > the value the more blur)
• The 4th 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)
Block formatting contexts
Containing Block
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 inline-
level 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
Positioning
• Normal flow
• 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
top related