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. android错误整理

    1.Caused by: java.lang.IllegalStateException: Only fullscreen opaque activities can request orientat ...

  2. Struts1.x 基本原理及注册模块的实现

    1.编写JavaBean:User,必须继承于ActionForm类 package myuser; import org.apache.struts.action.ActionForm; publi ...

  3. React怎么创建.babelrc文件

    在windows环境下做react开发其实是一件非常让人头疼的事,强烈建议使用Mac或者是Linux系统,否则真的是自己挖坑自己跳了. 不过,这里还是给大家说说如何在windows环境下新建一个.ba ...

  4. MySQL数据库实验五：数据更新

    实验五   数据更新 一.实验目的 掌握数据更新操作的用法. 二.实验环境 三.实验示例 1.往基本表SC中插入元组. ①    INSERT INTO S(S#,SNAME,AGE,SEX) VA ...

  5. Selenium入门系列2 窗口大小控制

    selenium控制窗口最大化.适合手机的宽度.适合pad的宽度等尝试下实例,网站是否做了响应式布局 #coding=utf-8 # 改变浏览器窗口大小.前进后退 from selenium impo ...

  6. git 分之合并和冲突解决

    Git 分支管理和冲突解决 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支 ...

  7. jmeter参数化读取数据进行多次运行

    jmeter参数化数据,可以使用csv,还可以使用数据库的方式 1.使用csv读取数据 在线程组中,配置原件中,选择csv data set config 1.本地创建了16个数据,存为test.tx ...

  8. Spring Security 实现手机验证码登录

    思路:参考用户名密码登录过滤器链,重写认证和授权 示例如下(该篇示例以精简为主,演示主要实现功能,全面完整版会在以后的博文中发出): 由于涉及内容较多,建议先复制到本地工程中,然后在细细研究. 1. ...

  9. Mybatis之批量更新操作

    更新单条记录 UPDATE course SET name = 'course1' WHERE id = 'id1'; 更新多条记录的同一个字段为同一个值 UPDATE course SET name ...

  10. A Multigrid Tutorial中涉及到的难点词汇

    Multigrid Tutorial中涉及的词汇: Elliptic PDEs 椭圆型偏微分方程 Lawrence Livermore National Laboratory 劳伦斯利福摩尔国家实验室 ...