Home > Developer > Web Develop
Understanding CSS Box Models
What is the CSS box mode? Why do you call it a box? Let's start with the property names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), CSS box patterns.
Reproduced
We can understand the box model in this way: content is the contents of the box, filling is the box filled with foam, the border is the box itself, as for the border is not all piled together when the box is placed, to leave a certain gap to maintain ventilation, but also for the convenience of removal, So the width of the whole box model in the page is composed of left Border + left box + Left padding + content + right padding + right border + right boundary , and width in CSS style is just the width of the content part, which is easy for many friends to confuse.
In web design, content often refers to text, pictures and other elements, but also can be small box (div nested), and real life in the box is different, the real life of things can not be larger than the box, or the box will be broken, and the CSS box is elastic, the inside of the box itself is larger than the maximum size, But it's not going to get damaged. Filling only the width of the property, can be understood as the life of the box of seismic accessories thickness, and the border has the size and color of the points, we can understand the life of the box thickness and what the box is made of color material, the border is the box and other things to keep how much distance. In real life, suppose that we are in a square, the different sizes and colors of the box, in a certain amount of clearance and order. This understanding can better understand the box model that.
Here's a classic div+css layout real case
General web site can be divided into the upper and lower structure, namely: Head, navigation bar, the middle body, the bottom
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
Body {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
MARGIN:OPX Auto;
Height:auto;
width:760px;
border:1px solid #006633;}
#header {margin:5px auto; width:500px; height:80px; background: #9F9;}
#content {margin:5px auto; width:500px; height:400px; background: #9FF;}
#footer {margin:5px auto; width:500px; height:80px; background: #9f9;}
</style>
<title> Untitled Document </title>
<body>
<body>
<div id= "header" > Header </div>
<div id= "Content" > Contents </div>
<div id= "Footer" > Footer </div>
</body>
</body>
Div+css notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
