Loading...

How to AtoZ CSS Screencast: Box-Model

View: 526    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

Every element on a web page is a box.

We can describe the characteristics of these boxes using the CSS Box Model.

Understanding this model and how different types of boxes lay out, is key when converting designs into a working website.

Example

If I add a 1px solid red border to everything on my website using the * selector, you can see how each element or module is made up of many, nested boxes.

* {
  border: 1px solid red;
}

Box Model Properties

The key characteristics of a box can be defined with the properties: widthheightmarginpadding and border. These are often referred to as the Box Model properties.

.box {
  width: 400px;
  height: 200px;
  margin: 20px;
  padding: 20px;
  border: 10px solid #000;
}

Sometimes background is included in this list but as background doesn’t change the shape or layout of a box, I’ve left it out in this case.

We can model the behavior of these properties by drawing any element on the page as a diagram. This allows us to see how these box-model properties combine to give the element its form – and in turn how much space it takes up on the page.

Calculating Dimensions

By default, the computed width of a box is calculated from the sum of its width, horizontal padding and horizontal border. The computed height is the sum of the height and vertical padding and borders. The margin applies spacing around the outside of the box but doesn’t add to the computed width or height.

So, given a box that has a width of 400px and a height of 200px, padding of 20px on all sides and a border of 5px all round – the width of the box is actually 400 + 5 + 20 + 20 + 5 = 450px and the height is 250px not 200.

This is a trivial calculation with nice round numbers but it can get much more complex when dealing with multiple units and different values on each side.

How wide is this box, for example?

.box {
  width: 960px;
  margin: 20px auto;
  padding: 0 1em 2em 3em;
  border: 5px solid #000;
}

Sorry, I’m lazy – that requires far too much thinking and takes far too long. Fortunately, there’s a simpler way…

Box-sizing

We can make the value of width – the width property – equal the computed width by using a different sizing model for our boxes.

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Using the box-sizing property with the value of border-box gives us a much more intuitive box model. This property is still prefixed in recent versions of Firefox so needs the -moz vendor prefix.

Now, when we create a box with a certain width, the padding and borders are added to the inside, meaning no more fiddly calculations are needed.

Before the box-sizing property was added to CSS, this sizing model was actually used by old versions of IE when it entered “quirks mode”. Now we can use this sizing model intentionally in all modern browsers and IE8 and up.

How to AtoZ CSS Screencast: Box-Model

We can describe the characteristics of these boxes using the CSS Box Model.

Posted on 06-09-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 24    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 40    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 36    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 33    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 24    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 273    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 224    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd