1.准备工作

　　（1）添加背景图片

　　　　

  background: url('images/grass.png')

　　（2）背景图片格式

　　　　

　　　　

  background-size:contain;    #完全限制在方框

                                                #cover 拉伸覆盖

　　（3）全部添加

.block-1{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-2{

  box-sizing: border-box;

  width: 128px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-3{

  box-sizing: border-box;

  width: 256px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

　　　　　　

　　　　（4）添加个小花

　　　　　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Learn css with blocks</title>

    <link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">

  </head>

  <body>

    <div class="flower"></div>

    <div class="block-1"></div>

    <div class="block-2"></div>

    <div class="block-3"></div>

  </body>

</html>
.block-1{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-2{

  box-sizing: border-box;

  width: 128px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-3{

  box-sizing: border-box;

  width: 256px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/rose.png');

  background-size:contain;

}

2.相对定位relative

　　　　　　

　　　　

　　（1）相对定位  position: relative;

.flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/rose.png');

  background-size:contain;

  position: relative;    #相对定位

  left:64px;

  top:64px

}

　　　　　　

　　（2）添加图像的原点

  <body>

    <div class="flower">

      <div class="point"></div>

    </div>

    <div class="block-1"></div>

    <div class="block-2"></div>

    <div class="block-3"></div>

  </body>
.point{

  width: 8px;

  height: 8px;

  background: rgb(235, 113, 13)

}

　　　　

3.绝对定位absolute

　　　　　　

　　（1）添加背景颜色

　　　　

.bg{

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

}
  <body>

    <div class="bg">

      <div class="flower">

        <div class="point"></div>

      </div>

      <div class="block-1"></div>

      <div class="block-2"></div>

      <div class="block-3"></div>

    </div>

  </body>

　　（2）插一个黄花

      <div class="block-1"></div>

      <div class="yello-flower">

        <div class="point"></div>

      </div>

      <div class="block-2"></div>

      <div class="block-3"></div>
.yello-flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/flower.png');

  background-size: contain;

}

　　　　　　

　　（3）绝对定位

　　　　

.yello-flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/flower.png');

  background-size: contain;

  position: absolute;    #绝对定位

}

　　（4）绝对定位的理解

　　　　

　　　　　　

　　　　

　　（5）添加偏移量

.yello-flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/flower.png');

  background-size: contain;

  position: absolute;

  left: 128px;       #添加偏移量

}

　　　　

　　（6）父级元素必须是定位

  • 它的父级元素必须是绝对或者相对定位
  • absolute  relative
.bg{

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

  position: relative;

}

　　　　

　　（7）body有定位

  • 它会一直向上寻找absolute或者relative
  • <body>  标签 它有8px的偏移量，历史原因

　　　　　　

body{

  margin: 0

}

　　　　　　

4.基于定位的居中

　　　　

　　（1）添加边框，和背景图案

.bg{

  border: solid 8px rgb(238, 171, 20);

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

  position: relative;

}

body{

  margin: 0;

  background: url('images/brick.jpg');

  background-size: 150px 150px;

}

　　　　

　　（2）flower居中

　　　　

.flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/rose.png');

  background-size:contain;

  position: relative;

  left:32px;

  top:64px

}

　　（3）不可以固定尺寸 50% 50%

　　　　

　　　　

　　　　

.bg{

  border: solid 8px rgb(238, 171, 20);

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

  position: absolute;

  left: 50%;

  top: 50%

}

　　　　

　　（4） transform修改准星  #css3中出现的

    transform: translate(-50%,-50%);

　　　　　　     

.bg{

  border: solid 8px rgb(238, 171, 20);

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

}

　　　　

5.完整代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Learn css with blocks</title>

    <link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">

  </head>

  <body>

    <div class="bg">

      <div class="flower">

        <div class="point"></div>

      </div>

      <div class="block-1"></div>

      <div class="yello-flower">

        <div class="point"></div>

      </div>

      <div class="block-2"></div>

      <div class="block-3"></div>

    </div>

  </body>

</html>
.block-1{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-2{

  box-sizing: border-box;

  width: 128px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.block-3{

  box-sizing: border-box;

  width: 256px;

  height: 64px;

  background: url('images/grass.png');

  background-size:contain;

}

.flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/rose.png');

  background-size:contain;

  position: relative;

  left:32px;

  top:64px

}

.yello-flower{

  box-sizing: border-box;

  width: 64px;

  height: 64px;

  background: url('images/flower.png');

  background-size: contain;

  position: absolute;

  left: 128px;

}

.point{

  width: 8px;

  height: 8px;

  background: rgb(235, 113, 13)

}

.bg{

  border: solid 8px rgb(238, 171, 20);

  width: 320px;

  height: 256px;

  background: rgb(88, 157, 213);

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

}

body{

  margin: 0;

  background: url('images/brick.jpg');

  background-size: 150px 150px;

}

5. css定位 居中的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  3. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  4. CSS中居中的完全指南（中英对照翻译）

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  5. CSS定位走一波（定位学习续）

    又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目. 如何让垂直方向居中,解决方式:在父元素添加over ...

  6. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  7. 常用的CSS定位，XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  8. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  9. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

随机推荐

  1. Bloom Filter (海量数据处理)

    什么是Bloom Filter 先来看这样一个爬虫相关问题:文件A中有10亿条URL,每条URL占用64字节,机器的内存限制是4G,现有一个URL,请判断它是否存在于文件A中(爬过的URL无需再爬). ...

  2. GL格式一览表

  3. 初识QT中的qDebug()

    首先在头文件中包含 #include<QDebug> 当开发者需要为一个装置.文件.字符串或者控制台,写出调试和跟踪信息时,该类被使用. 在需要使用的地方插入: qDebug(][]); ...

  4. UVA-147 Dollars---完全背包+打表

    题目链接: https://vjudge.net/problem/UVA-147 题目大意: 给定11种面值分别为$100, $50, $20, $10, and $5 notes and $2, $ ...

  5. IOC、注入

    转:https://blog.csdn.net/lutianfeiml/article/details/51731219 实际开发中使用XML还是注解 XML: bean管理 注解: 注入属性的时候比 ...

  6. python非字符串与字符产链连接

    第一种办法: "hello" +' '+str(110) 输出结果: 'hello 110' 第二种办法: import numpy x = 110 print 'hello(%d ...

  7. 简单介绍Spring是什么？

    对于面试者回答什么是Spring,这个问题占6分分值,分值点分布:1.Spring的核心是一个轻量级(Lightweight)的容器(Container).2.Spring是实现IoC(Inversi ...

  8. 【PC-x86-x64】JDK 32bit与64bit的区别及x64 PC的发展历程【转】

    一次偶然分析的机会: 在进行Minecraft也就是所谓的我的世界游戏的时候,在对局域网进行开放的时候,我的是64bit的JDK,而我同学的是32bit的JDK,所以在进行局域网链接的时候就会出现In ...

  9. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

  10. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...