页面布局
/*外边距 顺序 上右下左 */
/*margin: 100px 0px 30px 40px;*/
/*内边距*/
/*padding: 100px 0px 30px 20px；*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1,.div2{
width: 100px;
height: 100px;
background-color: red;
}
.div2{
background: blue;
/*padding-top:50px;
margin-left: 50px;*/
margin: 100px 0px 0px 50px;
}
.banner{
width: 100px;
height: 100px;
background-color: yellow;
/*浮动定位*/
position: fixed;
bottom: 0px;
right: 0px;
}
.div-relative{
width: 100px;
height: 100px;
background-color: red;
/*相对定位*/
position: relative;
}
.div-absolute{
width: 20px;
height: 20px;
background-color: green;
/*绝对定位*/
position: absolute;
top: 0px;
right: 0px;
}
.xxx{
width: 300px;
height: 300px;
background-color: cadetblue;
}
/*分层*/
.div3,.div4{
width: 200px;
height: 200px;
background-color: cadetblue;
border: 3px solid black;
position: relative;
}
.div3{
z-index: 20;
}
.div4{
background-color: antiquewhite;
margin-top: -50px;
z-index: 10;
}
/*流式布局*/
.dad{
width: 70%;
height: 175px;
border: red 1px solid;
margin: 50px;
/*overflow: hidden;*/
}
.son{
height: 50px;
width: 70px;
background-color: green;
border: 1px solid black;
/*流式布局方向*/
float: left;
color: white;
font-size: 40px;
}
</style>
</head>
<body>
<!--盒子模型-->
<!--<div class="div1"></div>
<div class="div2">字字字字</div>-->
<!--页面布局-->
<!--浮动布局-->
<div class="banner">小广告</div>
<!--相对定位-->
<div class="div-relative"></div>
<!--绝对定位-->
<!--<div class="div-absolute"></div>-->
<div class="div-relative">
<div class="div-absolute"></div>
</div>
<div class="xxx">
<div class="div-absolute"></div>
</div>
<!--分层-->
<div class="div3"></div>
<div class="div4"></div>
<!--流式布局-->
<div class="dad">
<div class="son">1</div>
<div class="son">2</div>
<div class="son" style="height: 70px;">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
<div class="son">7</div>
<div class="son">8</div>
<div class="son">9</div>
<div class="son">0</div>
</div>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
</body>
</html>
