一真的小站

鳶飛魚躍,無處不是化境。

0%

十四、盒模型

十四、盒模型

主体

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
<head>
<style>
.box {
width: 400px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
}

.left {
width: 200px;
height: 100%;
background-color: red;
float: left;
/* 添加内间距 */
padding-left: 10px;
/* 添加右边框 */
/* border-right: 3px solid green; */
/* 设置盒模型 */
/* content-box:你设置的width属性值仅仅是内容的宽度,盒子的最终宽度值在windth的基础上再加上padding和border的宽度 */
/* border-box:你设置的width属性值就是盒子最终宽度 */
box-sizing: border-box;
}

.right {
width: 200px;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left">321</div>
<div class="right"></div>
</div>

</body>
对象 定义
width 宽度
height 高度
background-color 背景颜色
margin 外边距的宽度
margin: auto 居中
float 浮动
padding-left 添加内间距
border-right 添加右边框
content-box 仅内容的宽度
border-box 盒子最终宽度
box-sizing 规定两个并排的带边框的框

鼠标上移添加边框

1
2
3
.item:hover{
border:10px solid red;
}
对象 定义
item 自定义类
hover 当鼠标移上时候触发