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>
推荐阅读
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
让input文本框文本垂直居中代码实例_html/css_WEB-ITnose
-
CSS之“绝对定位”的盒子使用margin:0px auto;不能实现水平居中的解决方案
-
css定位练习“十字架“之水平垂直居中_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
css如何让浮动元素水平居中_javascript技巧
-
css水平居中那点事_html/css_WEB-ITnose
-
转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)
-
总结利用css设置元素垂直居中
-
css如何让垂直文字居中