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-positionbackground-position-xbackground-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 — 定位、背景图、水平垂直居中的更多相关文章

  1. css定位“十字架“之水平垂直居中

    1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...

  2. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  3. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  4. CSS布局:元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. css知识笔记:水平垂直居中(别只看,请实操!!!)

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  7. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  8. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  9. CSS定位背景图片 background-position

    网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 又如: 这些小图片就是整图分 ...

  10. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

随机推荐

  1. 小程序 之自定义tabbar上边框颜色

    一.设置borderStyle 二.设置page样式 page::after{ content: ''; position: fixed; left: 0; bottom: 0; width: 100 ...

  2. python3编程基础之一:程序结构

    程序从程序入口进入,到程序执行结束,大体是按照顺序结构执行语句.函数或代码块,掌握程序的结构,有利于把握程序的主体框架. 1.顺序结构--最常见的结构 顺序结构的程序设计是最简单的,只要按照解决问题的 ...

  3. [Shell]CVE-2019-0708漏洞复现及修复补丁

    0x01 漏洞原理 Windows系列服务器于2019年5月15号,被爆出高危漏洞,该漏洞影响范围较广,windows2003.windows2008.windows2008 R2.windows 7 ...

  4. Nginx之web服务器

    Nginx的介绍 Nginx是由俄罗斯的Igor Sysoev使用C语言开发的轻量级.高性能.开源.跨平台的Web服务器. Nginx使用基于事件驱动的架构能够并发处理百万级的TCP连接,高模块化的设 ...

  5. Java 面向对象(八)

    常用类之String String字符串类 什么是字符串?就是把多个字符,串连一起. String字符串的本质 其实是一个char[]数组 /**该值用于字符存储.*/ private final c ...

  6. Hortonworks,快速上手 Hadoop 的套件

    最近我在思考的一件事情:如何帮助团队 SQL 开发快速掌握大数据相关技术呢?面对疯狂暴涨的数据,SQL Server 存储成本越来越高了,日志的增长量也极大超过预期,隔三差五总有空间不足导致的应用异常 ...

  7. python @classmethod

    写在前面 写博客的时候,我发现拖延症很严重,本来昨天要开始写的,结果东看看,西翻翻,啥也没落实下来.时间过去了,口袋里的收获却寥寥无几.讨厌这样的自己.我要戒掉这个不好的毛病. 拖延症的底层原因之一是 ...

  8. PorterDuffXfermode之PorterDuff.Mode.XOR入门学习

    package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.* ...

  9. 关于Mysql中GROUP_CONCAT函数返回值长度的坑

    1.GROUP_CONCAT函数: 功能:将group by产生的同一个分组中的值连接起来,返回一个字符串结果. 语法:group_concat( [distinct] 要连接的字段 [order b ...

  10. (十二)Centos之关机和重启