css — 定位、背景图、水平垂直居中
目录
1. 定位
position:static | relative | absolute | fixed;
static 静态定位
relative 相对
absolute 绝对
fixed 固定
1.1 静态定位
静态定位意味着“元素默认显示文档流的位置”。没有任何变化。
1.2 相对定位 relative
1.特征：
- 给一个标准文档流下的盒子单纯的设置相对定位，与普通的盒子没有任何区别
- 留“坑”，会影响页面布局
2.作用：
- 1.用于微调元素
- 2.做“子绝父相”布局方案的参考
3.参考点：
- 以原来的盒子为参考点
4.相对定位的值：top 、bottom 、left 、right
<style>
.box {
width: 500px;
height: 600px;
border: 1px solid #000;
}
.box .a {
width: 200px;
height: 200px;
background-color: red;
}
.box .b {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 30px;
left: 50px;
}
.box .c {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
1.3 绝对定位 absolute
1.参考点：
判断是否有定位（相对定位，绝对定位，固定定位）的祖先盒子进行定位：
- 1.如果没有定位的祖先盒子，以body为参考点
- 2.如果单独设置了一个盒子为绝对定位：
- 1.以top描述，它的参考点是以body的（0，0）为参考点
- 2.以bottom描述，它的参考点是以浏览器的左下角为参考点
2.子绝父相
以最近的父辈元素的左上角为参考点进行定位
3.特征：
- 1.脱标
- 2.压盖
- 3.子绝父相
<style>
.box {
width: 500px;
height: 600px;
border: 1px solid #000;
position: relative;
float: right;
}
.box .a {
width: 200px;
height: 200px;
background-color: red;
}
.box .b {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 20px;
left: 20px;
}
.box .c {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
浮动和绝对定位的特征：
<style>
/*span {*/
/*background-color: red;*/
/*!*float: left;*!*/
/*position: absolute;*/
/*width: 200px;*/
/*height: 60px;*/
/*}*/
.container{
width: 1226px;
height: 100px;
margin: 0 auto;
background-color: #000;
}
.logo{
width: 55px;
height: 55px;
background-color: #ff6700;
float: left;
margin-top: 20px;
}
</style>
</head>
<body>
<span>
mjj
</span>
<div class="container">
<div class="logo"></div>
</div>
</body>
1.4 固定定位 fixed
它跟绝对定位基本相似，只有一个主要区别：绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。
1.特征：
- 1.脱标
- 2.固定不变
- 3.提高层级
2.参考点：
以浏览器的左上角为参考点
<style>
body{
padding-top: 100px;
}
.active{
position: relative;
background-color: yellowgreen;
}
.fix{
width: 100%;
height: 100px;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<p>MJJwusir</p>
<p>wusir</p>
<p class="active">YAOwusir</p>
<div class="fix">固定不变</div>
<p>wusir</p>
<p>wusir</p>
</body>
1.5 z-index
1.z-index只应用在定位的元素，默认z-index:auto;(auto相当于0)
2.z-index取值为整数，数值越大，它的层级越高
3.如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系)
4.从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。
/*从父现象*/
<style>
.box1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 60px;
border: 2px solid blue;
background-color: #000;
z-index: 10;
}
.box2 {
position: absolute;
top: 20px;
left: 0;
width: 200px;
height: 60px;
border: 2px solid red;
background-color: greenyellow;
z-index: 6;
}
</style>
<body>
<div class="father1" style="position: relative;z-index: 2;">
<span class="box1"></span>
</div>
<div class="father2" style="position: relative;z-index: 3;">
<div class="box2"> </div>
</div>
</body>
2. 背景图
1.背景图属性
- 1.background-image:url("图片地址"); 给一个元素设置一个或多个背景图像
- 2.background-repeat:
- 定义背景图像的重复方式。 背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
- 属性值：
- repeat 默认值。表示背景图水平和垂直方向都平铺
- no-repeat 表示背景图水平和处置方向都不平铺
- repeat-x 表示背景图只有水平方向上平铺
- repeat-y 表示背景图只有垂直方向上平铺
- 3.background-position
- 表示背景图定位初始位置。
background-position是background-position-x和background-position-y的综合属性。如果想使用background-position属性，那么必须先指定background-image属性。 - 语法：
- 1.background-position:值1 值2;
- 2.background-position:position position;
- 表示背景图定位初始位置。
<style>
.bg{
width: 1200px;
height:1200px;
border: 1px solid #000;
/*设置背景图*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*调整背景图的位置*/
/*background-position: -164px -106px;*/
background-position: center center;
color: green;
font-weight: 700;
font-size: 30px;
}
</style>
2.CSS Sprite 雪碧图
CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
使用雪碧图的使用场景:
-
静态图片，不随用户信息的变化而变化
-
小图片，图片容量比较小(2~3k)
-
加载量比较大
一些大图不建议制作雪碧图
优点:
- 有效的减少HTTP请求数量
- 加速内容显示
雪碧图的实现原理:
- 它通过css的背景属性的backrground-position的来控制雪碧图的显示。
- 控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。
<style>
.swiper {
width: 100%;
height: 460px;
}
.container {
width: 1226px;
position: relative;
margin: 0 auto;
}
.swiper span {
display: inline-block;
width: 41px;
height: 69px;
background: url("icon-slides.png") no-repeat 0 0;
position: absolute;
margin-top: -34px;
top: 50%;
cursor: pointer;
}
.swiper span.prev {
background-position: -83px 0;
left: 234px;
}
.swiper span.next {
background-position: -124px 0;
right: 0;
}
.swiper span.prev:hover{
background-position: 0 0;
}
.swiper span.next:hover{
background-position: -42px 0;
}
</style>
<div class="swiper">
<div class="container">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
3. 水平垂直居中
3.1 行内元素水平居中显示
1.第一种方式：line-height+text-align
p {
width: 200px;
height: 200px;
background: #666;
color: #fff;
line-height: 200px;
text-align: center;
}
2.第二种方式：给父元素设置display:table-cell;,并且设置vertical-align:middle
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
3.2 块级元素水平垂直居中
1.方法一：position+margin
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.child{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<div class="father">
<div class="child">我是个居中的盒子</div>
</div>
2.方法二：display:table-cell
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align: middle;
}
</style>
<div class="father">
<div class="child">我是个居中的盒子</div>
</div>
3.第三种：纯position
<style>
.father{
width: 500px;
height: 300px;
background-color: red;
position: relative;
}
.child{
/*如何让一个绝对定位的垂直居中： top设置50%，margin-top设置当前盒子的一半，并且是负*/
position: absolute;
width: 100px;
height: 140px;
background-color: green;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -70px;
}
</style>
<div class="father">
<div class="child">我是个居中的盒子</div>
</div>
