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. 解决javascript四舍五入不准确

    function roundFixed(num, fixed) { var pos = num.toString().indexOf('.'), decimal_places = num.toStri ...

  2. python模块介绍和 import本质

    模块的定义: 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾的python文件. 包的定义: 用来从逻辑上组织模块的,本质上就是一个目录.(必须有一个__ ...

  3. 浅谈SQL Server中的事务日志(一)----事务日志的物理和逻辑构架

    简介 SQL Server中的事务日志无疑是SQL Server中最重要的部分之一.因为SQL SERVER利用事务日志来确保持久性(Durability)和事务回滚(Rollback).从而还部分确 ...

  4. 《最牛B的Linux Shell命令》笔记

    1.以sudo 运行上一条命令 sudo !! 大家应该都知sudo,不解释.但通常出现的情况是,敲完命令执行后报错才发现忘了sudo.如下: ➜ ~ cp ~/download/CentOS7-Ba ...

  5. kubernetes组件helm

    1.安装helm Helm由客户端helm命令行工具和服务端tiller组成,Helm的安装十分简单. 下载helm命令行工具到master节点node1的/usr/local/bin下(只需要在其中 ...

  6. POJ-3274 Gold Balanced Lineup---hash经典题！

    题目链接: https://vjudge.net/problem/POJ-3274 题目大意: 给定多头牛的属性,每头牛的属性由一个非负数表示,该数的二进制表示不会超过K位,它的二进制表示的每一位若为 ...

  7. Google搜索引擎使用小技巧

    相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...

  8. 0001-BUGIFX-Magento-Zend-Framework-1-PHP5.6.patch

    It is from the full Github-Gist: Bugfix for Zend Framework 1 in Magento (>= 1.7..) + PHP 5.6 http ...

  9. C#声明方法

    一.声明方法 方法是类中用于执行计算或其它行为的成员. 方法可以分为: ?静态方法:可以通过类进行访问.?实例方法:可以通过类的对象进行访问. 1. C#方法的声明 声明方法的语法格式如下: 访问修饰 ...

  10. html5 canvas中CanvasGradient对象用法

    html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...