What is the box model?

Transcription

1 CSS BOX MODEL

2 What is the box model?

3 The CSS box model describes the rectangular boxes that are created for every element in the document tree.

4 The box model components

5 Source: Kindly provided by Hicks Design under Creative Commons License:

6 Margin Can be applied to the outside of elements. Margins create space between the edge of an element and any adjacent elements. p { margin: 5px; }

7 Background-color Sets the background color of an element. p { background-color: #eee; }

8 Background-image Applies a background image to an element. Appears will on top of any background-color. p { background-image: url(a.gif); }

9 Border Specifies the width, color and style of a border that is then added to the outside of an HTML element. p { border: 5px solid red; }

10 Padding Can be applied to the outside of the content area of an element. Creates space between the edge of the element and its content. p { padding: 5px; }

11 Content area Can be given width, height and overflow - depending on the type of box model. p { width: 500px; }

12 Overflow Determines what happens when an element s content is larger than the content box. p { overflow: hidden; }

13 Box model size options

14 There are three different ways that width and height can be applied to boxes.

15 Sized A box is sized when it is given an explicit width or height (eg. pixels or ems)

16 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sized (eg. width: 200px)

17 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sized (eg. height: 200px)

18 Stretched A box is stretched when it stretches to the full width or height of the parent container or the viewport.

19 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Stretched (eg. width: 100%)

20 Collapsed Collapsed means the width or height shrinks around the content. A box can collapse when width or height are set to auto, or in some cases left undefined.

21 Lorem ipsum dolor sitc amunt Collapsed (eg. width: auto)

22 Lorem ipsum dolor sitc amunt Collapsed (eg. height: auto)

23 Multiple box models

24 Many people assume that there is only one box model, and it is used for all HTML elements.

25 This is not the case! There are actually seven different box models - each with different characteristics.

26 The seven different box models: block box model inline box model inline-block box model table box model table cell box model absolute box model float box model

27 1. Block box model

28 Block box appearance: Block boxes form visually a blocks, they flow down the page in normal flow.

29 Block boxes This is a heading Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Dolor sit amet consect etuer adipi scing elit sed diam nonu nibh euismod tinunt ut laoreet dolore magna aliquam erat magna aliquam.

30 Block box width: By default, block boxes stretch to the width of their containing block or the width of the viewport. Their width can be sized but cannot collapse.

31 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Sized Stretched Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

32 Block box height: By default, block box heights collapse. Their height can be sized but not stretched.

33 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. Collapsed Duis autem vel eum iriure dolor in hendrerit in. Sized

34 Block box margin: Affects all sides of the box. Margin-collapse occurs when in contact with block level elements above or below. p { } margin: em;

35 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel. Margin collapse Vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.

36 Block box padding: Can be applied to all sides. Padding is added to the overall width/height of the box. p { } padding: 5px;

37 padding 10px content = 200px 10px Total width = 220px

38 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;

39 border 5px content = 200px 5px Total width = 210px

40 Block box overflow: Overflow can be applied to block boxes.the default is overflow value is visible. div { overflow: hidden; }

41 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. Vertical overflow Horizontal overflow

42 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. overflow: visible

43 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. overflow: hidden;

44 overflow: scroll (adds scrollbars to top and side)

45 overflow: auto (adds scrollbars to affected axis)

46 Block box model: Block boxes use an additive model. Padding and border are added to overall width/height.

47 border padding 5px 10px content = 200px 10px 5px Total width = 230px

48 Note: Older versions of Internet Explorer and boxes

49 Win/IE5 uses a different method to set widths and heights for boxes. If padding and border are applied to an element, their measurements are subtracted from the overall width.

50 border padding 5px 10px content set to 200px but will be 170px in IE5 10px 5px Total width = 200px

51 2. Inline box model

52 Inline box appearance: Inline boxes form visually as lines. Width, height and overflow do not apply to inline boxes.

53 Inline boxes This is a heading Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Dolor sit amet consect etuer adipi scing elit sed diam nonu nibh euismod tinunt ut laoreet dolore magna aliquam erat magna aliquam.

54 Inline box width: By default, inline box width collapses. The width cannot be sized or stretched.

55 dolor sit amet consect etuer adipi scin Ansed nibh euismod tinunt laore magna aliquam erat volut nostrud ex Collapsed width

56 Inline box height: By default, inline box height collapses. The height cannot be sized or stretched.

57 dolor sit amet consect etuer adipi scin Ansed nibh euismod tinunt laore magna aliquam erat volut nostrud ex Collapsed height

58 Inline box margin: Can be applied to all sides but only affects content on left and right sides.

59 dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex Margin affects sides only

60 Inline box padding: Can be applied to all sides but only affects content on left and right sides.

61 dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex Padding affects sides only

62 Inline box border: Can be applied to all sides but only affects content on left and right sides.

63 dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex Border affects sides only

64 Inline box overflow: Overflow does not apply to inline elements.

65 Inline box model: Margin, padding and border affect content on either side of inline boxes only.

66 dolor sit amet consect etuer adipi scin S nibh euismod tinunt laa magna aliquam erat volut nostrud ex Border and padding affect sides only

67 3. Inline block box model

68 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.

69 Inline block box Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh.

70 Inline block box width: By default, inline block box width collapses. The width can be sized or stretched.

71 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh. Lorem ipsum dolor sit amet consect etuer adipi scing elit Lorem ipsum dolor Collapsed width Sized width sit amet consect etuer adipi scing elit Stretched width

72 Inline block box height: By default, inline block box height collapses. The height can be sized but not stretched.

73 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh. Collapsed height Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh. Sized height

74 Inline block box margin: Affects all sides of the box. p { } display: inline-block; margin: em;

75 Lorem ipsum dolor sit amet laite a consect etuer adipi scing elit sedium diam nibh. Margin affects all sides

76 Inline block box padding: Can be applied to all sides. p { } display: inline-block; padding: 5px;

77 Lorem ipsum dolor sit amet laite a consect etuer adipi scing elit sedium diam nibh. Padding affects all sides

78 Inline block box border: Can be applied to all sides. p { } display: inline-block; border: 5px solid red;

79 Lorem ipsum dolor sit amet laite a consect etuer adipi scing elit sedium diam nibh. Border affects all sides

80 Inline block box overflow: Overflow can be applied to inline block boxes. div { display: inline-block; overflow: hidden; }

81 Lorem ipsum dolor sit amet consect more etuer adipi scing elit sed diam nibh. Overflow

82 Inline block box model: Inline block boxes use an additive model. Padding and border are added to overall width/height.

83 4. Table box model

84 Table box appearance: Be default, tables are unlike other box models. Width and height refer to outside of the borders.

85 Table box width: By default, table box width collapses. The width can be sized and stretched.

86 n1 n2 n3 n4 n1 n3 n2 n4 Collapsed width Sized width n1 n3 n2 n4 Stretched width

87 Table box height: By default, table box height collapses. The height can be sized (as long as the size is larger than table cell content) but not stretched.

88 n1 n2 n3 n4 Collapsed height n1 n2 Sized height n1 n2

89 Table box margin: Affects all sides of the box. Margin-collapse occurs when in contact with block level elements above and below.

90 n1 n2 n3 n4 Margin collapse n1 n2 n3 n4

91 Table box padding: Can be applied to all sides. Padding is subtracted from to the overall width/height of the box. Padding is not applied when border-collapse property is applied to table.

92 n1 n2 n3 n4 Table padding n1 n2 n3 n4 Table padding with border-collapse

93 Table box border: Can be applied to all sides. Border width is subtracted from the overall width/height of the box.

94 n1 n2 n3 n4 Table border n1 n2 n3 n4 Table border with border-collapse

95 Table box overflow: Overflow cannot be applied to table boxes - but can be applied to the <tbody> element.

96 Table box model: Padding & border are subtracted from overall width/height.

97 border padding 5px 10px content = 200px 10px 5px Total width = 200px

98 5. Table cell box model

99 Table cell box appearance: Table cells form visually side by side within table rows.

100 n1 n2 Table cell n3 n4

101 Table cell box width: By default, table cell width is collapses. This width can be sized and allowed to stretch. Content such as long words, and replaced elements can override width.

102 n1 n2 Collapsed width n1 n2 Sized width n1 n1 n2 verylongwordhere Stretched width Content can override width

103 Table cell box height: By default, table cell box height collapses. This height can be sized but not stretched.

104 n1 n2 Collapsed height n1 n2 Sized height

105 Table cell box margin: Does not apply.

106 Table cell padding: Can be applied to all sides. Padding is added to the overall width/height of the box.

107 n1 n2 Table cell padding

108 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 or border-collapse are applied.

109 n1 n3 n2 n4 Table cell borders n1 n3 n2 n4 Table cell borders with no cellspacing

110 Table cell box overflow: Overflow does not apply.

111 Table cell box model: Table cell boxes use an additive model. Padding and border are added to overall width/height.

112 border padding 5px 10px content = 200px 10px 5px Total width = 230px

113 6. Absolute box model

114 Absolute box appearance: Absolute boxes are removed from flow. Other elements in flow will ignore the absolute box.

115 Left, right, top, bottom: Absolutely positioned boxes are positioned in relation to the nearest parent with position or the viewport (if no positioned parent is present).

116 Absolute box width 1: By default, absolute boxes are set to width: auto which will collapse the boxes width.

117 Lorem ipsum dolor sit Width: auto Model: collapsed

118 Absolute box width 2: By default, absolute boxes are set to left: auto and right: auto which will also collapse the boxes width.

119 Lorem ipsum dolor sit Left: auto Right: auto Model: collapse

120 Absolute box width 3: If both left and right are set to 0 the box is stretched.

121 Lorem ipsum dolor sit Left: 0 Right: 0 Width: auto Model: stretched

122 Absolute box width 4: If left is a value, width is a value and right is auto, the box is sized and offset from the left.

123 Lorem ipsum dolor sit Left: 10px Right: auto Width: 200px Model: sized

124 Absolute box width 5: If right is a value, width is a value and left is auto, the box is sized and offset from the right.

125 Lorem ipsum dolor sit Right: 10px Right: auto Width: 200px Model: sized

126 Absolute box height: Absolute box height works like width.

127 Absolute box margin: Margins can be applied to all sides. Margins push the box away from its position.

128 Lorem ipsum dolor sit Absolute box with no margin Lorem ipsum dolor sit Absolute box with margin

129 Absolute box padding 1: Padding will expand a collapsed or sized box.

130 Lorem ipsum dolor sit Absolute box with no padding Lorem ipsum dolor sit Absolute box with padding

131 Absolute box padding 2: Padding will reduce the width or height of the content area of a stretched box.

132 Lorem ipsum dolor sit Absolute box without padding Lorem ipsum dolor sit Absolute box with padding

133 Absolute box border 1: Border will expand a collapsed or sized box.

134 Lorem ipsum dolor sit Absolute box with border Lorem ipsum dolor sit Absolute box with no border

135 Absolute box border 2: Border will reduce the width or height of the content area of a stretched box.

136 Lorem ipsum dolor sit Absolute box without border Lorem ipsum dolor sit Absolute box with border

137 Absolute box overflow: Overflow can be applied to absolute boxes. div { overflow: hidden; }

138 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut. Overflow: visible

139 7. Float box model

140 Floated box appearance: A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

141 Float box width: The default is width:auto which will collapse the float box to the width of the widest line. Float box width can be sized or stretched.

142 Collapsed Lorem ipsum dolor sit amet Stretched Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet. Sized Duis autem vel eum iriure dolor in hendrerit in vulputate velit ess.

143 Float box height: The default is height:auto which will collapse the float box to the height of all of its child elements. Float box height can be sized but not stretched.

144 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. Collapsed Duis autem vel eum iriure dolor in hendrerit in. Sized

145 Float box margin: Can be applied to all sides. Left/top margins push float box away from original position. Right/bottom margins affect wrapping content.

146 Float box padding: Can be applied to all sides. Padding is added to the overall width/height of the box.

147 Float box border: Can be applied to all sides. Border width is added to the overall width/height of the box.

148 Float box overflow: Overflow can be applied to float boxes.

149 Float box model: Float boxes use an additive model. Padding and border are added to overall width/height.

150 border padding 5px 10px content = 200px 10px 5px Total width = 230px

151 Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley