File size: 1,669 Bytes
08aee07 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性2</title>
<style>
div{
border:1px solid red;
width:100px;
}
.div1{
width:200px;
height:200px;
/*
外边距：
margin-top:50px;
margin-left:50px;
*/
/* 内边距 */
padding:50px;
/* 设置盒子的属性，让width和height就是最终盒子的大小 */
box-sizing: border-box;
}
.div2{
width:100px;
height:100px;
/*
外边距：
margin:50px;
*/
}
.div3{
float:left;
}
.div4{
float:left;
}
.div5{
float:right;
}
</style>
</head>
<body>
<!--
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right -->
<div class="div1">
<div class="div2">
</div>
</div>
<!-- div 带换行，让其消除换行效果 float -->
<div class="div3">aaaaaaaaaaa</div>
<div class="div4">bbbbbbbbbbb</div>
<div class="div5">ccccccccccc</div>
</body>
</html> |