一、盒子模型
盒子模型
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>
二、浮动
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>
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>
3、浮动带来的影响及解决措施
①浮动带来的影响:
脱离文档流，造成父标签塌陷
②clear：规定元素的哪一侧不允许其他浮动元素
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
.c4 {clear: left;}
规定标签的左边不能有浮动的元素
③解决浮动带来的影响：伪元素清除法clearfix：after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3 {border: 3px solid black;}
.c1 {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
}
/*伪元素清除法*/
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="c3 clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
影响：
clearfix：after清除
三、溢出
overflow溢出属性：
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
border: 3px solid red;
overflow: scroll;
}
</style>
</head>
<body>
<div>abcdefghijklmnopqrstuvwxyz</div>
</body>
</html>
四、圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {background-color: yellow;}
.c1 {
width: 100px;
height: 100px;
border: 5px solid white;
border-radius: 50%; /*圆形*/
overflow: hidden; /*多出来的隐藏*/
}
img {width: 100%} /*100%填充*/
</style>
</head>
<body>
<div class="c1">
<img src="1.png" alt="">
</div>
</body>
</html>
五、定位
position:定位
static： 无定位，默认值
relative 相对定位：相对于标签本身原来的位置
absolute 绝对定位：相对于已经定位过的父标签(小米购物车)
fixed 固定定位：相对于浏览器窗口固定在某一个位置(回到顶部)
是否脱离文档流：
脱离文档流：
浮动
绝对定位
固定定位
不脱离文档流：
相对定位
1、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 100px;
height: 100px;
background-color: red;
top: 100px;
left: 100px;
position: relative; # 相对定位
}
.c2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
2、绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100px;
height: 50px;
background-color: red;
position: relative;
}
.c2 {
width: 400px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="c1">购物车
<div class="c2">空的</div>
</div>
</body>
</html>
3、固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 80px;
height: 80px;
border: 3px solid red;
position: fixed;
right: 20px;
bottom: 20px;
}
.c2 {height: 1000px;}
.c3 {
width: 80px;
height: 80px;
background-color: black;
}
.c4 {
width: 80px;
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="c3"></div>
<div class="c1">固定不动</div>
<div class="c4"></div>
<div class="c2"></div>
</body>
</html>
六、模态框
z-index:
设置对象的层叠顺序
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index
不管相对定位，绝对定位，固定定位，都可以使用z-index
浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0
如果大家都没有z-index值，或者z-index值一样，
那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 {
background-color: rgba(128,128,128,0.4);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.c3 {
width: 200px;
height: 50px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
margin-top: -25px; /*在整个框居中，为top的一半*/
margin-left: -100px; /*在整个框居中，为left的一半*/
}
</style>
</head>
<body>
<div class="c1">科技科技科技兴国</div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
七、透明度参数区别
rgba(128,128,128,0.3)
针对背景颜色的透明度
opacity:0.3
针对文本的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 50px;
background-color: rgba(128,128,128,0.3);
}
.c2 {opacity: 0.3;}
</style>
</head>
<body>
<div class="c1">abcdefg</div>
<div class="c2">ABCDEFG</div>
</body>
</html>
