CODEWITHSUNDEEP
htmlwebcss
user1118019
user1118019

Reputation: 3969

css book on css box model, how block element width can get affected etc

hi i would like to know if there is a wayI know some css and html but i am not a guru i have been doing some web development mobile lately, and just doing the layout is killing me. i am tired of doing and trying something by guessing or hacking, i want to know all the rules, so i won't try something that for sure is not going to work.

can anyone recommend me a web/html/css book for which it will explain like:

  1. by default, the div tag takes the whole width
  2. what happens when a child element in the div tag is wider than its parent if parent width is not set or set
  3. things like if you set width to 100%, and add margin to it, it actually will become longer than expected etc all these details i found out after hours of searching or trying myself i know there is no way a book can describe all the problems but i believe some books will give you at least the fundamental, how each element, say div is suppose to behave.

can anyone suggest a book has those 'gotchas' or rules?

thanks

Upvotes: 0

Views: 268

Answers (4)

JonahsAttempt
JonahsAttempt

Reputation: 89

Since you asked about all rules, you might find this css book useful. It's a complete visual reference to every single CSS property in common use.

Upvotes: 0

maximumcallstack
maximumcallstack

Reputation: 2917

I tried some ebooks and got bored. What helped me a lot was memorizing cheat sheets: http://sixrevisions.com/resources/cheat_sheets_web_developer/ Make sure you write & re-write what you've learnt to drum it in your head.

1) By default a div is auto, with no width defined it's 0.

2) Child element wider makes parent as wide if nothing (auto) is set or a width is set on the parent.

3) adding a margin to an element that is 100% of it's parent is literally as it sounds.

Best thing to do is to understand the box model when it comes to that stuff: http://www.w3schools.com/css/css_boxmodel.asp

Upvotes: 0

user1289347
user1289347

Reputation: 2407

Google is your best friend, there are many free resources, but check out lynda.com, it has tons of videos and articles that will help you learn html, css, javascript, php. actionscript, etc. It's not free but $25 a month isn't bad.

as for your questions:

by default, the div tag takes the whole width

Block elements take on the width of their parents unless otherwise specified.

what happens when a child element in the div tag is wider than its parent if parent width is not set or set

If the parent div has no set width it will be either the width of it's parent, or the width of it's largest child, whichever is larger.

Things like if you set width to 100%, and add margin to it, it actually will become longer than expected etc

Imagine block elements like divs as a box, the width effects the box, then around that is padding, then border, then margin. So a div with width 100px, padding left and right 5px, 1 pixel border, and 10 pixel margin left and right, the actual width is 132px. http://www.w3.org/TR/CSS2/box.html

Upvotes: 0

Lysol
Lysol

Reputation: 1547

you can learn just about anything about web development on the internet. there is a sight called w3schools.com (this is where I learned). It's totally free.

PS: you won't be able to live with just css and html. Your going to have to learn javascript as well as this will allow for dynamic content. You may also need php in the future as well.

Upvotes: 1

Related Questions