Css2layout
Download as PPTX, PDF0 likes440 views
This document discusses CSS layout properties including display, box model, positioning, floats, and tables. It covers: - Common display property values like block, inline, and inline-block and how they affect layout. - The box model including content-box, padding-box, border-box, and how they treat width and height. - Float positioning and how it removes elements from the normal flow, plus clearfix techniques. - Positioning values like static, relative, absolute, and fixed and how they position elements. - Other properties like overflow, z-index, and negative z-index that control layout stacking. - Using CSS to structure tables and basic table layout
Css2layout
- 1. CSS Layout
- 2. Display property β’ Block β’ Inline β’ Inline-Block Combined style β like inline element, but we can set width, height. β’ Others (list-item, table,inline-table,table-row,table-cell, none)
- 3. Display property β’ block Has width( or take all parent width), height (or stretch by content), always start at new line. β’ Inline Go one by one, width always stretch by content, height = line- height property
- 4. Display property β’ Inline-block Has width(or stretch by content), height (or height = line-height property), go one by one.
- 5. BOX Model
- 6. Box-sizing β’ content-box (Default value) width, height β for content only. β’ Padding-box Width, height including padding β’ Border-box Width, height including padding and border
- 7. Margin margin: 20px; margin: 5px 10px 15px 20px; margin: 5px 10px 15px; margin: 10px auto; Collapsing vertical margin
- 8. Relative Margins / Paddings .parent { border: 1px solid red; width: 300px; } .child { margin:20%; border: 1px solid green; } All margins will be 60px = 20% from parentβs width
- 9. Float http://jsfiddle.net/ywRW6/5/ <div class="block"> Hello CODE! <div class="float"> float element </div> Can you see this? It's floated! </div> .float { float: left; background: #CCC; width: 200px; height: 200px; margin-right: 25px; padding: 10px; } img {float: right;}
- 10. Float .clearfix {clear: both;} .clearfix { overflow: auto; }
- 11. Position β’ static (default) β’ relative .box2 { position: relative; top: -5px; left: 10px; } β’ fixed .fixed { position: fixed; bottom: 0; right: 0; width: 200px; }
- 12. Position β’ Absolute .relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }
- 13. Overflow β’ visible β’ hidden β’ scroll β’ auto β’ text-overflow: ellipsis;
- 14. Z-index <div class="block one"> Parent 5 <div class="block two"> Child 500 </div> </div> <div class="block three"> Absolute 10 </div> Stacking Context: 1)position != static ; z-index != auto 2)opacity <1 3)transform or perspective (CSS3)
- 15. Negative Z-index .parent { position: relative; } .child { position: absolute; z-index: -1; }
- 16. Table table { display: table } caption { display: table-caption } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } tr { display: table-row } td, th { display: table-cell } <style> .header {height:60px; background-color:#717dc9; padding:20px; text-align:center} .left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top} .center_col {background-color:#ffffff; padding:15px; vertical-align:top} .right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top} .footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style> <table cellpadding="0" cellspacing="0" width="100%" align="center"> <tr><td colspan="3" class="header">My site</td></tr> <tr><td class="left_col">Left Menu</td><td class="center_col">Content streched to screen width</td> <td class="right_col">Right block</td></tr> <tr><td colspan="3" class="footer">© All rights reserved</td></tr> </table>
- 17. Table
- 18. HomeTask