css - files.meetup.com · the css box model describes the rectangular boxes that are created for...
TRANSCRIPT
CSSBOX MODEL
What is thebox model?
The CSS box model describesthe rectangular boxes that are
created for every element in thedocument tree.
The box modelcomponents
Source: Kindly provided by Hicks Design under Creative Commons License: http://www.hicksdesign.co.uk/boxmodel/
MarginCan be applied to the outside ofelements. Margins create spacebetween the edge of an element
and any adjacent elements.
p {margin: 5px; }
Background-colorSets the background color of an
element.
p {background-color: #eee; }
Background-imageApplies a background image to
an element. Appears will on top ofany background-color.
p {background-image:url(a.gif); }
BorderSpecifies the width, color andstyle of a border that is then
added to the outside of an HTMLelement.
p {border: 5px solid red; }
PaddingCan be applied to the outside ofthe content area of an element.
Creates space between the edgeof the element and its content.
p {padding: 5px; }
Content areaCan be given width, height and
overflow - depending on the typeof box model.
p {width: 500px; }
OverflowDetermines what happens when
an element’s content is largerthan the content box.
p {overflow: hidden; }
Box modelsize options
There are three different ways thatwidth and height can be applied
to boxes.
SizedA box is sized when it is given an
explicit width or height(eg. pixels or ems)
Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis.
Sized(eg. width: 200px)
Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis. Sized
(eg. height: 200px)
StretchedA box is stretched when it
stretches to the full width orheight of the parent container or
the viewport.
Lorem ipsum dolor sit amet consect etuer adipi scing elit seddiam nonummy nibh euismod tinunt ut laoreet dolore magnaaliquam erat volut. Ut wisi enim ad minim veniam, quisnostrud exerci tatio.
Stretched(eg. width: 100%)
Collapsed“Collapsed” means the width or
height shrinks around the content.A box can collapse when width orheight are set to auto, or in some
cases left undefined.
Lorem ipsum dolor sitc amunt
Collapsed(eg. width: auto)
Lorem ipsum dolor sitc amunt Collapsed(eg. height: auto)
Multiple boxmodels
Many people assume that there isonly one box model, and it isused for all HTML elements.
This is not the case! There areactually seven different boxmodels - each with different
characteristics.
The seven different box models:
block box modelinline box modelinline-block box modeltable box modeltable cell box modelabsolute box modelfloat box model
1234567
1. Blockbox model
Block box appearance:Block boxes form visually a
blocks, they flow down the pagein normal flow.
Lorem ipsum dolor sit amet consect etuer adipi scingelit sed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut.
This is a heading
Dolor sit amet consect etuer adipi scing elit sed diamnonu nibh euismod tinunt ut laoreet dolore magnaaliquam erat magna aliquam.
Block boxes
Block box width:By default, block boxes stretch tothe width of their containing blockor the width of the viewport. Their
width can be sized but cannotcollapse.
Lorem ipsum dolor sit amet consect etuer adipi scing elitsed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut. Ut wisi enim ad minimveniam, quis nostrud exerci tatio.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis.
Stretched
Sized
Block box height:By default, block box heightscollapse. Their height can be
sized but not stretched.
Collapsed
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.
Duis autem vel eum iriure dolorin hendrerit in.
Sized
Block box margin:Affects all sides of the box.
Margin-collapse occurs when incontact with block level elements
above or below.
p {margin: 0 0 1.5em;
}
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis vel.
Vulputate velit esse molestieconsequat, vel illum dolore eufeugiat nulla.
Margin collapse
Block box padding:Can be applied to all sides.
Padding is added to the overallwidth/height of the box.
p {padding: 5px;
}
Total width = 220px
content = 200px 10px 10px
padding
Block box border: Can be applied to all sides.Border width is added to the
overall width/height of the box.
p {border: 5px solid red;
}
Total width = 210px
content = 200px 5px5px
border
Block box overflow:Overflow can be applied to block
boxes.The default is overflowvalue is “visible”.
div {overflow: hidden;
}
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.
Horizontal overflow
Vertical overflow
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.
overflow: visible
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.
overflow: hidden;
overflow: scroll(adds scrollbars to
top and side)
overflow: auto(adds scrollbars to
affected axis)
Block box model:Block boxes use an additive
model. Padding and border areadded to overall width/height.
Total width = 230px
content = 200px 5px10px 5px 10px
padding
border
Note:Older versions ofInternet Explorer
and boxes
Win/IE5 uses a different methodto set widths and heights for
boxes. If padding and border areapplied to an element, their
measurements are subtractedfrom the overall width.
Total width = 200px
content set to 200px but will be 170px in IE5 5px10px 5px 10px
padding
border
2. Inlinebox model
Inline box appearance:Inline boxes form visually as
lines. Width, height and overflowdo not apply to inline boxes.
Lorem ipsum dolor sit amet consect etuer adipi scingelit sed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut.
This is a heading
Dolor sit amet consect etuer adipi scing elit sed diamnonu nibh euismod tinunt ut laoreet dolore magnaaliquam erat magna aliquam.
Inline boxes
Inline box width:By default, inline box width
collapses. The width cannot besized or stretched.
dolor sit amet consect etuer adipi scinAnsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex
Collapsed width
Inline box height: By default, inline box height
collapses. The height cannot besized or stretched.
dolor sit amet consect etuer adipi scinAnsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex
Collapsed height
Inline box margin:Can be applied to all sides butonly affects content on left and
right sides.
dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex
Margin affects sides only
Inline box padding: Can be applied to all sides butonly affects content on left and
right sides.
Padding affects sides only
dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex
Inline box border: Can be applied to all sides butonly affects content on left and
right sides.
dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex
Border affects sides only
Inline box overflow:Overflow does not apply to inline
elements.
Inline box model:Margin, padding and border affect
content on either side of inlineboxes only.
dolor sit amet consect etuer adipi scinS nibh euismod tinunt laamagna aliquam erat volut nostrud ex
Border and padding affect sides only
3. Inline blockbox model
Inline block box appearance:Inline block boxes appear within
lines of text like inline boxes.However, they have width, height,margin, border and padding like a
block box.
Lorem ipsum dolor sit amet consectetuer adipi scing elit sed diam nibh.
Inline block box
Inline block box width:By default, inline block box widthcollapses. The width can be sized
or stretched.
Lorem ipsum dolor sit amet consectetuer adipi scing elit sed diam nibh.
Lorem ipsum dolorsit amet consect etuer adipi scing elit
Loremipsum dolorsit amet consect etuer adipi scing elit
Collapsed width
Sized width
Stretched width
Inline block box height: By default, inline block box
height collapses. The height canbe sized but not stretched.
Lorem ipsum dolor sit amet consectetuer adipi scing elit sed diam nibh.
Collapsed height
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam nibh.Sized height
Inline block box margin:Affects all sides of the box.
p {display: inline-block;margin: 0 0 1.5em;
}
Lorem ipsum dolor sit amet laite a
consect etuer adipi scing elit sediumdiam nibh. Margin affects all sides
Inline block box padding:Can be applied to all sides.
p {display: inline-block;padding: 5px;
}
Lorem ipsum dolor sit amet laite a
consect etuer adipi scing elit sediumdiam nibh. Padding affects all sides
Inline block box border: Can be applied to all sides.
p {display: inline-block;border: 5px solid red;
}
Lorem ipsum dolor sit amet laite a
consect etuer adipi scing elit sediumdiam nibh.
Border affects all sides
Inline block box overflow:Overflow can be applied to inline
block boxes.
div {display: inline-block;overflow: hidden;
}
Lorem ipsum dolor sit amet consect moreetuer adipi scing elit sed diam nibh.
Overflow
Inline block box model:Inline block boxes use an additive
model. Padding and border areadded to overall width/height.
4. Tablebox model
Table box appearance:Be default, tables are unlike other
box models. Width and heightrefer to outside of the borders.
Table box width:By default, table box width
collapses. The width can be sizedand stretched.
n1 n2
n3 n4
n1 n2
n3 n4
n1 n2
n3 n4
Collapsed width
Sized width
Stretched width
Table box height: By default, table box heightcollapses. The height can be
sized (as long as the size is largerthan table cell content) but not
stretched.
n1 n2
n3 n4
n1 n2
Collapsed height
Sized height
n1 n2
Table box margin: Affects all sides of the box.
Margin-collapse occurs when incontact with block level elements
above and below.
n1 n2
n3 n4
n1 n2
n3 n4
Margin collapse
Table box padding:Can be applied to all sides.
Padding is subtracted from to theoverall width/height of the box.Padding is not applied whenborder-collapse property is
applied to table.
n1 n2
n3 n4
Table padding
n1 n2
n3 n4Table padding with border-collapse
Table box border: Can be applied to all sides.
Border width is subtracted fromthe overall width/height of the
box.
n1 n2
n3 n4
Table border
n1 n2
n3 n4Table border with border-collapse
Table box overflow:Overflow cannot be applied to
table boxes - but can be appliedto the <tbody> element.
Table box model:Padding & border are subtracted
from overall width/height.
Total width = 200px
content = 200px 5px10px 5px 10px
padding
border
5. Table cellbox model
Table cell box appearance:Table cells form visually side by
side within table rows.
n1
n3 n4
Table celln2
Table cell box width:By default, table cell width iscollapses. This width can besized and allowed to stretch.
Content such as long words, andreplaced elements can override
width.
n1 n2
n1 n2
n1 n2
Collapsed width
Sized width
Stretched width
n1 verylongwordhere
Content can override width
Table cell box height:By default, table cell box heightcollapses. This height can be
sized but not stretched.
n1 n2 Collapsed height
n1 n2 Sized height
Table cell box margin:Does not apply.
Table cell padding:Can be applied to all sides.
Padding is added to the overallwidth/height of the box.
n1 n2 Table cell padding
Table cell box border: Can be applied to all sides.Border width is added to the
overall width/height of the box.Borders between cells will include
space unless cellspacing orborder-collapse are applied.
n1
n3 n4
Table cell bordersn2
n1
n3 n4
Table cell borders with no cellspacing n2
Table cell box overflow:Overflow does not apply.
Table cell box model:Table cell boxes use an additivemodel. Padding and border areadded to overall width/height.
Total width = 230px
content = 200px 5px10px 5px 10px
padding
border
6. Absolutebox model
Absolute box appearance:Absolute boxes are removed fromflow. Other elements in flow will
ignore the absolute box.
Left, right, top, bottom:Absolutely positioned boxes are
positioned in relation to thenearest parent with position or theviewport (if no positioned parent
is present).
Absolute box width 1:By default, absolute boxes are setto “width: auto” which will collapse
the boxes width.
Width: autoModel: collapsed
Lorem ipsum dolor sit
Absolute box width 2: By default, absolute boxes are
set to “left: auto” and “right: auto”which will also collapse the boxes
width.
Left: autoRight: auto
Model: collapse
Lorem ipsum dolor sit
Absolute box width 3:If both left and right are set to “0”
the box is stretched.
Left: 0Right: 0
Width: autoModel: stretched
Lorem ipsum dolor sit
Absolute box width 4:If left is a value, width is a valueand right is auto, the box is sized
and offset from the left.
Left: 10pxRight: auto
Width: 200pxModel: sized
Lorem ipsum dolor sit
Absolute box width 5:If right is a value, width is a valueand left is auto, the box is sized
and offset from the right.
Right: 10pxRight: auto
Width: 200pxModel: sized
Lorem ipsum dolor sit
Absolute box height:Absolute box height works like
width.
Absolute box margin:Margins can be applied to all
sides. Margins push the box awayfrom its position.
Lorem ipsum dolor sit Absolute box with no margin
Lorem ipsum dolor sit
Absolute box with margin
Absolute box padding 1:Padding will expand a collapsed
or sized box.
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Absolute box with no padding
Absolute box with padding
Absolute box padding 2:Padding will reduce the width orheight of the content area of a
stretched box.
Absolute box without padding
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Absolute box with padding
Absolute box border 1: Border will expand a collapsed or
sized box.
Lorem ipsum dolor sit Absolute box with border
Lorem ipsum dolor sit
Absolute box with no border
Absolute box border 2:Border will reduce the width orheight of the content area of a
stretched box.
Absolute box without border
Lorem ipsum dolor sit
Absolute box with border
Lorem ipsum dolor sit
Absolute box overflow:Overflow can be applied to
absolute boxes.
div {overflow: hidden;
}
Lorem ipsum dolor sitamet consect etueradipi scing elit seddiam nonummy nibheuismod tinunt ut.
Overflow: visible
7. Floatbox model
Floated box appearance:A floated box is positioned withinthe normal flow, then taken out ofthe flow and shifted to the left orright as far as possible. Content
may flow along the side of a float.
Float box width:The default is “width:auto” whichwill collapse the float box to the
width of the widest line. Float boxwidth can be sized or stretched.
Lorem ipsum dolor sit amet consect etuer adipi scing elitsed diam nonummy nibh euismod tinunt ut laoreet.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit ess.
Stretched
Sized
Lorem ipsum dolor sit amet
Collapsed
Float box height: The default is “height:auto” which
will collapse the float box to theheight of all of its child elements.Float box height can be sized but
not stretched.
Collapsed
Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.
Duis autem vel eum iriure dolorin hendrerit in.
Sized
Float box margin: Can be applied to all sides.
Left/top margins push float boxaway from original position.Right/bottom margins affect
wrapping content.
Float box padding:Can be applied to all sides.
Padding is added to the overallwidth/height of the box.
Float box border: Can be applied to all sides.Border width is added to the
overall width/height of the box.
Float box overflow: Overflow can be applied to float
boxes.
Float box model:Float boxes use an additive
model. Padding and border areadded to overall width/height.
Total width = 230px
content = 200px 5px10px 5px 10px
padding
border
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley