- 1. CSS 2013/10/23 3 HTML5 Toru Yoshikawa (@yoshikawa_t)
2. Who? / Toru Yoshikawa @yoshikawa_thtml5jHTML5 () Google
Developer Experts (Chrome) HTML5 Experts.jp No.3 Web ()jQuery
Mobile ()Sublime Text 2 Japan Users Group ()allWeb jQuery Mobile
Blog: http://d.hatena.ne.jp/pikotea/ 3. Agenda 1. 1. 2.3.4. 2.CSS
1. 2.position3. 3.oatTips 4. 5. 6. width 7. ) div div { width:
300px; height: 300px; padding: 5px; border: solid 1px black;
margin: 10px; } 8. p, div, table, ul, h1~h6 a, label, small, span
button, img, input, select CSSdisplay 9. inlineinline-blockinlineli
{ display: inline; }li { display: inline-block; } 10.
display:inlineblockinline-blockwidth/height:margin-left/
margin-right:margin-top/ margin-bottom:padding:()border:() 11.
margin-topmarginbottom 12. ) div1div2 px? #div1 { margin-bottom:
15px; } #div2 { margin-top: 20px; } 13. 2 borderpadding margin 14.
2 div1margin-top: 20pxmargin-top: 20px margin-top: 20px#div1 {
margin-top: 20px; } #div2 { margin-top: 20px; }div2#div1 {
margin-top: 20px; border: 1px solid blue; } #div2 { margin-top:
20px; } 15. box-sizing widthborderpadding width = border + padding
+ content .box { -webkit-box-sizing: border-box; -moz-box-sizing:
border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
16. box-sizing ) div div { box-sizing: border-box; width: 300px;
height: 300px; padding: 5px; border: solid 1px black; margin: 10px;
}300px 4(25%x4) 17. "text-align: center" auto .box { width: 20%;
margin: 0 auto; } 18. CSS 19. table rowspan, colspan... 20.
CSSfloat position Tips 21. float 22. float float: left float: right
1 23. .box { flaot: left; } 24. float .box { flaot: left; width:
25%; }.box { flaot: left; width: 50%; }boxboxboxboxboxboxboxbox 25.
.box { flaot: width: } #box4 { clear: width: }left; 25%;both;
25%;box boxboxboxbox 26. float 27. float .header { width: 100%; }
.content { /* float */ float: left; width: 75%; } .sidebar { /*
float */ float: left; width: 25%; } .footer { /* */ width: 100%;
clear: both; } 28. float float floatfloat 29. overflow: hidden
overflowhidden clearfix clear: both 30. OK! overflow: hidden
clearfixfloatfloatclear: both 31. clearfix /* * Clearfix: contain
floats * * For modern browsers * 1. The space content is one way to
avoid an Opera bug when the * `contenteditable` attribute is
included anywhere else in the document. * Otherwise it causes space
to appear at the top and bottom of elements * that receive the
`clearfix` class. * 2. The use of `table` rather than `block` is
only necessary if using * `:before` to contain the top-margins of
child elements. */ .clearfix:before, .clearfix:after { content: "
"; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both;
} /* * For IE 6/7 only * Include this rule to trigger hasLayout and
contain floats. */ .clearfix { *zoom: 1; }by HTML5 Boilerplate 32.
position 33. position position: relative position: absolute
position: fixed 34. position: relative position: absolute absolute
relative 35. position: absolute positionabsolute topleftbottomright
float 36. position: absolute 1.position: relative 2.position:
absolute 3.top, left, bottom, right 4.absolutez-index z-index: 999
37. position: absolute image box
box
.box { position: relative; } .image { position: absolute; top:
2px; right: 2px; } 38. position: fixed Android 2.2iOS5 JavaScript
position: absolute 39. position: fixed padding .toolbar { position:
fixed; bottom: 0; } .content { padding-bottom: 150px; } 40. Tips
41. table-cell display tabletabletable-rowtrtable-celltd table
table-cell vertical-align: middle 42. display: table-cell
.tbl { display: table; width: 100%; } .a, .b, .c { display:
table-cell; width: 33%; } .a { height: 150px; vertical-align:
middle; } 43. margin topleft rightbottom margin-top:-15pxbox
margin-left:-15pxmargin-right:-10pxbox boxbox2box3
margin-bottom:-10px 44. position: absolute topleft% .box {
position: absolute; top: 50%; left: 50%; width: 100px; height:
100px; margin-top: -50px; margin-left: -50px; } 45. 46. CSS float
position: absolute table-cell CSSCSS 47. Thank you!! ( @yoshikawa_t
)
