1.background属性
1.1background-image
"默认平铺整个页面"
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url("1.jpg");
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
1.2background-repeat:
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url("1.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
1.3给元素设置padding,padding区域也会平铺背景图片
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url("1.jpg");
background-repeat: repeat-x;
padding: 100px 100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
1.4repeat应用-背景图片
"对于对称的图片,可以使用repeat效果,用作背景图片"
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url("./images/timg2.jpeg");
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
1.5background-position
background-position: -100px -100px;
正值 第一个值表示往右偏移 第二个值表示往下移
负值则相反
除了设置像素值,还有下面的设置方法
水平方向属性值还有三种选择 left center right
垂直方向属性值还有三种选择 top center bottom
1.5.1background-position应用1-雪碧图技术-在一张大图中剪切出小图形
CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?
其实就是 截取 大图一部分显示,而这部分就是一个小图标。
使用雪碧图的好处:
1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
不足:
1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
/*48px是一个小图形的宽和高*/
width: 48px;
height: 48px;
background-image: url("./images/1.png");
background-repeat: no-repeat;
/*这个528px就是该小图片顶部距离整张图片顶部的距离,可以使用ps来查看该距离*/
background-position: 0px -528px;
}
.box2{
width: 48px;
height: 48px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 0 -440px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
1.5.2background-position应用2-通天banner-背景图形水平居中
一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,那么我们可以制作通天banner。
/*通天banner*/
background-image: url("./images/banner.jpg");
background-repeat: no-repeat;
/*顶部水平居中*/
background-position: top center;
/*综合属性设置*/
background: url('./images/banner.jpg') no-repeat center top;
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
height: 812px;
padding-top: 100px;
background-image: url("./images/banner.jpg");
background-repeat: no-repeat;
/*通天banner*/
background-position: top center;
}
.box2{
width: 960px;
height: 36px;
border-radius: 5px;
overflow: hidden;
background-color: purple;
margin: 0px auto;
}
ul{
/*取消ul的样式*/
list-style: none;
}
a{
/*去除a标签的下划线*/
text-decoration: none;
/*一共6个,所以每个设置960/6=160px*/
width: 160px;
/*与父元素的高度一样*/
height: 36px;
/*与height相同,可让字体垂直居中*/
line-height: 36px;
font-size: 20px;
color: white;
/*文字水平居中*/
text-align: center;
float: left;
}
a:hover{
/*鼠标悬浮时,背景色红色*/
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<ul>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
</ul>
</div>
</div>
</body>
</html>
1.6background-attachment: fixed;
"固定背景,滚动页面时,背景不动,上面的内容会滚动"
/*单独设置*/
background-attachment: fixed;
/*综合属性设置*/
background: url(./images/timg2.jpeg) no-repeat 0 0 fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 1200px;
height: 2000px;
border: 1px solid red;
background: url(./images/timg2.jpeg) no-repeat 0 0 fixed;
/*固定 背景 滚动页面时,背景不动,上面的内容会滚动*/
/*background-attachment: fixed;*/
color: red;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
2.定位
定位有三种:
1.相对定位
2.绝对定位
3.固定定位
2.1相对定位
相对定位:相对于自己原来的位置定位
现象和使用:
1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。
2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right
特性:
1.不脱标
2.形影分离
3.老家留坑
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途:
1.微调元素位置
2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。
2.1.1验证相对定位特性
特性:
1.不脱标
2.形影分离
3.老家留坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 50px;
height: 50px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 30px;
left: 20px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<!-- 相对定位三大特性: 1.不脱标 2.形影分离 3.老家留坑 :占着茅房不拉屎,恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.1.2相对定位应用一:微调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.input_text{
font-size: 30px;
}
.input_button{
position: relative;
/*微调之后*/
top:3px;
}
</style>
</head>
<body>
<div class=" box box1">
<input class="input_text" type="text">
<input class="input_button" type="button" value="按钮">
</div>
</body>
</html>
2.2绝对定位
特性:
1.脱标
2.做遮盖效果,提升了层级
3.设置了绝对定位后,不区分行内元素和块级元素,都能设置宽高。
2.2.1验证绝对定位特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 50px;
width: 50px;
}
.box1{
width: 40px;
height: 40px;
background-color: green;
position: absolute;
}
.box2{
background-color: yellow;
}
.box3{
background-color: red;
}
span{
height: 25px;
width: 25px;
position: absolute;
background-color: blue;
}
</style>
</head>
<body>
<div class=" box box1">
</div>
<div class=" box box2">
</div>
<div class=" box box3">
</div>
<span></span>
</body>
</html>
2.2.2absolute的top属性
"top是以页面左上角为参考点(不是以浏览器左上角)调整位置"
所以滚动鼠标后,看不到30px的距离了。
2.2.3absolute的bottom属性
"bottom是以“首屏”页面左下角为参考点调整位置"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 50px;
width: 50px;
}
.box1{
width: 40px;
height: 40px;
background-color: green;
position: absolute;
}
.box2{
background-color: yellow;
}
.box3{
background-color: red;
height: 2500px;
}
span{
height: 500px;
width: 25px;
position: absolute;
/**/
bottom:30px;
background-color: blue;
}
</style>
</head>
<body>
<div class=" box box1">
</div>
<div class=" box box2">
</div>
<div class=" box box3">
</div>
<span></span>
</body>
</html>
2.2.4以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,即("父相子绝"),那么会以父辈元素左上角为参考点。这个父辈元素可以是爸爸,爷爷,曾爷爷。
2.如果父亲元素没有设置定位,那么以所有父辈元素中,设定定位的元素为参考点,即上面所说的爷爷,曾爷爷。
3.不仅仅父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
"父绝子绝,没有实战意义,做网站的时候不会出现父绝子绝。
因为绝对定位脱离标准流,影响页面布局。
父相子绝在页面布局中,是常用的布局方案。
因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅是在当前父辈元素内调整位置信息。"
4.绝对定位的盒子,无视父辈的padding.
2.2.4.1验证:父相子绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
padding: 50px;
}
.box2{
width: 80px;
height: 80px;
background-color: yellow;
position: relative;
}
.box3{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
</div>
</div>
</div>
<span></span>
</body>
</html>
2.2.4.2验证以父辈中设置了定位的盒子为参考点
"如果父亲元素没有设置定位,那么以所有父辈元素中,设定定位的元素为参考点,即上面所说的爷爷,曾爷爷"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
padding: 50px;
position: relative;
}
.box2{
width: 80px;
height: 80px;
background-color: yellow;
}
.box3{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
</div>
</div>
</div>
<span></span>
</body>
</html>
2.2.4.3不仅仅父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
padding: 50px;
/*父亲的父亲是定位的*/
position: absolute;
}
.box2{
width: 80px;
height: 80px;
background-color: yellow;
}
.box3{
width: 50px;
height: 50px;
background-color: red;
/*子元素是相对的*/
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
</div>
</div>
</div>
<span></span>
</body>
</html>
2.2.4.4验证绝对定位的盒子,无视父辈的padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
padding: 50px;
position: fixed;
/*虽然设置了padding,但没有效果*/
padding-top: 50px;
}
.box2{
width: 80px;
height: 80px;
background-color: yellow;
}
.box3{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
</div>
</div>
</div>
<span></span>
</body>
</html>
2.2.5绝对定位盒子居中
绝对定位的盒子margin: 0 auto;不管用了,需要进行如下的设置
left: 50%;
margin-left: -480px;"这里的距离是盒子宽度的一半"
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: absolute;
left: 50%;
margin-left: -480px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: absolute;
left: 50%;
margin-left: -480px;
/*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
2.3固定定位
固定当前元素,使其不会随着页面滚动而滚动
特性:
1.脱标
2.遮盖,提升层级
3.固定不变
参考点:
设置固定定位,用top描述,是以浏览器左上角为参考点。
设置bottom描述,是以浏览器左下角为参考点
作用:
1.返回顶部栏
2.固定导航栏
3.小广告
2.3.1验证固定定位特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box2{
width: 100%;
height: 2000px;
background-color: yellowgreen;
}
.box3{
width: 50px;
height: 50px;
background-color: red;
/*设置固定定位*/
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
</div>
</div>
</div>
<span></span>
</body>
</html>
2.3.2固定定位--返回顶部案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box2{
width: 100%;
height: 2000px;
background-color: yellowgreen;
}
.box3{
width: 80px;
height: 50px;
background-color: red;
/*设置固定定位*/
position: fixed;
right: 50px;
bottom: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class=" box1">
<div class=" box2">
<div class=" box3">
返回顶部
</div>
</div>
</div>
<span></span>
</body>
</html>
2.3.3固定定位--固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
/*这里是为了让图片完整显示*/
padding-top: 36px;
}
.back_top{
background-color: yellowgreen;
width: 100%;
/*固定定位,也无视了父元素的padding*/
/*固定定位后,一定要加top属性和left属性*/
position: fixed;
top: 0px;
left: 0px;
}
.box1{
width: 960px;
height: 36px;
background-color: purple;
margin: 0px auto;
border-radius: 5px;
}
ul{
list-style: none;
}
a{
color: white;
text-align: center;
line-height: 36px;
float: left;
height: 36px;
width: 160px;
text-decoration: none;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="back_top">
<div class=" box1">
<ul>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
<li><a href="ww">导航</a></li>
</ul>
</div>
</div>
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<span></span>
</body>
</html>
3.z-index
1.定位的元素,永远压在没定位的元素上面
1.z-index值表示谁压着谁,谁的值大,谁就在上面
2.只有有了定位的元素,才能设置z-index,即不管是相对定位,绝对定位,固定定位,都可以使用z-index,浮动元素不能使用z-index.
3.z-index值没有单位,是一个正整数。默认z-index值为0.
4.如果都没有设置z-index值或z-index值一样,那么哪个设置在后面,就显示在上层。
5.从父现象,父亲的z-index值大,就显示在上面,即使子元素的z-index值小,也会显示在上面。
3.1验证--定位的元素,永远压在没定位的元素上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 50px;
width: 50px;
}
.box1{
background-color: yellowgreen;
/*验证定位的元素压在没定位的元素上面*/
position: relative;
top: 20px;
left: 20px;
}
.box2{
background-color: yellow;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>
3.2验证--z-index值表示谁压着谁,谁的值大,谁就在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 50px;
width: 50px;
}
.box1{
background-color: yellowgreen;
position: relative;
top: 20px;
left: 20px;
z-index: 3;
}
.box2{
background-color: yellow;
position: relative;
top: 0px;
left: 0px;
/*验证z-index值大的,压着z-index值小的*/
z-index: 5;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>
3.3验证--都没有设置z-index,谁设置在后面,谁显示在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 50px;
width: 50px;
}
.box1{
background-color: yellowgreen;
position: relative;
top: 20px;
left: 20px;
}
.box2{
background-color: yellow;
position: relative;
top: 0px;
left: 0px;
/* 验证都没有设置z-index,谁设置在后面,谁显示在上面*/
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>
3.4验证--从父现象,父亲的z-index值大,就显示在上面,即使子元素的z-index值小,也会显示在上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height: 100px;
width: 100px;
position: relative;
top: 0px;
left: 0px;
}
.box1{
background-color: coral;
z-index: 10;
}
.box2{
background-color: yellowgreen;
z-index: 9;
}
.box1_child{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
top: 150px;
left: 150px;
z-index: 4;
}
.box2_child{
width: 80px;
height: 80px;
background-color: red;
position: relative;
top: 0px;
left: 150px;
z-index: 6;
}
</style>
</head>
<body>
<div class="box1 box">
<div class="box1_child"></div>
</div>
<div class="box2 box">
<div class="box2_child"></div>
</div>
</body>
</html>
转载于:https://blog.51cto.com/10983441/2403957