一、盒子模型
盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)
①margin外边距
.c {
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
简写：
.c {margin: 10px 20px 30px 40px;} 顺序：上右下左
.c {margin: 10px 20px;} 10:上下，20：左右
常见居中：
.c {margin: 0 auto;}
②padding内填充
.c {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写：
.c {padding: 5px 10px 15px 20px;} 顺序：上右下左
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.c1 {
width: 100px;
height: 100px;
border: 3px solid black;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
.c2 {
width: 20px;
height: 20px;
border: 3px solid green;
margin: 10px 20px 30px 40px;
}
.c3 {
width: 200px;
height: 200px;
border: 3px solid yellow;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">div</div>
<div class="c3">div</div>
</body>
</html>
View Code
二、浮动
1、浮动
浮动：
在 CSS 中，任何元素都可以浮动。
只要是页面布局 都会用到浮动
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
下面的案例一个往左浮动，一个往右浮动
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
float: left;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
display: inline-block;
float: right;
}
</style>
</head>
<body>
<div>
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
View Code
2、浮动页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 20%;
height: 500px;
background-color: red;
float: left;
}
.c2 {
width: 80%;
height: 500px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
View Code
3、浮动带来的影响以及解决措施
三、溢出
四、圆形头像
五、定位
1、相对定位
2、绝对定位
3、固定定位