10.CSS Learning-Box model

<style type= "Text/css" >

/*
Box model: The box model is to compare an HTML border to a box border, and the box model is used to manipulate the distance between the data and the border, or the distance between the border and the border.


The box model is mainly used for operating the inner margin (padding) and margin (margin)

*/
div{
Border-style:solid;
width:100px;
height:100px;
/* Inner margin */
padding-left:10px;
padding-top:20px;
}

. one{
margin-bottom:30px;
}

. two{
margin-left:700px;
}

</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>
<div class= "One" >
This is a div.
</div>

<div class= "both" >
This is a two div.
</div>
</body>

<style type= "Text/css" >
/*
CSS positioning:

Relative positioning: Relative positioning is moved relative to the original position of the element.

Mode of use: position:relative;


Absolute positioning: Absolute positioning is relative to the entire page.
Position:absolute;
top:200px;
left:380px;

Fixed positioning:
position:fixed; /* Fixed positioning: Fixed positioning is relative to the entire browser only.
top:380px;
left:1000px;

*/
div{
Border-style:solid;
width:100px;
height:100px;
}

. one{
Background-color: #F00;
}

. two{
Background-color: #0F0;
position:relative; /* relative positioning, for current position */
top:10px;
left:10px;

}

. three{
Background-color: #00F;
}

#ad {
width:400px;
height:200px;
Border-style:solid;
font-size:24px;
Color: #F00;
Position:absolute; /* Absolute positioning, relative to the upper-left corner of a page. */
top:200px;
left:380px;
}

#ad2 {
position:fixed; /* Fixed positioning: Fixed positioning is relative to the entire browser only. */
top:380px;
left:1000px;
}

</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>

<div class= "one" > one</div>
<div class= "both" >two</div>
<div class= "three" >three</div>
<div id= "AD" >
<marquee scrollamount= "$" > Ads </marquee>
</div>
Currently learning CSS positioning .... Currently learning CSS positioning ....
<div id= "Ad2" >

</div>

</body>

10.CSS Learning-Box model