盒子模型
border |
(边框)元素边框 |
margin |
外边距 |
padding |
内边距 |
content |
(内容)可以是文字或图片 |
浮动布局
1.浮动:float:left/right;
2.清除浮动:(div快不想被浮动的div盖住)
Clear:left/right/both
<style>
#d1{
200px;
height: 200px;
background:red;
}
#d2{
200px;
height: 300px;
background: blue;
float: left;
}
#d3{
100%;
height: 100px;
background: #19DF79;
clear: both;
}
#d4{
200px;
height: 300px;
background: #703E3F;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
定位布局
布局定位共有4种方式。
(1)固定定位(fixed)
(2)相对定位(relative)
(3)绝对定位(absolute)
(4)静态定位(static)