1 / 24

CSS Box Model and Positioning Tutorial: A Comprehensive Review

Learn about the CSS Box Model, margins, padding, outlines, and various positioning techniques in this thorough tutorial. Understand how elements are displayed on a webpage and control their positioning using CSS properties.

iria
Download Presentation

CSS Box Model and Positioning Tutorial: A Comprehensive Review

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MORE Cascading Style Sheets(The Positioning Model)

  2. CSS Review

  3. Caveats (1) • Different browsers have little bugs and glitches (be aware) • See the Web site links • There are compatibility problems too • I’ll use Chrome and HTML5 • <!DOCTYPE HTML>

  4. Caveats (2) • Remember that an HTML 5 document is hierarchical • When positioning, we often position an element relative to its parent element

  5. CSS (Box Model) • Remember that CSS views all HTML 5 elements as a rectangular box consisting of • A margin around the box • A border • Padding, which is the boundary from the content to the border of the box • The box’s content

  6. CSS Box Model (Illustration)

  7. CSS Box Model (Description) • margin– Whitespace (transparent) surrounding the border • border- A border inside the margin. The border is affected by the background color of the box • padding– Whitespace inside the border and outside the content • Padding is affected by the background color of the box • content- The content of the box, where text and images appear

  8. Box Size • The box size is controlled by two properties • width • Use relative measures to size around the parent window or browser window • Absolute values work too • height • Contents will overflow the box if the height is set • See BoxIntro.htm

  9. CSS Box Model (Margin) • Margin appears outside of the border • Margins have no color They are always transparent • Use margins to create padding next to adjacent elements

  10. CSS Box Model (Margin – Example) • Set all box margins • margin: 10px; • Set the individual box margins • margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

  11. Outlines • The outline property works like the border property • It appears outside of the border for emphasis • It has a style, color, and width • See BoxIntro.htm

  12. Padding • The space inside the border and surrounding the box content • Set all at once or the individual sides padding-top padding-bottom padding-left padding-right

  13. Positioning Elements (Introduction) • So far, we have applied styles to format text or to format various box margins • Here, we are talking about how to explicitly position the box itself relative to other boxes • This discussion involves the concept of flow • Pay particular attention to the use of the <div> and <span>tags

  14. Flow (Introduction 1) • There are two types of flow (positioning) • Block • Elements start on a new line • By default, they are the same width as their container • <div>, <p> • Inline • An element starts on the same line as the preceding element • <img>, <span>,<em>, etc..

  15. Flow (Introduction 2) • It’s possible to control flow using the CSS position property • static • fixed • relative • Absolute • float

  16. Positioning (Static) • Static Positioning (normal flow) • This is the default positioning method • Items are positioned according to the normal page flow • Left to right – top to bottom • The top, bottom, left, and right properties are not applied when static positioning is applied

  17. Positioning (Fixed 1) • Fixed Positioning • An element is positioned relative to the browser window or parent container • Elements will not move even if the browser contents are scrolled • Fixed elements are no longer part of the normal document flow

  18. Positioning (Fixed 2) • Use properties (top, bottom, left, right) to specify the coordinate • Elements can overlap • Use the z-index property to control overlap • Larger values appear in front – smaller values appear in back • See FixedPositioning.htm

  19. Positioning (Relative 1) • Relative Positioning • Elements are positioned “relative” to the normal position • Normal document flow is still used • Use properties (top, bottom, left, right) to specify the coordinate relative to the normal flow • Negative values move left • Positive values move right

  20. Positioning (Relative 2) • A relative positioned element is positioned relative to its normal position • Use left, right, top, left to alter the position • Note that negative values are possible • left:-20px will move the box 20 pixels to the left • Relative positioning is typically used for containers such as <div>

  21. Positioning (Relative 3) • Elements might overlap • Use the z-index property to specify which overlapping item is in front, and which is in back • The property has an integral value • Larger values appear in front of smaller values • See RelativePositioning.htm

  22. Positioning (Absolute) • Element is positioned relative to • The first parent element that has a position other than static • Remember that static is the default • Or the browser window • Absolute positioned elements are removed from the normal document flow • Absolute positioning is often used with <div>containers • See AbsolutePositioning.htm

  23. Floating Content • We often want text to wrap around an image or other element • This is the purpose of the float property • Elements are always floated horizontally • If an element is floated left, elements float from the left side of the browser window or container • The reverse is true when elements are floated from the right • See Floating.htm

  24. Controlling Display (1) • The display property describes how elements will be displayed • block – elements are displayed as a block with whitespace above and below • inline – elements are displayed inside the current block on the same line • none – elements are not displayed and take up no space

More Related