- 阴影 box-shadow
水平偏移量 垂直偏移量 模糊程度 阴影大小 颜色
阴影大小一般可省略
水平偏移量：正值：往右延伸，负值：往左延伸
垂直偏移量：正值：往下延伸，负值：往上延伸
box-shadow: 3px 3px 3px 3px green;
- 使用背景图的优点：
-
不影响页面元素加载，因为页面都是先加载元素，再加载样式， 当使用大图时，如果用图片标签就会影响图片后面的元素的加载速度， 而使用样式是不受影响的；
-
图片显示，如果是图片标签，当图片路径出错时页面上可能会有 图片裂开的小图标，而背景图不会有，不影响用户体验。
-
背景background-：
color：颜色；
image：背景图（url()里面放图片路径，可加引号也可不加）；
size：背景图大小，取值：可以是精确数值、百分比， 也可以是contain（有缩小的效果，保持图片比例，可能会有留白）， 还可以是cover（有放大效果，保持图片比例）
repeat：是否平铺（重复）
repeat：两个方向都平铺（默认值）
repeat-x：水平方向平铺
repeat-y：垂直方向平铺，no-repeat: 不平铺；
position：背景图位置，取值：可以是精确数值、百分比， 也可以是top/left/bottom/right/center；
简写：background: 颜色 图片路径 是否平铺 图片位置; 简写要注意背景图大小要另外设置
-
透明背景色rgba()，透明度是0 - 1之间
background-color: rgba(138, 43, 226, 0.5); -
透明度，针对的是整个元素的内容，取值：0 - 1
opacity: 0.5; -
字间距
letter-spacing: 10px; -
超出隐藏
overflow: hidden; -
在section、nav等里面h1的大小被重置了
案例样式代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
border: solid 1px #333;
/* position: relative; */
}
.box2{
width: 100px;
height: 100px;
border: solid 1px red;
/* position: relative; */
}
.box3{
width: 50px;
height: 50px;
border: solid 1px blue;
/* 绝对定位，位置是由最近的拥有相对定位的父级决定，body默认自带相对定位 */
position: absolute;
right: 0;
bottom: 0;
}
.box-shadow{
/* 阴影 */
/* box-shadow: 水平偏移量 垂直偏移量 模糊程度 阴影大小 颜色 */
/* 阴影大小一般可省略 */
/* 水平偏移量：正值：往右延伸，负值：往左延伸 */
/* 垂直偏移量：正值：往下延伸，负值：往上延伸 */
box-shadow: 3px 3px 3px 3px green;
}
.shadow-all{
width: 200px;
height: 400px;
border: solid 1px #333;
margin: 50px auto;
box-shadow: -10px 0 8px red,
10px 0 8px blue,
0 -10px 8px yellow,
0 10px 8px green;
/*
使用背景图的优点：
1. 不影响页面元素加载，因为页面都是先加载元素，再加载样式，
当使用大图时，如果用图片标签就会影响图片后面的元素的加载速度，
而使用样式是不受影响的；
2. 图片显示，如果是图片标签，当图片路径出错时页面上可能会有
图片裂开的小图标，而背景图不会有，不影响用户体验。
*/
/*
背景background-：
color：颜色；
image：背景图（url()里面放图片路径，可加引号也可不加）；
size：背景图大小，取值：可以是精确数值、百分比，
也可以是contain（有缩小的效果，保持图片比例，可能会有留白），
还可以是cover（有放大效果，保持图片比例）
repeat：是否平铺（重复），repeat：两个方向都平铺（默认值），
repeat-x：水平方向平铺，repeat-y：垂直方向平铺，no-repeat: 不平铺；
position：背景图位置，取值：可以是精确数值、百分比，
也可以是top/left/bottom/right/center；
简写：background: 颜色 图片路径 是否平铺 图片位置;
简写要注意背景图大小要另外设置
*/
background-color: pink;
/* background-image: url('./image/user-avatar.jpg'); */
background-image: url('./case/image/flower.png');
background-size: contain;
background-size: cover;
background-size: 100px 200px;
background-size: 50% 50%;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: left top;
background-position: right bottom;
background-position: center;
background-position: 10px 10px;
background-position: 10% 10%;
background: blueviolet url(./image/user-avatar.jpg) no-repeat left center;
background-size: 100px 100px;
/* 透明背景色rgba()，透明度是0 - 1之间 */
background-color: rgba(138, 43, 226, 0.5);
/* 透明度，针对的是整个元素的内容，取值：0 - 1 */
opacity: 0.5;
}
.title{
/* 字间距 */
letter-spacing: 10px;
}
.box1{
/* 超出隐藏 */
overflow: hidden;
}
.box2{
width: 300px;
height: 300px;
}
.box-com{
width: 500px;
height: 200px;
margin: -10px auto 0;
position: relative;
border-radius: 30px;
}
.com1{
background-color: blue;
background-color: rgba(0, 0, 255, 0.5);
/* margin-left: 20px; */
z-index: 999;
left: -60px;
}
.com2{
background-color: red;
background-color: rgba(255, 0, 0, 0.5);
z-index: 888;
left: 60px;
}
</style>
</head>
<body>
<div class="box1 box-shadow">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<div class="shadow-all"></div>
<h1 class="title">标题</h1>
<div class="box-com com1"></div>
<div class="box-com com2"></div>
<!-- 在section、nav等里面h1的大小被重置了 -->
<section>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题2</h3>
<h4>标题2</h4>
<h5>标题2</h5>
<h6>标题2</h6>
</section>
</body>
</html>
简历小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
}
body{
background-image: url(./image/wood.png);
}
main{
padding-top: 70px;
}
section{
width: 400px;
height: 100px;
border-radius: 30px;
background-color: #333;
margin: -10px auto 0;
position: relative;
}
section:nth-of-type(2n-1) {
left: -60px;
}
section:nth-of-type(2n) {
left: 60px;
}
.item1{
z-index: 999;
overflow: hidden;
background-image: url(./image/flower.png);
background-size: 50%;
background-position: 130% 0;
background-repeat: no-repeat;
}
.item2{
z-index: 888;
background-color: #dededc;
}
.circle{
width: 25px;
height: 25px;
position: absolute;
left: 20px;
bottom: 20px;
z-index: 200;
background-image: url('./image/wood.png');
border-radius: 50%;
}
.item1 h1{
font-size: 50px;
position: relative;
right: 50px;
top: -15px;
text-align: right;
color: #fff;
letter-spacing: 10px;
}
.item1 h2{
position: relative;
left: 40px;
bottom: 50px;
font-size: 40px;
color: #5f7ab0;
letter-spacing: 6px;
}
.item1 h2 span{
display: block;
font-size: 18px;
font-weight: 500;
color: #fff;
margin-top: -6px;
letter-spacing: 2px;
}
.item2{
text-align: right;
}
.dis-btm{
display: inline-block;
vertical-align: bottom;
margin-left: 30px;
}
.item2 h2,.user-info{
margin-right: 30px;
}
.item2 h2{
font-weight: normal;
letter-spacing: 4px;
font-size: 18px;
}
.user-info{
font-size: 13px;
margin-top: 6px;
}
.item8{
overflow: hidden;
text-align: center;
}
.item8 h2,.item8 h3{
position: absolute;
width: 100%;
}
.item8 h2{
top: 25px;
left: 0;
}
.item8 h3{
top: 60px;
left: 0;
}
.circle1{
width: 170px;
height: 170px;
border-radius: 50%;
/* background-color: yellow; */
background-color: rgba(255,255,0,0.5);
position: relative;
left: 30px;
top: -10px;
z-index: 100;
}
.circle2{
width: 230px;
height: 230px;
border-radius: 50%;
/* background-color: blue; */
background-color: rgba(0,0,255,0.5);
position: absolute;
right: 20px;
top: -66px;
}
</style>
</head>
<body>
<main>
<section class="item1">
<span class="circle"></span>
<h1>简历</h1>
<h2>名字<span>ming zi</span></h2>
</section>
<section class="item2">
<span class="circle"></span>
<h2>个人信息</h2>
<div class="user-info">
<div class="dis-btm">
籍贯：XXXX <br>
政治面貌：XXXX <br>
毕业学校：XXXX <br>
专业：XXXX
</div>
<div class="dis-btm">
民族：XXX <br>
出生日期：XXX <br>
身高：XXX
</div>
</div>
</section>
<section class="item8">
<span class="circle"></span>
<div class="circle1"></div>
<div class="circle2"></div>
<h2>标题1</h2>
<h3>标题2</h3>
</section>
</main>
</body>
</html>
定位
-
初始化浏览器的默认样式
html,body,h1,h2,h3,h4,h5,h6,p { /* 外边距 */ margin: 0; /* 内边距 */ padding: 0; } -
添加背景图片 url内部是图片的路径,引号可加可不加
-
使用图片标签和背景图片的区别：
1.加载问题：网页会先加载img标签的内容，再加载背景图片。
若引入了一张大图，那在这个图片下载完成之前，img后的内容都不会显示。
而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片， 不会影响用户浏览网页内容(即，img是内容性的，背景图是修饰性的)；
2.加载失败显示问题：背景图片在加载失败或路径找不到时，不会显示图片标记， img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记。
background-image: url('./image/wood.png');
-
上方外边距-5px，实现遮挡效果
margin: -5px auto 0; -
向元素添加阴影
box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影大小 阴影颜色;
只有水平偏移量和垂直偏移量是必需的，其他的都是可选的
box-shadow: 3px 3px 3px #333;
相对定位，相对于元素自身的当前位置
position: relative;
隐藏父元素多余的内容
overflow: hidden;
:nth-of-type(N)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
N可以是数字、关键词或公式。（选取父元素的第 N 个指定类型的子元素）
找到当前元素的父元素下的所有符合规律的子元素的类型
n:当前序号，从0开始算
扩展：:nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
section:nth-of-type(2n) {
left: -60px;
}
section:nth-of-type(2n+1) {
left: 60px;
}
-
background: 颜色 图片路径 铺展方式 横向位置 纵向位置
background: #1E1A1F url('./image/flower.png') no-repeat 230% 30%;设置背景图片大小，默认值是auto（自动），
大小是相对于父元素的宽和高的百分比的大小(如：父级400，那么20% == 80px),
也可以是精确数值(第一个值是宽度，第二个值是高度，如果只给出一个值，第二个值为auto)、
百分比、contain(保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小)、
cover(保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小)
background-size: 70%;
background-前缀，color: 背景颜色，image: 背景图片，
repeat：如何平铺图片，position：背景图片位置，size：背景尺寸
尝试：平铺：repeat(默认值，背景图像将向垂直和水平方向重复),
repeat-x(只有水平位置会重复背景图像),repeat-y(只有垂直位置会重复背景图像),
no-repeat(不会重复);
位置：top,left,right,bottom,center,精确数值,百分比
(水平方向和垂直方向两两组合，如果仅指定一个关键字，其他值将会是"center"),
以左边为基础，正数则向右平移，最左边为0，然后结合背景大小确定具体位置
background-color: #1E1A1F;
background-image: url('./image/flower.png');
background-repeat: no-repeat;
background-position: 230% 30%; */
堆叠顺序，堆叠层级，值越大层级越高
-
绝对定位，针对外层最近的position：relative 被脱离文档流的元素是可以直接设置宽高的
-
增加或减少字符间的空白（字符间距）
letter-spacing: 6px; -
固定定位，一定要设置宽度
position: fixed; left: 0; bottom: 0; width: 100%;
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历--相对定位绝对定位固定定位</title>
<style>
/* 初始化浏览器的默认样式 */
html,body,h1,h2,h3,h4,h5,h6,p {
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
body {
/* 添加背景图片 url内部是图片的路径,引号可加可不加*/
background-image: url('./image/wood.png');
/* 使用图片标签和背景图片的区别：
1.加载问题：网页会先加载img标签的内容，再加载背景图片。
若引入了一张大图，那在这个图片下载完成之前，img后的内容都不会显示。
而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，
不会影响用户浏览网页内容(即，img是内容性的，背景图是修饰性的)；
2.加载失败显示问题：背景图片在加载失败或路径找不到时，不会显示图片标记，
img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记。 */
}
section {
width: 390px;
height: 100px;
border-radius: 10px;
/* 上方外边距-5px，实现遮挡效果 */
margin: -5px auto 0;
/* 向元素添加阴影 */
/* box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影大小 阴影颜色;
只有水平偏移量和垂直偏移量是必需的，其他的都是可选的 */
box-shadow: 3px 3px 3px #333;
/* 相对定位，相对于元素自身的当前位置 */
position: relative;
/* 隐藏父元素多余的内容 */
overflow: hidden;
}
/* :nth-of-type(N)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
N可以是数字、关键词或公式。（选取父元素的第 N 个指定类型的子元素） */
/* 找到当前元素的父元素下的所有符合规律的子元素的类型 */
/* n:当前序号，从0开始算 */
/* 扩展：:nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
section:nth-of-type(2n) {
left: -60px;
}
section:nth-of-type(2n+1) {
left: 60px;
}
/* 设置第一个section */
/* section:nth-of-type(1){
margin-top: 50px;
} */
.user-title {
/* 设置元素的上边距 */
margin-top: 50px;
/* 综合背景设置，大小另设 */
/* background: 颜色 图片路径 铺展方式 横向位置 纵向位置*/
background: #1E1A1F url('./image/flower.png') no-repeat 230% 30%;
/* 设置背景图片大小，默认值是auto（自动），
大小是相对于父元素的宽和高的百分比的大小(如：父级400，那么20% == 80px),
也可以是精确数值(第一个值是宽度，第二个值是高度，如果只给出一个值，第二个值为auto)、
百分比、contain(保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小)、
cover(保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小) */
background-size: 70%;
/* background-前缀，color: 背景颜色，image: 背景图片，
repeat：如何平铺图片，position：背景图片位置，size：背景尺寸 */
/* 尝试：平铺：repeat(默认值，背景图像将向垂直和水平方向重复),
repeat-x(只有水平位置会重复背景图像),repeat-y(只有垂直位置会重复背景图像),
no-repeat(不会重复);
位置：top,left,right,bottom,center,精确数值,百分比
(水平方向和垂直方向两两组合，如果仅指定一个关键字，其他值将会是"center"),
以左边为基础，正数则向右平移，最左边为0，然后结合背景大小确定具体位置 */
/* background-color: #1E1A1F;
background-image: url('./image/flower.png');
background-repeat: no-repeat;
background-position: 230% 30%; */
/* 堆叠顺序，堆叠层级，值越大层级越高 */
z-index: 1000;
}
.user-info {
background-color: #aa9933;
z-index: 999;
}
.user-contact {
background-color: #6677a8;
z-index: 888;
}
.user-education {
background-color: #cc4488;
z-index: 777;
}
.user-job{
background-color: #e6e6aa;
z-index: 666;
}
.circle{
/* 绝对定位，针对外层最近的position：relative */
/* 被脱离文档流的元素是可以直接设置宽高的 */
position: absolute;
bottom: 10px;
left: 10px;
width: 25px;
height: 25px;
border-radius: 50%;
background-image: url('./image/wood.png');
}
.user-title h2,.user-title h1{
/* 转化为行内块元素 */
display: inline-block;
letter-spacing: 2px;
}
.user-title h2{
color: #6677a8;
/* top、left要结合定位一起使用才有效果 */
position: relative;
/* top: 30px; */
top: 37px;
left: 45px;
}
.user-title h2 span{
color: #fff;
/* 转化为块元素 */
display: block;
font-size: 14px;
font-weight: 500;
}
.user-title h1{
color: #fff;
font-size: 60px;
/* 增加或减少字符间的空白（字符间距） */
letter-spacing: 6px;
/* letter-spacing: -6px; */
position: relative;
top: -15px;
left: 40px;
}
.user-info h3{
/* 文本右对齐 */
text-align: right;
padding: 10px 30px;
}
.info-item{
display: inline-block;
width: 140px;
position: absolute;
bottom: 5px;
text-align: right;
font-size: 12px;
line-height: 18px;
}
.info-item:nth-of-type(1){
right: 180px;
}
.info-item:nth-of-type(2){
right: 30px;
}
.job-circle{
border-radius: 50%;
position: absolute;
/* 透明度 0~1*/
opacity: 0.5;
}
.job-circle:nth-of-type(1){
width: 160px;
height: 160px;
background-color: #6E8C34;
top: -20px;
left: 36px;
}
.job-circle:nth-of-type(2){
width: 200px;
height: 200px;
background-color: #4E2664;
top: -60px;
left: 138px;
}
footer{
padding: 10px 0;
text-align: center;
color: #fff;
/* 固定定位，一定要设置宽度 */
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- section里面的h1和h2字体大小一样 -->
<!-- 因为nav、section这些标签下的h1的字体大小被重置了 -->
<!-- <h1>哈哈哈</h1>
<h2>哈哈哈2</h2>
<section>
<h1>哈哈哈</h1>
<h2>哈哈哈2</h2>
</section> -->
<main>
<!-- 每一个模块都放到一个section标签内部 -->
<!-- 标题 -->
<section class="user-title">
<span class="circle"></span>
<h2>伊贰玖<span>yierjiu(超出隐藏)</span></h2>
<h1>简历</h1>
</section>
<!-- 个人信息 -->
<section class="user-info">
<span class="circle"></span>
<h3>个人信息</h3>
<div class="info-item">
籍贯:福州 <br>政治面貌:党员 <br>毕业院校:工程学院 <br>
专业:HTML5
</div>
<div class="info-item">
民族:汉族 <br>出生日期:1991/06/06 <br>爱好:吃喝玩乐
</div>
</section>
<!-- 联系方式 -->
<section class="user-contact">
<span class="circle"></span>
</section>
<!-- 教育经历 -->
<section class="user-education">
<span class="circle"></span>
</section>
<!-- 求职意向 -->
<section class="user-job">
<span class="circle"></span>
<div class="job-circle"></div>
<div class="job-circle"></div>
</section>
</main>
<!-- 底部信息 -->
<footer>作者：伊贰玖</footer>
<!-- 总结：
1.初始化浏览器的默认样式，设置html,body,h1,h2,h3,h4,h5,h6,p标签
的内外间距（margin、padding）为0；
2.box-shadow: 添加边框阴影，有时候我们会根据需要省略掉阴影大小这个参数
参数顺序：水平偏移量 垂直偏移量 模糊程度 阴影大小 阴影颜色，
（如：box-shadow: 3px 3px 3px #333）;
3.overflow：隐藏父元素多余的内容；
4.:nth-of-type：找到当前元素的父元素下的所有符合规律的子元素的类型；
5.背景（background-）设置：color: 背景颜色，image: 背景图片，
repeat：背景图是否平铺及方式，position：背景图位置，size：背景图大小；
6.display：规定元素应该生成的框的类型，
block：块元素，inline-block：行内块元素，inline：内联元素（默认）；
7.z-index：堆叠顺序，堆叠层级，值越大层级越高；
8.position：指定了元素的定位类型，
属性值含义：relative: 相对定位，相对其正常位置，
absolute: 绝对定位，相对于最近的已定位父元素，位置与文档流无关，因此不占据空间，
脱离页面中的普通流并改变display属性,会将width变成auto(会受到父元素的宽度影响),
fixed: 固定定位，相对于浏览器窗口是固定位置（即使窗口是滚动的它也不会移动），
static：默认值，即没有定位，遵循正常的文档流对象。
-->
</body>
</html>
总结：
1.初始化浏览器的默认样式，设置html,body,h1,h2,h3,h4,h5,h6,p标签 的内外间距（margin、padding）为0；
2.box-shadow: 添加边框阴影，有时候我们会根据需要省略掉阴影大小这个参数 参数顺序：水平偏移量 垂直偏移量 模糊程度 阴影大小 阴影颜色， （如：box-shadow: 3px 3px 3px #333）;
3.overflow：隐藏父元素多余的内容；
4.:nth-of-type：找到当前元素的父元素下的所有符合规律的子元素的类型；
5.背景（background-）设置：color: 背景颜色，image: 背景图片， repeat：背景图是否平铺及方式，position：背景图位置，size：背景图大小；
6.display：规定元素应该生成的框的类型， block：块元素，inline-block：行内块元素，inline：内联元素（默认）；
7.z-index：堆叠顺序，堆叠层级，值越大层级越高；
8.position：指定了元素的定位类型，
属性值含义：relative: 相对定位，相对其正常位置，
absolute: 绝对定位，相对于最近的已定位父元素，位置与文档流无关，因此不占据空间，
脱离页面中的普通流并改变display属性,会将width变成auto(会受到父元素的宽度影响),
fixed: 固定定位，相对于浏览器窗口是固定位置（即使窗口是滚动的它也不会移动），
static：默认值，即没有定位，遵循正常的文档流对象。
