5. css定位 居中
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定位 居中的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- CSS中居中的完全指南（中英对照翻译）
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- CSS定位走一波（定位学习续）
又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目. 如何让垂直方向居中,解决方式:在父元素添加over ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位，XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
随机推荐
- appium（二）简单的demo
转自http://blog.csdn.net/Yejianyun1/article/details/55517418 启动appium服务,连接手机,将测试用例demo存放到.py文件中 # ...
- python-gearman使用
yum -y install gearmand chkconfig gearmand on && /etc/init.d/gearmand start # /etc/sysconfig ...
- CentOS6下DHCP服务（一）工作原理及安装配置说明
1.DHCP服务用途 DHCP是Dynamic Host Configuration Protocol的简写,DHCP服务器最主要的工作就是自动地将网络参数分配给网络中的每台计算机,让客户端的计算机在 ...
- AD的命名规则 AD常用产品型号命名规则
AD的命名规则 AD常用产品型号命名规则 DSP信号处理器 放大器工业用器件通信 电源管理 移动通信 视频/图像处理器等 模拟A/D D/A 转换器 传感器 模拟器件 A ...
- 2016 Al-Baath University Training Camp Contest-1
2016 Al-Baath University Training Camp Contest-1 A题:http://codeforces.com/gym/101028/problem/A 题意:比赛 ...
- 2017.11.16 JavaWeb-------第八章 EL、JSTL、Ajax技术
第八章 EL.JSTL.Ajax技术 ~~ EL (expression language) 是表达式语言 ~~ JSTL(JSP Standard Tag Library) 是开源的JSP标准标签库 ...
- 彩色图像直方图均衡（Histogram Equalization）
直方图均衡(Histogram Equalization) 一般步骤: 1.统计直方图每个灰度级出现的次数(概率) 2.累计归一化的直方图 3.计算新的像素值 重要:彩色直方图均衡不能对RGB分别做再 ...
- 第9章 初识HAL固件库
本章参考资料:<STM32F76xxx参考手册>.<STM32F7xx规格书>.<Cortex-M3权威指南>, STM32 HAL库帮助文档:<STM32F ...
- 重定向跳出父Frame
当session过期后可以用过滤器来设置重定向页面 代码如下: public class ActionFilter extends HttpServlet implements Filter {pri ...
- 页面跳转，A跳到B，B再返回A时自动定位到离开A时的位置
<template> <div class="hello" @scroll="scrollLoad" id="myScrollBox ...