<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<! - empty element ->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- -->
<style>
*{
padding:0;
/ * Padding to 0 * /
margin:0;
/ Margin * 0 * /
}
div{
width:100%;
/* width*/
color: #78818F;
/* colour*/
}
#box{
height:900px;
/ * H * /
box-sizing: border-box;
/ * Size Calculation Method box: frame * /
padding: 30px 50px 30px;
/ * The box padding: the lower left * /
background-color: #D9DAE0;
/* background color*/
}
h1 {
padding-bottom: 10px;
Margins / * * from the bottom of the inner /
border-bottom: 2px solid black;
/ * From the bottom of the border: 2px solid color * /
}
#mainbody{
width: 80%;
/* width*/
margin-top: 30px;
/ * The distance on the margins: 30px * /
padding-left:30px;
/ * Left padding distance * /
margin-left:50px;
/ * Left margins distance * /
background-color: #D9D9D9;
/* background color*/
border-left:10px solid #42456d;
/ * Left border distance; 10px fixed color * /
}
.div{
margin-top:30px;
/ * * On the outside boundaries of distance /
text-align: center;
/ * Horizontal alignment center * /
font-size: 28px;
/* font size*/
}
.one{
width:100px;
/* width*/
border-left:10px solid #474859;
/ * Border from left: Thickness style color * /
border-right:10px solid #474859;
/ * From the right border: Thickness Color Style * /
}
.two{
margin-top:30px;
/ * The distance from the outside * /
}
#three{
height:100px;
/ * H * /
background-color: #A6A6A6;
/* background color*/
margin-top:40px;
/ * The distance from the outside * /
padding-top:5px;
/ * * The inner margin distance /
padding-left:40px;
/ * Left padding distance * /
}
p{
margin-top:30px;
/ * The distance from the outside * /
}
a{
color: #78818F;
/* colour*/
}
</style>
</head>
<body>
<div id="box">
<H1> CSS box model </ h1>
<div>
<div id="mainbody">
Web design often heard the attribute name: content (content), filling (padding), border (border), border (margin), CSS box model possess these attributes. <br>
These attributes we can use common things in everyday life - a box as a metaphor to understand, so call the box mode. <br>
CSS box model is a kind of mental model in web design often used CSS techniques will be used. <br>
</div>
</div>
<div class="one div">原理</div>
<div class="two">
Let us talk about us page: content (content), filling (padding), border (border), border (margin), CSS box model possess these attributes. <br>
These attributes we can transfer it to our daily lives in a box (box) up understanding, seen in everyday life box is a box can hold one kind of thing, but also have these attributes, so call the box mode. <br>
</div>
<div class="one div">特点</div>
<div class="two">
Imagine a box, it has: margins (margin), frame (border), Padding (padding), content (content) four properties; <br>
Let the box top view, which are of an approximately four sides, each attribute in addition to the content (Content), comprises four parts: up and down; the four parts can be provided at the same time, may be provided, respectively; the padding may be understood as from your box of stuff and borders, and the border thickness and color of the points there, the content is the middle of the box filled with things from the outside border is outside the automatic stay out of a blank. <br>
</div>
<div class="one div">结构</div>
<div class="two">
Contents (CONTENT) is a box filled with things; <br>
The filling (PADDING) is the fear of accessories in your box of stuff (expensive) damage while adding foam or other seismic; <br>
Border (BORDER) is the box itself; As boundary (MARGIN then the box can not be placed when all piled up together, to leave some space to maintain ventilation, but also for the convenience of out on a web page design, content often refers to Wen-yu. , pictures and other elements, but can also be a small box (DIV nesting), with real-life case different is that in real life things are generally no larger than a box, the box will be otherwise stays bad, and the CSS box resilient, there's something greater than the box itself up to stretch it, but it will not be damaged. <br>
Filling only the width of properties, each HTML tag can be regarded as a box; <br>
</div>
<div id="three">
<P> Content Source: <a herf="#"> CSS box model - Baidu Encyclopedia </a> </ p>
<P> Author: Baidu Encyclopedia </ p>
</div>
</div>
</body>
</html>