idm 221 - drexel westphaldigm.drexel.edu/crs/idm221/presentations/pdf/idm221-06-box_model.pdfsize...
TRANSCRIPT
IDM 221Web Design I
IDM 221: Web Authoring I1
When a browser displays a web page, it places each HTML block element in a box. That makes it easy to control the spacing, borders, and other formatting for elements like headers, sections, footers, headings and paragraphs. Some inline elements like images are placed in a box as well. To work with boxes, you use the CSS box model.
The Box Model
IDM 221: Web Authoring I2
This figure shows how the box model works. By default the box for a block element is as wide as the block that contains it and as tall as it needs to be based on its content. However, you can explicitly specify the size of the content area for a block element by using the height and width properties. You can also use other properties to set the borders, margins and padding for a block element.Padding is the space between the content area and a border. Margin is the space between the border and the outside of the box.
IDM 221: Web Authoring I3
When you calculate the overall height of a box, you use this formula.
Calculate height
top margin+ top border+ top padding+ height+ bottom padding+ bottom border+ bottom margin
IDM 221: Web Authoring I4
The formula for calculating the overall width is similar. You can use any of the units we've learned.
Calculate width
left margin+ left border+ left padding+ width+ right padding+ right border+ right margin
IDM 221: Web Authoring I5
Let's look at an of how the box model works.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
IDM 221: Web Authoring I6
For the body, the margin on all four sides is set to 10 pixels, and we add a 3px border around all four sides.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
body { border: 3px dotted black; margin: 10px;}
IDM 221: Web Authoring I7
For the main element, the width is set to 500px, and the margins on all four sides of the box are set to 20 pixels. You can see these margins on the left, top, and bottom of the main box, but not on the right because the width of the section is set to 500px (the margin is there even if you can't see it).
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */}
IDM 221: Web Authoring I8
The next rule set sets properties for both the h1 and p elements.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
h1, p { border: 1px dashed black; padding: 10px;}
IDM 221: Web Authoring I9
The next two rule sets set additional properties for each of these elements.
h1 { /* 0 top, 0 right and left, .25em bottom */ margin: 0 0 .25em; padding-left: 15px;}p { margin: 0; /* all four sides */ padding-left: 15px;}
IDM 221: Web Authoring I10
Let's review in the browser.
body { border: 3px dotted black; margin: 10px;}main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */}h1, p { border: 1px dashed black; padding: 10px;}h1 { /* .5em top, 0 right and left, .25em bottom */ margin: .5em 0 .25em; padding-left: 15px;}p { margin: 0; /* all four sides */ padding-left: 15px;}
IDM 221: Web Authoring I11
As you can see there are several different properties that determine the size of an element and the spacing between the elements on a page. Next we will cover each of these properties in detail.
Size and space of elements
IDM 221: Web Authoring I12
Height and Width Properties
Property Description
width the width of the content area
height the height of the content area
min-width the minimum width of the content area
max-width the maximum width of the content area
min-height the minimum height of the content area
max-height the maximum height of the content area
IDM 221: Web Authoring I13
The two properties used most often are width and height. By default, these properties are set to a value of "auto". As a result, the size of the content area for the element is automatically adjusted so it's as wide as the element that contains it and as tall as the content it contains.
Height and Width
• width
• height
• height: auto;
• width: auto;
IDM 221: Web Authoring I14
To change that you can use the height and width properties.
Height and Width Values
div { width: 450px; /* absolute width */ width: 75%; /* relative width */ width: 23em; /* relative width */ width: 23rem; /* relative width */ width: auto; /* default */
height: 125px; /* absolute height */ height: 50%; /* relative height */ height: 23em; /* relative height */ height: 23rem; /* relative height */ height: auto; /* default */}
IDM 221: Web Authoring I15
You can use the min/max properties to specify the minimum and maximum heights/widths of content areas.
Min and Max
div { min-width: 450px; max-width: 600px; min-height: 120px; max-height: 160px;}
IDM 221: Web Authoring I16
<!-- HTML --><div class="wrapper"> <p>Lorem ipsum…</p></div>
/* CSS */.wrapper { background-color: blue; color: white;}
IDM 221: Web Authoring I17
.wrapper { background-color: blue; color: white;
width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */}
IDM 221: Web Authoring I18
Viewport Units
div { height: 100vh; width: 100vw;}
1vw = 1% viewport width1vh = 1% viewport height
IDM 221: Web Authoring I19
You can use individual properties to set individual margins.
Margin
div { margin-top: .5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em;}
IDM 221: Web Authoring I20
Instead of setting individual margins though, you can use the margin property to set the margins for all four sides of a box. When you use a shorthand property like this, you can specify one, two, three or four values. If you specify less than four values, the property still sets the margins for all four sides of the box. If you specify one value, that value is set for all four sides. If you specify two vales, the first value applies to the top and bottom, and the second value applies to the left and right. If you specify three values, the first applies to the top, the second applies to the left and the right, and the third applies to the bottom.Values are specified in a specific order: clockwise starting at the top.
div { margin: 1em; /* all four sides */ margin: 0 1em; /* top and bottom 0, right and left 1em */ margin: .5em 1em 2em; /* top: .5em, right and left 1em, bottom 2em */ margin: .5em 1em 2em 1em; /* clockwise starting at top */}
IDM 221: Web Authoring I21
You can also specify the keyword "auto" for any margin. In most cases your use this to center a page in the browser window.
div { margin: 0 auto;}
IDM 221: Web Authoring I22
Let's bring back our previous.
.wrapper { background-color: blue; color: white;
width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */
/* 0 on the top and bottom, `auto` on the left and right */ margin: 0 auto;}
IDM 221: Web Authoring I23
The properties for setting padding are similar to the properties for setting margins.
Padding
div { padding-top: 0; padding-right: 1em; padding-bottom: .5em; padding-left: 1em;
padding: 1em; padding: 0 1em; padding: 0 1em .5em; padding: 0 1em .5em 1em;}
IDM 221: Web Authoring I24
By default, the browser applies certain margin/padding values to certain elements. This uses the universal selector to set the margins and padding of all elements to 0. After you code the reset selector, you can get the spacing you want by applying margins and padding to specific elements, which overrides the reset selector value of 0.
Reset
* { margin: 0; padding: 0;}
ul { margin: 0 0 1.5em 1.25em;}
IDM 221: Web Authoring I25
Recall our formula for calculating the width (or height) of a box.
Box Sizing
left margin+ left border+ left padding+ width+ right padding+ right border+ right margin----------------total width
IDM 221: Web Authoring I26
Box Sizing Example
left margin (20px)+ left border (5px)+ left padding (10px)+ width (200px)+ right padding (10px)+ right border (5px)+ right margin (20px)----------------total width (270px)
IDM 221: Web Authoring I27
Wouldn't it be nice if we could define the width of a box and have the box actually be the width we've defined even after we've applied margins and paddings and borders?
IDM 221: Web Authoring I28
Apply the box-sizing property to the universal selector with a value of "border-box" and the browser will now do the math for you and maintain your width/height values even when margin/padding/borders are applied. The browser will calculate the totals and dynamically adjust the width value so that your container with a width value of 200px will actually be 200px even if there's 20px of margins, a 2 pixel border and 10 pixels of padding applied.
Box Sizing: Border Box
* { box-sizing: border-box;}
IDM 221: Web Authoring I29
Next we'll begin applying other formatting to boxes. That includes adding borders and setting background colors and images. These are the properties that can be set to apply borders to boxes.
Borders
borderborder-sideborder-widthborder-styleborder-colorborder-side-widthborder-side-styleborder-side-color
IDM 221: Web Authoring I30
Similar to margin/padding properties, the width of a border can be defined as one, two, three or four values, always starting at the top and rotating clockwise.
Border Width
div { border-width: 2px; border-width: 2px 1px; border-width: 2px 1px 2px; border-width: 2px 1px 2px 1px;}
IDM 221: Web Authoring I31
There are various styles available. Here are some s, a full list is available online (check the lecture notes for the URL).http://www.w3schools.com/cssref/pr_border-style.asp
Border Style
div { border-style: solid; border-style: dashed; border-style: inset;}
IDM 221: Web Authoring I32
Border color can be defined using any of the color definition syntaxes, and again can be specced as one, two, three or four values.
Border Color
div { border-color: black; border-color: black red; border-color: #fff #000 rgb(255,255,255) rgba(0,0,0,0.3);}
IDM 221: Web Authoring I33
The border property has a shorthand for specifying all of the properties in a single rule. The order of the values must be width, then style, then color.
Border Shorthand
div { border: [width] [style] [color]; border: 2px solid black;}
IDM 221: Web Authoring I34
CSS3 includes features for adding rounded corders and shadows to borders. This lets you add graphic effects without the need for images. These features are supported by all modern browsers; older browsers that don't support these properties will simply ignore them.
Rounded Corners and Shadows
div { border-radius: [radius]; /* applies to all four sides */ border-radius: [topLeft] [topRight] [lowerRight] [lowerLeft]; box-shadow: [horizontalOffset] [verticalOffset] [blurRadius] [spread] [color];}
IDM 221: Web Authoring I35
div { color: blue; padding: 20px; text-align: center; width: 360px;
border-radius: 10px 20px 0 20px; border: 5px solid blue; box-shadow: 3px 3px 4px 4px red; /* box-shadow: 3px 3px 20px 4px rgba(0,0,0,0.6); */}
IDM 221: Web Authoring I36
block vs inline vs inline-block
Display
• block
• inline
• inline-block
• flex
• list-item
• more
IDM 221: Web Authoring I37
Display Property
div { display: block; /* default */ display: inline; display: flex;}
span { display: inline; /* default */ display: block;}
IDM 221: Web Authoring I38
display: block
• header
• section
• main
• div
• h1, h2, h3, h4
• p, ul, ol, li
IDM 221: Web Authoring I39
Let's build some examples to see the defaults and then change the property values to non defaults.
display: inline
• span
• a
• img
• b, strong
• i, em
IDM 221: Web Authoring I40
When you set a background, it's display behind the content, padding and border for the box, but it isn't displayed behind the margin. When you specify a background, you can set a background color, a background image, or both. If you set both, the browser displays the background color behind the image. As a result, you can only see the background color if the image has areas that are transparent with the image doesn't repeat.
Background
backgroundbackground–colorbackground–imagebackground–repeatbackground-attachmentbackground–positionbackground-size
IDM 221: Web Authoring I41
Background color is a color value with the word that specifies the color of an elements background. You can also specify the "transparent" keyword if you want the elements behind the element to be visible. This is the default.
Background Color
div { background-color: blue; background-color: #808080; background-color: transparent;}
IDM 221: Web Authoring I42
Background image is a relative or absolute URL that points to an image. You can also specify the keyword "none" if you don't want to display an image. This is the default.
Background Image
div { background-image: url('images/texture.png');}
IDM 221: Web Authoring I43
Background repeat is a keyword that specifies if and how images repeated. Possible values are "repeat", "repeat-x", "repeat-y", and "no-repeat".
Background Repeat
div { background-image: url('images/texture.png'); background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;}
IDM 221: Web Authoring I44
Background attachment excepts a keyword that specifies whether an image schools with the document over means any fixed position.
Background Attachment
div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed;}
IDM 221: Web Authoring I45
Background position except one or two relative or absolute values or keywords that specify the initial horizontal and vertical positions of an image. Keywords are left, center, and right; top, center and bottom. If no position is specified, the default is to place the image in the top left corner of the element.
Background Position
div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; background-position: center top; background-position: 90% 90%; /* 90% from the top and left */}
IDM 221: Web Authoring I46
Background property allows you to set the color, image, repeat, attachment, and position values. (Let's build an ).
Background Shorthand
div { background: [color] [image] [repeat] [attachment] [position]; background: blue url('images/texture.png') repeat-x;}
IDM 221: Web Authoring I47
The background-size property specifies the size of the background images. auto is the default value. The background-image contains its width and height.cover: scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
Background Size
div { background-size: auto; /* default */ background-size: 100% 100%; /* width height */ background-size: cover; background-size: contain;}
IDM 221: Web Authoring I48
CSS3 includes a feature for linear gradients. At present, all modern browsers provide at least basic support for this feature. Except for Internet explorer, browsers support this feature with properties that are prefixed by -webkit for Safari and Chrome, and -moz for Firefox and Opera. Luckily, we can use some tools to help write this code for us.
Background Gradients
div { background: linear-gradient(direction, color %, color %, ...);
/* Old browsers */ background: rgb(30,87,153); /* FF3.6-15 */ background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
}
• http://www.colorzilla.com/gradient-editor/
IDM 221: Web Authoring I49
IDM 221: Web Authoring I50
Exercise !
http://digm.drexel.edu/crs/IDM221/exercises/box_model
IDM 221: Web Authoring I51
Example
IDM 221: Web Authoring I52
IDM 221: Web Authoring I53
IDM 221: Web Authoring I54
IDM 221: Web Authoring I55
IDM 221: Web Authoring I56
IDM 221: Web Authoring I57
For Next Week
IDM 221: Web Authoring I58