![The Box Model ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Lecture2 CSS 2
Similar a Lecture2 CSS 2 (20)
Más de Sur College of Applied Sciences
Más de Sur College of Applied Sciences (8)
Último
Último (20)
Lecture2 CSS 2
- 1. Lecture 2: CSS II SFDV2001 Web Development
- 3. Image source: http://www.hicksdesign.co.uk/boxmodel/
- 7. IE 5 (Mac) Safari Firefox
- 31. Recommended sites: Hicks Design Box Model diagram: http://www.hicksdesign.co.uk/3dboxmodel/ Interactive Box Model diagram: http://www.redmelon.net/tstme/box_model/ W3C's Box Model description: http://www.w3.org/TR/REC-CSS2/box.html Tantek Çelik's Box Model hack: http://tantek.com/CSS/Examples/boxmodelhack.html Further reading: Web Design in a Nutshell, 3rd Edition by Jennifer Niederst Robbins
Notas del editor
- Show boxModel.html
- Top = doctype - “standards mode” As pages will appear in IE 6 and up with a doctype Bottom = no doctype - “quirks mode” As pages appear in IE 5 and prior and for files without the right doctype. In version 6, Microsoft addressed this issue by implementing the W3C box model, if "standards mode" was enabled, which is done by defining a supported DOCTYPE on the first line of the HTML output.
- The "box model hack" developed by Tantek Çelik . Developed during his time at Microsoft working on Internet Explorer for the Macintosh, which is not affected by the bug — involves specifying a width for Internet Explorer for Windows which is then over-ridden by another width specification. This second specification is hidden from Internet Explorer for Windows by exploiting a bug in the way that browser parses CSS rules. width: 350px; - Width for IE voice-family:””}””; - IE is tricked into thinking rule has finished voice-family: inherit; - voice-family is reset for any browser that understands the property width: 300px; - the "real" width is set for all other browsers.
- Also attribute selectors but these are so poorly supported at present that I’m not going to talk about them here.
- First em is affected. Second is not.
- Don't forget plain a
- a
- Focus - can be applied to any element but in the few browsers that offer any support for it, generally only form elements can make use of it. Firstchild - as it suggests - e.g. Li:first-child - targets the first li of a list. Before and after allow for generated content to be inserted before or after an element: Blockquote:before{content:"“" font-size: 24px} Blockquote:after{content:"“" font-size: 24px} There is also :lang(ab).